HTML5中的canvas绘图怎样用呢？ / 木子杰软件教程

h5游戏开发近几年很火，而h5中的canvas元素在其中就起到很大的作用，今天小编我就来教教大家怎样使用canvas来在网页绘图，一起来学习吧！

操作方法

01

首先，我们打开hbuilder之后，新建一个HTML5格式的网页，因为canvas是属于HTML5里面的元素，如果是HTML格式的网页，是不支持canvas元素的哦。
02

如图，这就是HTML5格式的模板标准，如果手速好的话也可以自己手打出来，哈哈。接着我们就可以在这个h5网页里面书写代码，开始绘图。
03

如图，在页面中书写canvas标签，并且给这个canvas标签定义一个id，id名看你自己，想取啥名就取啥，并且定义它的width和height。注意，width和height要在canvas这里定义，不要通过css样式定义哦，如果在css样式定义就会造成拉伸哦。
04

接着我们再自定义canvas的css样式，这里我就给canvas设置一个黑色的边框。
05

如图，预览效果，黑色边框里面的就是canvas的范围，我们可以在里面绘图。
06

绘图是通过js来实现的，我们开始书写js代码，注意，如果js代码放在前面，则要加上一个window.onload=function(){}函数。因为js代码是在浏览器启动的时候就执行的，如果不加这个函数，当打开浏览器的时候，js代码先执行了，而canvas元素还没有被执行，这就导致无法获取到canvas元素哦，所以我们要在这个函数。当然，如果把js代码放在body标签的后面可以不加这个函数。
07

之后，我们定义一个变量，用来存放获取到的canvas元素。
08

然后我们使用getContext(“2d”)方法来把canvas转换成一个2d对象,然后再把它复制给一个变量test。注意，getContext是h5内置的方法，不可以自己更改哦。
09

之后，我们调用fillRect()方法来绘制矩形，括号里面的参数表示的是x,y,width,height,也就是x坐标，y坐标和宽，高，我们输入参数即可。
10

之后，保存网页，在canvas画布上面就绘制得到一个矩形了，因为没有设置颜色，默认颜色是黑色的哦。
11

如果要设置颜色，可以设置fillStyle属性，注意，fillStyle属性必须设置在绘制图形的方法之前哦。如图，我的是绘制矩形的方法fillRect(),所以就放在了它的前面。
12

最后来看看设置fillStyle之后的矩形，颜色已经改变了。关于canvas的绘制就先讲矩形的，后续我再分享其他的一些属性方法的指南，哈哈！

HTML5中的canvas绘图怎样用呢？

操作方法

相关推荐