js系列教程10-canvas绘图全解

全栈工程师开发手册 （作者：栾鹏）

快捷链接：
js系列教程1-数组操作全解
js系列教程2-对象和属性全解
js系列教程3-字符串和正则全解
js系列教程4-函数与参数全解
js系列教程5-容器和算法全解
js系列教程6-BOM操作全解
js系列教程7-DOM操作全解
js系列教程8-事件全解
js系列教程9-表单元素全解
js系列教程10-canvas绘图全解
js系列教程11-json、ajax、comet全解
js系列教程12-离线应用与存储全解
js系列教程13-原型、原型链、作用链、闭包全解

一、Canvas是什么？

Canvas就是一个画布，可以进行画任何的线、图形、填充等一系列的操作，而且操作的画图的就是js，所以让js编程到了嗑药的地步。另外Canvas不仅仅提供简单的二维矢量绘图，也提供了三维的绘图，以及图片处理等一系列的api支持。

二、Canvas重要的Context对象

(1) 要使用Canvas来绘制图形必须在页面中添加Canvas的标签。

例如： <canvas id="demoCanvas" width="500" height="500"></canvas>

(2) 当然只有上面的标签，只能是创建好了一个画布，其中width和height属性就是设置画布的大小。Id属性也是必须的，后面要用Id来拿到当前的Canvas的Dom对象。通过此Canvas的Dom对象就可以获取他的上下文了，Canvas绘制图形都是靠着Canvas对象的上下文对象。

代码：

<script type="text/javascript">//第一步：获取canvas元素var canvasDom = document.getElementById("demoCanvas");//第二步：获取上下文if(canvasDom .getContext){      //判断浏览器是否支持canvas    //context是画布，getContext获取绘图上下文对象，也有名为WebGL的3d上下文    var context = canvasDom .getContext("2d");        }</script>

(3) Context上下文默认两种绘制方式：第一种：绘制线（stroke），第二种：填充：fill。

注意：决定了使用哪种方式之后，在填充或者绘制线之前先设置样式。

绘制矩形

context.fillStyle = "#0000ff";   //填充颜色context.fillRect(10,10,70,70);   //填充矩形，xy宽高(像素)context.lineWidth = 20;          //边框宽度context.lineCap = "round";       //线条末端形状，butt平头，round圆头，square方头，context.lineJoin = "round";      //线条交叉方式，round圆交，bevel斜交，miter斜接context.strokeStyle = "red";     //描边颜色context.strokeRect(50,50,50,50); //描边矩形context.clearRect(50,50,20,20);  //清除一块矩形区域

绘制路径

context.beginPath();                      //创建路径context.arc(200,100,20,0,2*Math.PI,false);//绘制圆参数：圆心坐标，半径，起始角度，是否顺时针。 //arcTo绘制圆弧context.moveTo(200,100);                  //移动绘图游标context.lineTo(200,15);                   //绘制直线，从游标位置惠子直线到参数，//bezierCurveTo绘制曲线，quadraticCurveTo绘制二次曲线，reac绘制矩形，context.fillStyle = "rgba(0,0,0,1)"context.stroke();                         //用strokeStyle描边context.fill();                           //用fillStyle填充

绘制文本

context.font = "bold 14px Arial";   //设置文本样式，大小，字体context.textAlign="center";         //文本对齐方式，start、endcontext.textBaseline = "middle";    //上下对齐方式，top、middle、bottomcontext.fillText("文本",200,15);     //fillText使用fillStyle，strokeText使用strokeStylecontext.globalAlpha =0.5;           //设置全局透明度//context.save();                   //保存当前状态context.translate(10,10);           //坐标平移，//transform矩阵变换，setTransform先恢复默认再矩阵变换context.rotate(1);                  //旋转角度，scale缩放比例，

渐变

createLinearGradient线性渐变、createRadialGradient辐射渐变

渐变线

context.moveTo(0,0);context.lineTo(400,300);var gnt1 = context.createLinearGradient(0,0,400,300);//线性渐变的起止坐标gnt1.addColorStop(0,'red');               //创建渐变的开始颜色，0表示偏移量gnt1.addColorStop(1,'yellow');            //创建渐变的结束颜色，1表示偏移量，一个渐变中可以写任意个渐变颜色context.lineWidth=3;context.strokeStyle = gnt1;context.stroke();

渐变矩形

 var gnt1 = context.createLinearGradient(10,0,390,0); gnt1.addColorStop(0,'red');    //开始处颜色 gnt1.addColorStop(0.5,'green');//中间处颜色 gnt1.addColorStop(1,'blue');   //结尾处颜色 context.fillStyle = gnt1; context.fillRect(10,10,380,280);

渐变圆

var gnt = context.createRadialGradient(200,300,50,200,200,200);gnt.addColorStop(1,'red');gnt.addColorStop(0,'green');context.fillStyle = gnt;context.fillRect(0,0,800,600);

这里需要说明的是createRadialGradient方法，参数有（Xstart,Ystart,radiusStart,XEnd,YEnd,radiusEnd），也就是说，它在实行渐变时，使用了两个圆，一个是原始的圆，一个是渐变式圆，其实，这种通过坐标与半径控制的方式可以实现很多样式，

drawImage绘制图像

var imageDom=document.getElementById("image"); context.drawImage(imageDom,10,10,20,20);   //起点为(10,10)，图像大小会变成20x20像素； 

shadowColor、shadowOffsetX、shadowOffsetY、shadowBlur阴影

context.shadowColor="rgba(0,0,0,0.5)" //设置阴影颜色 context.shadowOffsetX=5; //设置形状或路径x轴方向的阴影偏移量，默认值为0； context.shadowOffsetY=5; //设置形状或路径y轴方向的阴影偏移量，默认值为0； context.shadowBlur=4;    //设置模糊的像素数，默认值为0，即不模糊。 //绘制半透明的蓝色矩形 context.fillStyle="rgba(0,0,255,1)"; context.fillRect(30,30,50,50); 

createPattern填充描边模式

var imageDom=document.images[0]; pattern=context.createPattern(imageDom,"repeat"); //repeat    默认。该模式在水平和垂直方向重复。//repeat-x  该模式只在水平方向重复。//repeat-y  该模式只在垂直方向重复。//no-repeat 该模式只显示一次（不重复）。context.fillStyle=pattern; context.fillRect(10,10,150,150); 

scale、translate、rotate图像变换

//缩放图像 //scale(scaleX,scaleY):缩放图像，在x方向乘以scaleX，在y方向乘以scaleY。 //scaleX和scaleY的默认值都是1.0 context.scale(0.8,0.8); //变换原点 //translate(x,y):将坐标原点移动到（x,y）。执行这个变换后，坐标(0,0)会变成之前由(x,y)表示的点 context.translate(100,100); //旋转//rotate(angle):围绕原点旋转图像angle弧度context.rotate(1); 

toDataURL将canvas转化为图片数据

var imgurl = canvasDom.toDataURL("image/png");var image = document.createElement("img");image.src = imgurl;hintdiv1.appendChild(image);