H5中的canvas

canvas

在H5中 canvas 元素使用 JavaScript 在网页上绘制图像。画布的话本身是300乘以150的原始宽高，是一个矩形区域，可以控制器中的每一个像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。canvas本身就是一个标签，它本身是没有绘图能力的，，所有的绘制工作必须在JavaScript 内部完成。在JavaScript 内使用 id 来寻找 canvas 元素：var canvas = document.getElementsByTagName(“canvas”)[0]。然后创建context对象：var cxt = canvas.getContext(“2d”)。getContext(“2d”) 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。下面举个例子怎么在canvas里面画矩形：
ex：cxt.fillStyle="#FF0000";cxt.fillRect(0,0,150,75);
fillstyle是给这个矩形染色，fillRect则是给这个矩形规定了形状、位置和尺寸。
接下来举个怎么在canvas中画直线的例子：
ex: ctx.beginPath();//路径开始
cxt.moveTo(10,10);//起始坐标
cxt.lineTo(150,50);// 路径
cxt.lineTo(10,50);// 路径
cxt.stroke();//绘制
ctx.closePath();//路径结束
moveTo()就是最开始的点的坐标，然后lineTo()里面就是途经的位置的坐标。
然后举个画圆的例子：
cxt.beginPath();
cxt.arc(x,y,半径，圆开始的位置，圆结束的位置)
cxt.arc(70,18,15,0,Math.PI*2，true);
cxt.closePath();
画圆的话，前面两个是圆心的坐标，然后是圆的半径，然后是圆的开始位置和结束位置，还是蛮简单的。
最后介绍一下怎么把图像放到canvas上面：
var img=new Image()
img.src=“flower.png”
cxt.drawImage(img,0,0);
这个是放一张图片到canvas上面，挺简单的，new一个新的图片，再给一个路径就可以了。但是如果我们想要放很多个图片到canvas中就要注意了，因为放到canvas的图片有加载顺序，所以我们可以设置一个progress。把他的总值设置为100，然后给每张图片一个这个值，让所有图片的progress的值得总和加起来为100就可以了。

标签：canvas,cxt,路径,H5,矩形,绘制,图片
来源： https://blog.csdn.net/jh1906338271/article/details/100674058