Canvas-基础教程

1.canvas基础

　　<canvas id="canvas" width="400" height="300" />

　　注意：canvas通过css来修改长宽的话会影响视觉效果，它只认width属性和height属性

　     

　　var canvas = document.getElementById("canvas");

　　var context = canvas.getContext('2d');

　　画图之前要先取图形上下文(context)

 

　　context.fillStyle = 'red'; // 填充样式

　　context.strokeStyle = 'blue'; // 边框样式

　　context.lineWidth = 1; // 线的宽度

　　设置绘图样式、线宽

 

2.绘制矩形

　　context.fillRect(x,y,width,height)

　　填充矩形

　　context.strokeRect(x,y,width,height)

　　绘制矩形

　　context.clearRect(x,y,width,height)

　　清除矩形

 

3.绘制圆形

　　context.beginPath()

　　创建路径

　　context.arc(x,y,raidus,startAngle,endAngle,anticlockwise)

　　startAngle - 起始角度 endAngle - 结束角度 anticlockwise - 是否顺时针绘制

　　context.closePath()

　　关闭路径

　　

　　图释：context.arc(0,0, 10, 0, Math.PI*3/2, false)

　　

 

4.绘制直线、曲线

　　context.moveTo(x,y)

　　将光标移动到点（x，y）

　　context.lineTo(x,y)

　　画直线到点(x,y),并且光标移动到当前位置

　　context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

　　绘制三次贝塞尔曲线 (cp1x, cp1y) - 第一个控制点坐标 (cp2x, cp2y) - 第二个控制点坐标 (x,y) - 终点坐标

　　context.quadraticCurveTo(cpx, cpy, x, y)

　　绘制二次贝塞尔曲线 (cpx, cpy)

 

5.线性渐变

　　var g = context.createLinearGradient(xStart, yStart, xEnd, yEnd)

　　创建线性渐变对象LinearGradient

　　g.addColorStop(offset, color)

　　增加渐变点, offset - 偏移量（0-1之间） color - 渐变的颜色值

　　context.fillStyle = g;

　　context.fill();

　　使用渐变样式来绘制

 

6.径向渐变

　　var g = context.createRadialGradient(xStart, yStart, radiusStart, xEnd, yEnd, radiusEnd)

　　创建径向渐变对象RadialGradient

　　

7.坐标变换

　　context.translate(x,y)

　　坐标轴平移

　　context.scale(x,y)

　　缩放

　　context.rotate(angle)

　　旋转

　　context.setTransform(m11, m12, m21, m22, dx, dy)

　　设置变换矩阵

　　变换矩阵对应关系:

　　setTransform(1, 0, 0, 1, x, y) || setTransform(0, 1, 1, 0, x, y) == translate(x,y)

　　setTransform(x, 0, 0, y, 0, 0) || setTransform(0, y, x, 0, 0, 0) == scale(x,y)

　　setTransform(Math.cos(rad), Math.sin(rad), -Math.sin(rad), Math.cos(rad), 0, 0) == ratate(angle)

　　

8.图形组合

　　context.globalCompostiteOperation = type

　　类型介绍：

　　source-over - 覆盖在原有图形之上(默认)

　　destination-over - 在原有图形之下绘制新图形

　　source-in - 只显示新图形中与原有图形重叠的部分

　　destination-in - 只显示原有图形中与新图形重叠的部分

　　source-out - 只显示新图形与原有图形不重叠的部分

　　destination-out - 只显示原有图形与新图形不重叠的部分

　　source-atop - 只显示原有图形和新图形中与原有图形重叠的部分

　　desintation-atop - 只显示新图形和原有图形中与新图形重叠的部分

　　lighter - 原有图形和新图形重叠的部分高亮

　　xor - 只显示新图形中与原有图形不重叠的部分，重叠的部分变透明

　　copy - 只绘制新图形，原有图形中未与新图形重叠的部分不显示

　　

　　

　　

 

9.绘制阴影

　　context.shadowOffsetX - 水平偏移

　　context.shadowOffsetY - 纵向偏移

　　context.shadowColor - 阴影颜色

　　context.shadowBlur - 阴影边缘模糊范围

 

10.使用图像

　　context.drawImage(image, x, y)

　　context.drawImage(image, x, y w, h)

　　context.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)

　　image - 可以是一个img元素、一个video元素或者一个js中的Image对象

　　第三种方法用于复制图像中某区域的内容到新的区域，可用于缩放（特写）

 

11.平铺图像

　　var pattern = context.createPattern(image, type)

　　context.fillStyle = pattern

　　type - （repeat, no-repeat, repeat-x, repeat-y）

　　

12.图像裁剪

　　创建好路径之后调用：

　　context.clip()

　　

13.像素处理

　　获取数据:

　　var imagedata = context.getImageData(sx, sy, sw, sh);

　　得到如下数组：

　　[r1,g1,b1,a1,r2,g2,b2,a2,r3……]

　　rn - 第n个像素点的红色值

　　gn - 第n个像素点的绿色值

　　bn - 第n个像素点的蓝色值

　　an - 第n个像素点的透明度

　　设置像素：

　　context.putImageData(imagedata, dx, dy)

 

14.绘制文字

　　绘制文字

　　context.fillText(text, x ,y, [maxWidth])

　　context.strokeText(text, x, y, [maxWidth])

　　文字属性：

　　context.font - 字体

　　context.textAlign - 水平对齐方式

　　context.textBaseline - 垂直对齐方式

　　计算文字宽度：

　　context.measureText(text)

　　

15.绘制状态的保存与恢复

　　context.save()

　　context.restore()

 

16.保存文件

　　canvas.toDataURL(type)

　　type - MIME类型