JavaScript:canvas初使用

1.初始canvas

（1）canvas标签和audio、video一样，是h5新增的一个功能性的标签。

（2）canvas可以结合面向对象的编程思想，向网站中加入一些特效。（相当于一个画布）

（3）canvas标签中写入的HTML内容只有在游览器不支持canvas的时候才会显示，一般情况下，为了使网站建设更加完善，我们在canvas标签里，会写入一些视频、图片、当canvas标签不能正常显示的时候，canvas标签中的内容就会被代替canvas显示。

（4）可以使用canvas标签的style属性的width，height给canvas设置宽高，但是这种方式会造成canvas标签的拉伸。当我们获取一些坐标的时候获取到的是不正确的值，所以大多数情况都是使用canvas标签本身的width和height属性，直接为canvas标签设置宽高，这种设置方式 只设置数值，。不用带PX 像素单位。

（5）canvas默认宽高是300 * 150px

2.canvas基本操作

（1）canvas在 游览器中是没有dispaly属性的，我们可以根据编码需求来自主的为canvas标签设置dispaly属性。

（2）canvas画笔获取

（3）canvas画线

[1]使用canvas作画时，需要使用到坐标点，canvas画布的（0，0）点在canvas的左上角。

【画线】

ctx.beginPath()；开启一条新路径

ctx.moveTo();画线的开始坐标

ctx.lineTo();画线的下一个坐标

ctx.closePath；关闭路径，链接这条线的第一个点和最后一个点。

ctx.strokeStyle = 'red'; 设置画笔的颜色

ctx.lineWidth = 5; 设置画笔粗细

ctx.stroke();准备工作就绪，开始画线

（4）canvas画块

使用的是ctx.fillRect(x,y,width,height)；

x，y 为块左上角在canvas中的坐标。

width，height 为要绘制块的宽与高

在canvas中，绘制区域，使用到的是ctx.fill();

为绘制区域设置填充样式的是：ctx.fillStyle = 'color';

注意：该设置需要写在fillRect（）之前，否则将会不生效。

ctx.clearRect(x,y,width,height)；清除画布

（5）获取鼠标至canvas左上角的位置

（6）在canvas上绘制矩形

（7）canvas画圆

Math.PI = 180deg

1.绘制弧度：ctx.arc(ox,ox,r,startDeg,endDeg,boolean);

ox,oy 为要绘制弧度的原型角坐标。

r:为要绘制弧度的半径

startDeg:弧度开始的角度

startdeg:弧度结束的角度（是根据Math.PI计算出来的）

boolean:可选，false为顺时针，true为逆时针，决定弧度的旋转方向，默认值为false

【2】在画板上绘制圆

//计算半径

var r =Math.sqrt(Math.pow(endX - startX,2) Math.pow((endY-startY),2))/2;

（8）线性渐变

ctx.createLinearGradient(x1,y2,x2,y2);

x1，y2：线性渐变的开始点。

x2，y2：线性渐变的结束点

g.addCOlorStop('0.2',red);

在g这个渐变里，red从0.2（20%）的位置开始向两边渲染。

（9）径向渐变

ctx.createRadialGradIent(x1,y1,r1,x2,y2,r2);

x1，y1（起始圆的圆心位置）

r1：起始圆的半径

x2，y2：结束圆的圆心位置

r2：结束圆的半径

起始圆和结束圆分了此次径向渐变的区域，addColorStop添加的颜色，是添加在这个区域里的。

要使用径向渐变填充的区域，要填充的区域和径向渐变的区域位置必须保持关联，否则，使用不到径向渐变

（10）将canvas的左上角移动至画布的正中心

ctx.translate(x,y);

（11）圆形碰撞

【1】获取鼠标距离，判断检测，判断圆心距

（12）canvas图像处理

globalCompositeOperation 是canvas用户来操作图像叠加的属性

【】ctx.globalCompositeOperation = 'source-in';//canvas 用来操作图像叠加的属性 (新图与原图叠加的部分)

【】ctx.globalCompositeOperation = 'source-out';//canvas 用来操作图像叠加的属性 （新图没有和原图叠加的部分）

【】ctx.globalCompositeOperation = 'destination-in';//canvas 用来操作图像叠加的属性 (原图与新图叠加的部分)

【】ctx.globalCompositeOperation = 'destination-out';//canvas 用来操作图像叠加的属性 (原图未与新图重叠的部分)

【】ctx.globalCompositeOperation = 'lighter';//canvas 用来操作图像叠加的属性 (将两个图中重合的颜色做一个叠加处理)

【】ctx.globalCompositeOperation = 'copy';//canvas 用来操作图像叠加的属性 (新图将覆盖原图)

（13）canvas 图片处理

1.在canvas上异步加载会导致图片不能绘制，所以我们要将绘制过程放在图片本身的onload事件里。

ctx.drawImage(imgObj,x,y);

x，y 在canvas上绘制图片的坐标（canvas上图片的左上角）

ctx.drawImage(imgObj,x,y,width,height);

x，y 在canvas上绘制图片的坐标（canvas上图片的左上角）

width，height 图片在canvas上的宽高

ctx.drawImage(imgObj,原图开始裁剪位置x坐标，原图开始裁剪位置y坐标，原图裁剪的宽度，原图裁剪的高度，canvas上开始绘制位置的x坐标，canvas上开始绘制图片y坐标，canvas上图片宽度，canvas上图片高度)；

注意：canvas 绘制图片不会按照经过css样式修饰后的图片信息绘制，会按照图片原本的信息绘制。

//贝塞尔曲线

ctx.movTO (开始点)

ctx.bezierCurveTo(80,300,300,80,0,0);

80为第一个点x

300位第一个点Y

300为第二个点x

80位第二个点x

0.0 为结束点。

这篇好文章是转载于：学新通技术网