重点内容由于项目中很少涉及canvas相关的知识，我就一直拖着没练习，最近面试了几家公司都问到了对canvas的了解，是时候好好研究一下canvas了，以下是我阅读HTML5和CSS3权威指南这本书关于canvas的总结

一. canvas一般用来干啥

我当时对canvas的抵触点就在于，这不就是个用来画图的吗，能干啥呢，老听别人说他很强大，自己没啥感觉，直到前几天自己动手写了canvas画图小程序，那成就感满满的，总算对canvas有了一点认识我们能用canvas做什么

---

二.canvas有哪些功能

1.绘制图形 2.使用路径绘图 3.使用图像 4.绘制文字

---

三.使用canvas的步骤

3.1绘制矩形的步骤如下

1.取得canvas元素var canvas = document.getElementById('canvas'); 2.取得上下文var context = canvas.getContext('2d'); 3.设定绘图样式（fillStyle和strokeStyle） 4.指定线宽（lineWidth） 5.填充与绘制边框（两种方式fill和stroke）

var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); context.fillRect(0, 0, 20, 20); context.fillStyle = 'rgba(255,255,0,0.25)'; context.fill(); context.fillStyle = 'red'; context.strokeStyle = 'blue'; context.linewidth = 5; context.fillRect(10, 10, 20,20) context.strokeRect(10, 10, 20,20)

3.2使用路径步骤（首先使用路径勾勒轮廓，然后设置颜色进行绘制）

