html 5维语版教程

大家好，我们本节学习使用 converse 会制直线和图形。 我们的编程实践，首先是添加 converse 标签，控制样式， 接着需要画直线、横线，第三是画一个圆，最后添加文字， 这个是我们代码运行的效果，我们画了一条直线，画了一条横线，竖线 直横线，然后画了一个圆，圆里面我们加了一个文字，但是我们看到这个圆里面加了一个文字以后就是一个起籽了。 首先我们简单介绍一下 converse 标签，它是 atm 五标准里面的新增标签， 它本身是一个图形的容性，需要使用 gs 脚本来绘制图形， 就是 converse， 它本身里面什么也没有，需要我们使用 gs。 呃，这个是我们天，呃，我们创建的我们这里面使用的这个 cover 标签， 这里面宽和高的话是宽是呃，四百五，高是五百。我们知道那个我们的棋盘，它，它的那个左右结构，它的那个比例是上下是那个。呃，十个方格， 左右是九个方格，然后是九比十这样一个比例，然后这个 com 标签中间的部分是如果这个浏览器不支持这个 combs 的 话，会显示 现在的话基本上所有的浏览器比较，嗯，现代的这种浏览器它是支持这 combs 的， 在 combs 这个标签刚出来的时候，这种 这里面的代码就是说你需要去区，嗯，区分一下啊，现在基本上就是就是就是说啊，基本上就不会遇到这个现代的这个浏览器不支持 converse。 然后我们需要知道的这个 converse 它是它的坐标系，它的坐标系是从这个左上角这个地方开始，从左往右，从上往下，从这个地方是它的坐标原点， 就是从左往右增大，从上往下增大 s， 嗯，它它的这个坐标性， 然后然后这边是我们画直线的一段代码，就是通过这段代码我们可以画直线上面的这段代码是这一行代码是获取到这个元素，这是 g s 里面操作 dom 的 一个标准的写法。 get element by id， 如果你不会的话，可以 可以查一下相关文档。然后康沃尔斯画康沃尔斯的时候，呃，康康沃尔绘画的时候，首先需要获取到他的这个二 d 的 上下文，然后有了这个上下文以后，然后你就可以看着绘者，然后，然后是比根 pass 啊。木兔是移到一个歧视点，蓝兔的话是那个中点，是从这个点到坐标点到这个坐标点，然后画一条直线，抽象是具体的绘画， 呃，具体问题的话就是我们前面的，在上一节的话，我们把这个嗯压圆嵌死点。接受文件的话，我们放到了 had 标签里面， 然后如果我们继续放在这个 head 标签里面的话，我们的这个，呃，我们的这个 get m by id， 它是获取不到这个元素的，所以说它会报一个 cannot read properties of not reading reading get contest， 就是 报一个这样的一个。呃，错误，就是找不到，找不到。这，呃，不是找不到，是呃我，哦，这个， 这个 now 就是， 呃，就是上面的那 combs， 呃，获取不到这个元素，它，它，它本身是 now， 所以 说它没办法调用这个 game contacts， 呃，有两种解决办法，其中一种解决办法是使用 gcorey， gcorey 的 话它带了一个 document ready 啊，它有，呃几种写法，我这里面列出了一种写法，就是我们可以把它放在 document， 呃， document ready 里面，然后这里面包一下，把代码放在这里面， 然后还有一种办法是我们把这个 g s 文件放到最下面，放在呃 body 结束标签之前，然后就是把 g s 的 引入放在最下面，这样的话就不会报错，也就是放入我们的这个，呃，嗯， cover 标签的后面就可以。 呃，接下来是画圆形，画圆形的话，然后开始，然后这是画圆形的这个，呃一个对应的环啊函数，它其实除了画圆还可以画 画各种弧形啊，就是我们这边是画了一个圆，那个让他封闭了一下，然后这边是坐标半径，然后这是他的角度，然后这边是这个圆里面的填充颜色，我们简单的找了一个比较浅的这种填充颜色。 哦，我们这里面使用的 i g b n， 然后我们填充，然后 stroke style 使用的这个 red， 然然后这是它的圆的这个圆圆的边框的这种颜色，然后绘画，这样就可以画出圆。 呃，这里面我给出了这个 i 函数参数的含义，因为这个函数看起来还比较复杂，供大家作为参考。 呃，最后，呃这边是呃画文字，也就是我们要加一个文字，我们刚好把这个文字加到了这个圆里面，我们看到这个标签，呃，这个这个坐标跟前面的坐标是基本上保持一致的， 然后泰斯尔兰是这个居中，然后费尔斯加是这个文字的颜色，放的是字体，这这边是字号和它的这个字体，然后这边是填出文字，还有具体的这个文字的位置，然后画出它的这个文字， 其他功能就是看文字，它本身还有其他的很多功能，渐变，动画效果，呃，可以绘制各种形状，它也可以加在呃图片，嗯，还有这个它还能做，呃，还能。呃，还有这个坐标转换， 还可以做物理系统，就是有重力的。很多游戏开发前端框架都是基于 converse 的。 就是就是，你如果做游戏开发的话，你发现一些前端，他，哎，他做前端开发的一些游戏框架，他本身他底层，其实 你看不到 canvas， 但是它最后使用 canvas 给你呈现了。我们现在使用的是 canvas， 但 canvas 之前的话就是在网页上面，如果实现这种动画效果或者其他的这种效果，或者一般使用这种 flash。 一 般使用 flash， 它对应的编程语言是这个啊， action script。 嗯，很早以前这个 flash 还是很火的， 然后那个苹果手机出来的时候，那个乔布斯他就不支持 flash， 他 在苹果手机里面啊，不支持这个 flash， 然后他支持这个新星的这一卡尔斯，这样就怕了这个 flash 这样一个技术的一个死刑，到现在基本上这个 flash 技术基本上就被淘汰了。 呃。卡尔斯和 svg， svg 的 话，它的全称是，呃，这样一个， 这样一个，呃，这是他的英文全称，这边是，呃，呃，中文的名字叫做可缩放的矢量图形。 呃。他对于这个象棋，嗯嗯嗯，棋谱播放的这个功能的话，他也可以试一下，使用 f v g 的 话，我们也可以实现。就是这个棋谱播放。 国际知名的国际象棋的很多知名网站，他们的棋步法有很多都是采用 lv g 的， 我教了几个，他们都是采用 lv g 的 啊，但，但是使用 lv g 还是卡瓦斯都可以，我们都可以实现同样的效果。它的代码的话有很多代码都可以附用， 呃，它只是绘图的方式不一样哦。呃，我们这里这里选用这个 canvas 的 话，不仅仅可以在浏览器里面运行，小程序里面它对这个 svg 的 支持不大友好，很多小程序它都支持这个 canvas 啊。微信小程序，还有百百度小程序。我们知道这种国内的厂商他有这种小程序，我们编写的，我们编写的 html 的 这种，嗯，纯 js 代码，稍加改造就可以，在小程序里面你就行。就是我们的这种看文字写法和小程序的看文字写法它基本上是一样的， 如果你会会制了一条直线、横线，然后会画了这种文字的话 啊，还要会会会制这种，呃，圆形的话，其实会制一个棋盘，会制一个局面，然后就是重复上述的工作，但是我们会制一个棋盘的话，看起来很难，但实际上我们用到的技术跟我们这一节学到技术是一模一样的。 我们现在打开就是，呃，我们现在看一下代码，看一下代码，这是这是我们这是我们的第二第二节的代码，然后这边然后打开运行，这是运行的这个代码的运行效果。我已经在这个， 呃，微软的这个 v o c o code 的 里面打开了这个代码，然后然后在这段代码里面就是我们看到，呃呃，这段是我们加进来的这段， 这个代码是我们在这个这个 atm 里面加进来的一个新的这个标签，就是我们前面已经给给大家展示了，就是这一个标签就加进来，加进来以后我给他设了一个背景颜色，如果你不设背景颜色的话，它还默认是不显示出来的。 然后呃这个脚本的话，这个脚本这个压源 ts 点 gs 这个文件，它开始的时候是在这个位置的，开始的时候是在这个位置的，我们把它移到了这个位置，如果你放在这个位置的话，如果你放到这个位置的话， 你放在这个位置的话，它是它是画画不出来这个图形的话，它这个时候，这个时候我们，我们就是打开我们的这个浏览器，就是看到我刚才说的这个错误，就是说就是说可以看到，就是说他说的这个，呃这 cover 得到的是 no， 就是 找不到其实这个 chessboard 这个，呃呃对应的这个元素， 然后我们把它，我们把它放到，我们把它放在这个 cover 这个标签的下面，其实我们一般放在这个 body 接触标签靠前一点位置就可以， 如果你紧挨着这个地方放的话也是可以的。在单习惯上就是偶尔习惯就就放在最下面，最下面的话啊最下面，呃这样的话它就可以出来，就是我们就可以把这个 g s 的 效果就可以出来， 然后，然后，呃，然后这个七 s rapper 这个地方我们已经让它举重了啊，我们这个，然后这边是我们新加的这些代码，呃上面的代码就是获取这个七 s board 这个，这，这是根据 id 获取它的， 呃获取这个元素 combs， 就是 我们刚才已经说了这段代码是，呃画直线的，画一条竖线，这段代码是画了一条横线， 然后这根代码画了一个圆，这根代码画了一个添加了，在圆里面添加了一个文字。我们运行的时候我们可以这样，就是比如说把它注视下来， 把下面的代码注视下来，你就可以分别的体验一下。就是说我们可以看到画画的是这个圆，你看它的这是它的起点位置， 这地方是起点位置是十，跟这个地方它对应 c， 你 看之间有十 ps 的 这种间距，然后这个画竖线，竖线的话就是 x 轴保持不变，它都是 ps， 然后从十 ps 一 直画到画到下面， 然后接着的话，接着的话我们又画了一条直线，我们又画了一条直线， 啊啊，这条直线是一个嗯，外周保持不变，然后就是说我们又从这开始，然后画了一条直线，然后然后再接下来我们画一一个圆，我们看一下这个圆的这个效果， 你看画啊画画了一个圆圆的，这个边的颜色就是我们这里面的这个 red， 然后这个 feel style 就是 这个填充的这个颜色，填充的颜色，填充的颜色是一个淡淡的颜色，你可以 改为你自己喜欢的这种颜色。然后最后我们画这个文字，画文字的话我们看这个坐标跟他的这个圆的中心点的这个坐标是比较接近的，但又是稍微不一样，注意他的这个坐标的位置，他是不一样的， 如果把它改为了改为这个完全一样，完全一样的话，就是说开始的时候我不知道时候我其实也是这样画出来的，画出来你看这个冰，他画不到这个圆里面， 但这个时候的话，我给他稍微加一点，你看发现这个这个位置高了，这个冰的位置高了，我，我因为他是从下往上的，我给他加一点， 哎，他是不是往往往下移了一点啊？然后这样就就比较好了，就就说他这个位置怎么来的？你你你，如果有学生说你怎么知道是刚好二幺零，其实我其实我也是试出来的，我也是试出来的，我开始画的是啊二百， 然后后来后来我发现有有这样一个问题，我就把它改成了，又加了十 ps， 然后他就他就可以了， 然后就说就说大家，大家可以按照这个比较小的目标，就是我们编写程序的时候其实是一个很复杂的问题，就是一个很复杂的问题，我们可以给他， 给他就是给他就是说那个叫什么，给他就是分成几部分，其实我们画一个旗标，画一个局面的话，他其实就是首先我们想到的就是解决 如何在这个 cover 里面画一条直线，直线还要画一个棋子的过程，一旦我们会画到直线，我们重复这个操作，然后我们就可以把这个棋盘给绘制出来了。 嗯，编程本身是一个实践性很强的这个一个工作啊， 我希望大家就是在学习的过程中多实践，多动手，就是说你需要自己去写代码，本节课程就哦讲到这里，谢谢大家的收看。

看好了全网爆火的这个 ai 十五的编辑器，好多宝子们都找不到，我今天出个教程，三秒钟教会你怎么下载，非常的简单，跟着我的操作来。首先咱们在视频的右下角点这个箭头，选择一下分享链接，复制一下， 成功以后呢，我们打开这个，没有的，可以在应用商店或软件市场我们弄一个，打开以后停两秒，这里他会弹出一个文件夹，我们点立即查看。 如果没有弹出，我们可以在这里搜索电台宝库四个字，它会弹出一个文件夹，我们点立即查看，找到这个热门软件。四、找到 h t m l 五、编辑器，取消全选，单选这个，点击右下角保存就可下载安装了。