<canvas id="canvas" width="1000" height="1000"></canvas>
一、取得canvas元素
var canvas=document.getElementById("canvas");
二、获取上下文
var canvas_context=canvas.getContext('2d');
三设置填充样式
canvas_context.fillStyle="#ee22ff";
四、设置绘制样式
canvas_context.strokeStyle="blue";
五、指定线宽
canvas_context.lineWidth=2;
六、矩形：strokeRect(x,y,width,height),fillRect(x,y,width,height),clearRect(x,y,width,height)
canvas_context.strokeRect(50,30,100,300);//绘制矩形边框 canvas_context.fillRect(50,30,100,300);//矩形填充 canvas_context.clearRect(50,30,50,30);//矩形擦除
七、路径
7.1 开始路径：beginPath()
7.2 创建路径
7.2.1 绘制圆形：arc(开始x坐标,开始y坐标,半径radius,开始角度startAngle,结束角度endAngle,是否逆时针anticlockwise)
7.2.2 绘制直线：moveTo(x,y)将光标移动到指定的坐标, lineTo(x,y)：指定直线的终点
7.2.3 绘制贝济埃曲线：bezierCurveTo(控制点1的横坐标，控制点1的纵坐标，控制点2的横坐标，控制点2的纵坐标，终点x，终点y)
7.2.4 绘制二次样条曲线：quadraticCurveTo(控制点横坐标，控制点纵坐标，终点横坐标，终点纵坐标)
var canvas=document.getElementById("canvas"); var canvas_context=canvas.getContext('2d'); canvas_context.fillStyle="#ee22ff"; canvas_context.strokeStyle="blue"; canvas_context.lineWidth=2; //绘制圆形 canvas_context.beginPath();//开始路径 canvas_context.arc(100,100,30,Math.PI,Math.PI*2,true);//开始坐标，半径，开始角度，结束角度，是否逆时针 canvas_context.fill();//填充绘制好的圆形 canvas_context.closePath();//关闭路径 canvas_context.stroke(); //绘制直线 canvas_context.beginPath();//开始路径 canvas_context.lineTo(20,30);//可以利用moveTo(x,y)将光标移动到起点，也可利用lineTo canvas_context.lineTo(100,100); canvas_context.closePath(); canvas_context.stroke();//开始绘制 //绘制贝济埃曲线 canvas_context.beginPath(); canvas_context.bezierCurveTo(100,100,300,900,200,200); canvas_context.closePath();//关闭路径 canvas_context.stroke(); //。。。。。 canvas_context.beginPath(); canvas_context.quadraticCurveTo(25,25,25,62.5); canvas_context.quadraticCurveTo(25,100,50,100); canvas_context.quadraticCurveTo(50,120,30,125); canvas_context.quadraticCurveTo(60,120,65,100); canvas_context.quadraticCurveTo(125,100,125,62.5); canvas_context.quadraticCurveTo(125,25,75,25); canvas_context.closePath();//关闭路径 canvas_context.stroke();
八、绘制渐变
8.1 绘制线性渐变
8.1.1创建线性渐变对象：createLinearGradient(起点横坐标，起点纵坐标，终点横坐标，终点纵坐标)
8.1.2 追加颜色：addColorStop(设定的颜色离起点的偏移量0-1，颜色)
8.2 绘制径向渐变：沿着圆形的半径方向向外进行扩散的渐变方式
8.2.1 创建径向渐变对象：createRadialGradient(起点横坐标，起点纵坐标，开始圆的半径，终点横坐标，终点纵坐标，终点圆的半径)
8.2.2 追加颜色：addColorStop(设定的颜色离起点的偏移量0-1，颜色)
//线性渐变 var g=canvas_context.createLinearGradient(0,0,300,0); g.addColorStop(0,'rgb(255, 0, 0)'); g.addColorStop(0.2,'rgb( 255, 165, 0)'); g.addColorStop(0.4,'rgb(255, 255, 0)'); g.addColorStop(0.5,'rgb(0, 255, 0)'); g.addColorStop(0.7,'rgb(0, 127, 255 )'); g.addColorStop(0.8,'rgb(0, 0, 255)'); g.addColorStop(1,'rgb(139, 0, 255)'); canvas_context.fillStyle=g; canvas_context.fillRect(0,0,600,200); //绘制径向渐变 var g=canvas_context.createRadialGradient(200,0,0,400,0,400); g.addColorStop(0,'rgb(255, 0, 0)'); g.addColorStop(0.2,'rgb( 255, 165, 0)'); g.addColorStop(0.4,'rgb(255, 255, 0)'); g.addColorStop(0.5,'rgb(0, 255, 0)'); g.addColorStop(0.7,'rgb(0, 127, 255 )'); g.addColorStop(0.8,'rgb(0, 0, 255)'); g.addColorStop(1,'rgb(139, 0, 255)'); canvas_context.fillStyle=g; canvas_context.fillRect(0,0,600,200);
九、图形组合：globalCompositeOperation
var canvas=document.getElementById("canvas"); var canvas_context=canvas.getContext('2d'); //绘制矩形 canvas_context.fillStyle="blue"; canvas_context.fillRect(10,10,50,50); //设置图形组合类型 canvas_context.globalCompositeOperation=类型; //绘制圆 canvas_context.beginPath();//开始路径 canvas_context.fillStyle="red"; canvas_context.arc(60,60,30,0,Math.PI*2,true);//开始坐标，半径，开始角度，结束角度，是否逆时针 canvas_context.closePath();//关闭路径 canvas_context.fill();//填充绘制好的圆形
| 类型 | 解析 | 图片 |
| source-over | 默认值，新图形覆盖原有图形 |  |
| destination-over | 在原有图形下绘制新图形，原有图形是destination， |  |
| source-in | 新图形和原有图形做in运算，只显示新图形与原有图形重叠的部分， |  |
| destination-in | 新图形和原有图形做in运算，只显示原有图形与新图形重叠的部分， |  |
| source-out | 原有图形与新图形做out运算，只显示新图形与原有图形不重叠的部分 |  |
| destination-out | 原有图形与新图形做out运算，只显示新图形与原有图形不重叠的部分 |  |
| source-atop | 只绘制原有图形以及原有图形与新图形重叠的地方 |  |
| destination-atop | 只绘制新图形以及原有图形与新图形重叠的地方 |  |
| lighter | 新图形和原有图形都绘制，重叠部分加色处理 |  |
| xor | 只绘制不重叠的部分，重叠部分为透明 |  |
| copy | 只绘制新图形，原有图形未与新图形重叠的部分变透明 |  |
十、阴影
只需要利用图形上下文对象的几个关于阴影的属性即可，与路径无关
9.1 shadowOffsetX:阴影的横向位移量
9.2 shadowOffsetY：阴影的纵向位移量
9.3 shadowColor：阴影的颜色
9.4 shadowBlur：阴影模糊的范围0-10
var canvas=document.getElementById("canvas"); var canvas_context=canvas.getContext('2d'); //定义阴影的四个属性 canvas_context.shadowOffsetX=10;//图形向x方向移动多少 canvas_context.shadowOffsetY=10;//图形向y方向移动多少 canvas_context.shadowColor="red";//阴影的颜色 canvas_context.shadowBlur=10;//阴影的模糊范围 //绘制矩形 canvas_context.fillStyle="blue"; canvas_context.fillRect(10,10,50,50);
十、图像
10.1 绘制图像
10.1.1 drawImage(image,x,y)：参数x，y为绘制图像时，该图像在画布中的起始坐标
10.1.2 drawImage(image,x,y,w,h):可对原图像进行缩放
10.1.3 drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh):将画布中已经绘制好的图像的全部或者局部复制到画布的其他区域，并进行缩放
参数sx，sy是指已经绘制在画布上的图像起点的横纵坐标，sw，sh是指要复制的宽高，dx，dy是指目标图像的起点坐标，dw，dh是指目标图像的宽高，可以对原有图像进行缩放
var canvas=document.getElementById("canvas"); var canvas_context=canvas.getContext('2d'); //创建image对象 var image=new Image(); image.src="http://a.xnimg.cn/n/apps/profile/modules/huodong/2013rxlanqiu/v6-rxbg.jpg"; image.onload=function(){ //参数image是图像对象，参数2和参数3是开始绘制的图像的起点坐标 canvas_context.drawImage(image,10,20); //参数image是图像对象，参数2和参数3是开始绘制的图像的起点坐标，参数4,5是对原有图像进行缩放 canvas_context.drawImage(image,220,20,100,80); //参数image,sx,sy,sw,sh,dx,dy,dw,dh //原有图像的起始坐标与要复制的宽高，目标图像的起始坐标和宽高 canvas_context.drawImage(image,20,20,100,80,300,20,200,120); }
10.2 图像的平铺：按照一定比例将图像缩小后，将画布填满createPattern(image,type)，
其中参数type的取值有：no-repeat不平铺；repeat-x横向平铺；repeat-y纵向平铺；repeat全方向平铺
var canvas=document.getElementById("canvas"); var canvas_context=canvas.getContext('2d'); //创建image对象 var image=new Image(); image.src="http://a.xnimg.cn/n/apps/profile/modules/huodong/2013rxlanqiu/v6-rxbg.jpg"; image.onload=function(){ //参数image是图像对象，参数2和参数3是开始绘制的图像的起点坐标 var pattern=canvas_context.createPattern(image,'repeat'); canvas_context.fillStyle=pattern; canvas_context.fillRect(0,0,500,500); }
10.3 图像剪裁：在画布内绘制路径，只绘制该路径所包括区域内的图像，使用图形上下文对象的clip方法
var canvas=document.getElementById("canvas"); var canvas_context=canvas.getContext('2d'); canvas_context.strokeStyle="blue"; canvas_context.beginPath(); //贝济埃曲线的起点 canvas_context.moveTo(30,190); //参数第一个控制点的坐标，第二个控制点的坐标，终点的坐标 canvas_context.bezierCurveTo(180,90,480,290,630,190); canvas_context.bezierCurveTo(480,90,180,290,30,190); canvas_context.closePath();//关闭路径 canvas_context.clip();//使用图形上下文的clip方法进行剪裁，注意这里不需要使用stroke方法或fill方法 //创建image对象 var image=new Image(); image.src="http://i.static.renren.com/tpls_new/new/7873/header.jpg"; image.onload=function(){ //参数image是图像对象，参数2和参数3是开始绘制的图像的起点坐标 canvas_context.drawImage(image,30,40); }
10.4 像素处理
10.4.1 获取像素数据：
获取像素数据getImageData(sx,sy,sw,sh)返回一个CanvasPixelArray对象，具有height，width，data等属性，
其中data属性是一个保存像素的数组[r1,g1,b1,a1,r2,g2,b2,a2......]分别表示第一个像素的rgb值和透明度，data属性的length属性为所获取的像素的数量
10.4.2 利用putImageData(改变后的data数组imageData,重绘的起点坐标dx,dy,[只绘制这个范围内的图像，sx，sy，sw，sh])方法将改变像素后的图像重绘到画布上
var canvas=document.getElementById("canvas"); var canvas_context=canvas.getContext('2d'); //创建image对象 var image=new Image(); image.src="1.jpg"; image.onload=function(){ //参数image是图像对象，参数2和参数3是开始绘制的图像的起点坐标 canvas_context.drawImage(image,30,40); var image_data=canvas_context.getImageData(0,0,image.width,image.height); alert(123); for(var i=0,n=image_data.data.length;i<n;i+=4){ image_data.data[i+0]=255-image_data.data[i+0]; image_data.data[i+1]=255-image_data.data[i+1]; image_data.data[i+2]=255-image_data.data[i+2]; } canvas_context.putImageData(image_data,0,0); }
十一、文字
11.1 绘制文字strokeText(text,x,y,表示显示文字时的最大宽度，可防止文字溢出maxWidth)
11.2 填充文字fillText(text,x,y,maxWidth)
11.3 文字相关属性：设置字体font，设置文字水平对齐方式textAlign，设置文字垂直对齐方式textBaseLine
11.4 测定一行文字的宽度measureText(text)该方法返回一个TextMetrics对象，该对象的width属性即为text的宽度
canvas_context.font="normal 30px Time New Roman"; canvas_context.fillStyle="blue"; canvas_context.strokeStyle="purple"; canvas_context.textBaseline="top";//hanging,middle,alphabetic,ideographic,bottom canvas_context.textAlign="center";//start,end,left,right canvas_context.fillText("你好！",90,40); canvas_context.strokeText("你好！",90,40); alert(canvas_context.measureText("你好！").width);//只有width属性，没有height属性
十二、绘图状态的保存和恢复
12.1 sava保存当前绘画状态
12.2 restore从栈中取出之前保存的图形上下文的状态进行恢复
十三、保存文件：把挡圈的绘画状态输出到一个data URL地址所致向的数据中的过程，所谓的data URL是指目前大多数浏览器能够识别的一种base64位编码的URL，主要用于小型的、可以在网页中直接嵌入的，不需要从外部文件嵌入的数据
13.1 toDataURL("image/jpeg")
十四、动画
var color=["#C96","#C9F","#FCF","#063"]; var canvas_context; var width; var height; var j=0; function draw(id){ var canvas=document.getElementById(id); canvas_context=canvas.getContext('2d'); width=canvas.width; height=canvas.height; setInterval(rotate,10); } function rotate(){ canvas_context.clearRect(0,0,width,height); canvas_context.beginPath(); canvas_context.arc(300,300,j,0,Math.PI*2,false);//xy是指圆心 canvas_context.fillStyle=color[2]; canvas_context.fill(); j=j+1; }