1.取得canvas元素var canvas = document.getElementById('canvas'); 2.取得上下文`var context = canvas.getContext(‘2d’); 3.开始创建路径 4.创建图形的路径 5.路径创建完毕后，关闭路径（若没有关闭下次会重绘上次路径） 6.设定绘制样式，调用绘制方法绘制路径（样式也可提前设置）

var n=0; for (var i=0; i<10; i++) { context.beginPath(); context.arc(i*25, i*25, i*10, 0, Math.PI*2, true) context.closePath(); context.fillStyle = 'rgba(255,0,0,0.25)'; context.fill(); }

moveTo与lineTo

var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); context.beginPath(); context.fillStyle = 'rgb(255,255,100)'; context.strokeStyle = 'rgb(100,0,100)'; var n = 0; var dx = 80; var dy = 80; var s = 70; context.beginPath(); context.fillStyle = 'rgb(255,255,100)'; context.strokeStyle = 'rgb(0,0,100)'; var x = Math.sin(0); var y = Math.cos(0); var dig = Math.PI / 15 * 11; for (var i = 0; i < 30;i++){ var x= Math.sin(i*dig); var y= Math.cos(i*dig); context.lineTo(dx + x * s, dy + y * s) } context.closePath(); context.fill(); context.stroke();

3.3绘制图像的步骤

1.取得canvas元素var canvas = document.getElementById('canvas'); 2.取得上下文var context = canvas.getContext('2d'); 3.创建Image对象 image = new Image(); 4.设置Image对象的src属性image.src = 'img/cui.png'; 5.使用drawImg方法绘制图像（若图片较大最好在image.onload事件中同步执行绘制图像）

var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); image = new Image(); image.src = 'img/cui.png'; image.onload = function () { drawImg(context,image) } function drawImg(context,image){ for (var i=0; i<7; i++){ context.drawImage(image,0+i*50,0+i*25,100,100); } }

3.4绘制文字的步骤

1.取得canvas元素var canvas = document.getElementById('canvas'); 2.取得上下文var context = canvas.getContext('2d'); 3.设置字体样式 4.绘制字体（fillText和strokeText）

/*绘制文字*/ var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); context.fillStyle='#00f'; context.font = 'italic 30px sans-serif'; context.textBaseline = 'top'; //填充字符串 context.fillText('王翠',0,0); context.font = 'bold 30px sans-serif' context.strokeText('王翠',0,50) context.font = 'italic 20px sans-serif' var txt = '字符串的宽度为：'; // 获取文字宽度 var tml = context.measureText(txt); context.fillText(txt,0,100); context.fillText(tml.width,tml.width+10,100);

---

四.canvas高级绘图知识

4.1绘制线性渐变

在绘制基本图形的基础上使用图形上下文的createLinearGradient方法可绘制线性渐变的起始坐标，通过addColorStop设置渐变颜色

var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); var g1 = context.createLinearGradient(0,0,0,300) g1.addColorStop(0, 'rgb(255,255,0)'); g1.addColorStop(1, 'rgb(0,255,0)'); context.fillStyle = g1; context.fillRect(0,0,400,300); var n=0; var g2 = context.createLinearGradient(0,0,300,0) g2.addColorStop(0, 'rgb(0,255,0)'); g2.addColorStop(1, 'rgb(0,0,255)'); for (var i = 0; i < 10;i++){ context.beginPath(); context.fillStyle = g2; context.arc(i*25, i*25, i*10, 0, Math.PI*2, true) context.closePath(); context.fill(); }

4.2绘制径向渐变

和绘制线性渐变类似在绘制基本图形的基础上使用图形上下文的createRadialGradient方法可绘制线性渐变的起始坐标，通过addColorStop设置渐变颜色

4.3绘制变形图形

与css3的变形有些类似，canvas的坐标变换有三种方式 1.平移context.translate(200,50); 2.扩大context.scale(0.95,0.95); 3.旋转context.rotate(Math.PI / 10);

var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); context.fillStyle = '#eeeeff'; context.fillRect(0, 0, 400, 300); context.translate(150,20); context.fillStyle = 'rgba(255,0,0,0.25)'; for (var i=0;i<50; i++){ context.translate(15,15) context.scale(0.95,0.95); context.rotate(Math.PI / 10); context.fillRect(50, 50, 100,100) }

4.4图形组合

在canvas中可以使用globalCompositeOperation决定图形组合的方式

var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); var oprtns = ['source-atop','source-in','source-out','source-over','destination-atop','destination-in', 'destination-out','destination-over','lighter','copy','xor']; var i=8;//可自行修改更换组合方式 // 绘制原有图形（蓝色长方形） context.fillStyle = 'blue' context.fillRect(10,10,60,60) context.globalCompositeOperation = oprtns[i]; // 绘制新图形（红色圆形） context.beginPath(); context.fillStyle = 'red'; context.arc(60,60,30,0,Math.PI*2,false); context.fill();

4.5给图形绘制阴影

在canvas中可以给图形添加阴影效果，只需要利用以下几个属性 1.shadowOffsetX（阴影的横向位移量） 2.shadowOffsetY（阴影的纵向位移量） 3.shadowColor（阴影的颜色） 4.shadowBlur（阴影的模糊范围）

var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); context.fillStyle = '#eeeeff'; context.fillRect(0, 0, 400, 300); context.shadowOffsetX = 10; context.shadowOffsetY = 10; context.shadowColor = 'rgba(100,100,100,0.5)'; context.shadowBlur = 7.5; for (var i=0;i<3; i++){ context.translate(50,50) create5Star(context); context.fill(); } // 绘制5角星 function create5Star(context){ var n = 0; var dx = 100; var dy = 0; var s = 50; context.beginPath(); context.fillStyle = 'rgba(255,0,0,0.5)'; var x = Math.sin(0); var y = Math.cos(0); var dig = Math.PI / 5 * 4; context.moveTo(dx,dy); for (var i = 0; i <= 5;i++){ var x= Math.sin(i*dig); var y= Math.cos(i*dig); context.lineTo( dx + x * s,dy + y * s); } context.closePath(); }

4.6图像剪裁

若你只想保留图像的一部分，可以使用不带参数的clip()方法实现

/*绘制图像*/ context.fillStyle = '#eeeeff'; context.fillRect(0, 0, 400, 300); image = new Image(); image.src = 'img/cui.png'; image.onload = function () drawImg_cut(context,image) } // 图像剪裁 function drawImg_cut(context,image){ create5Star_edit(context); context.drawImage(image,-50,-150,300,300); } // 绘制5角星 function create5Star_edit(context){ var n = 0; var dx = 70; var dy = 20; var s = 80; context.beginPath(); context.translate(100,50) context.fillStyle = 'rgba(255,0,0,0.5)'; var x = Math.sin(0); var y = Math.cos(0); var dig = Math.PI / 5 * 4; context.moveTo(dx,dy); for (var i = 0; i <= 5;i++){ var x= Math.sin(i*dig); var y= Math.cos(i*dig); context.lineTo( dx + x * s,dy + y * s); } context.clip();（！！！！重点） }

4.7像素处理

使用图形上下文的getImageData来获取图像中的像素

context.fillStyle = '#eeeeff'; context.fillRect(0, 0, 400, 300); image = new Image(); image.src = 'img/cui.png'; image.onload = function () { drawImg_px(context,image) } // 像素处理(在chrome下会报错，在firefox下运行正常) function drawImg_px(context,image){ context.drawImage(image,0,0,200,200); //会有跨域问题 var imagedata = context.getImageData(0,0,image.width,image.height); for (var i=0,n=imagedata.data.length;i<n;i+=4){ imagedata.data[i+0] = 255- imagedata.data[i+0]; imagedata.data[i+1] = 255- imagedata.data[i+1]; imagedata.data[i+2] = 255- imagedata.data[i+2]; }; context.putImageData(imagedata,0,0) }

4.8保存文件

在画布中绘制完成一幅图形后可以使用canvas.toDataURL(type)保存该图形，可以参看我的canvas画图小程序有保存图图像的功能

4.9简单的动画制作

在canvas中制作动画实际就是一个不断擦除，重绘的过程，具体步骤如下 1.预先编写好绘图的函数，在该函数中先用clearRect方法将画布整体或局部擦除。 2.使用setInterval方法设置动画的间隔时间。