创建canvas

您的浏览器不支持canvas

基础设置

var canvas = document.getElementById('myCanvas');var ctx = canvas.getContext('2d');

canvas.width=100;

canvas.height=100;

画直线

moveTo(x1, y1)

lineTo(x2, y2)

ctx.moveTo(0, 0);

ctx.lineTo(100, 100);

ctx.stroke();

画圆形

ctx.arc(x,y,radius,0,2*Math.PI,true)

ctx.beginPath();

ctx.arc(300,300,50,0,2*Math.PI,true);

ctx.strokeStyle= '#000';

ctx.stroke();

画矩形

ctx.strokeRect(x1, y1,x2, y2)

ctx.strokeRect(300,100,200,100);

beginPath()开始一条新路径

closePath()使当前路径闭合

不是成对出现的

ctx.beginPath();

ctx.moveTo(300, 0);

ctx.lineTo(200, 100);

ctx.lineTo(200, 200);

ctx.closePath();

ctx.strokeStyle= '#0F0';

ctx.stroke();

设置样式

ctx.moveTo(0,0);

ctx.lineTo(100,100);

ctx.lineTo(100,200);

ctx.closePath();//lineWidth 设置描边的线宽

ctx.lineWidth = 10;//strokeStyle 设置描边样式

ctx.strokeStyle = "#F00";

ctx.stroke();//fillStyle 设置填充样式

ctx.fillStyle = "rgba(0,255,0,0.5)";

ctx.fill();

绘制矩形与样式同步

ctx.strokeRect(100,200,100,100);

ctx.fillRect(100,200,100,100);

保存和恢复上下文环境，一般成对出现

save 保存当前绘画环境，包括变换和样式

restore 恢复当前绘画环境，包括变换和样式

ctx.save();

ctx.restore();

图形变换

//translate 平移变换

ctx.translate(0,100);

ctx.beginPath();

ctx.moveTo(0,0);

ctx.lineTo(100,100);

ctx.stroke();//rotate 旋转变换

ctx.rotate(Math.PI/4);

ctx.beginPath();

ctx.moveTo(0,0);

ctx.lineTo(100,100);

ctx.lineWidth= 5;

ctx.strokeStyle= "#F00";

ctx.stroke();//scale 缩放变换

ctx.scale(1,0.5);

ctx.fillRect(0,-100,100,100);

线性渐变

var linearGradient = ctx.createLinearGradient(0, 0, 200, 0);//给渐变添加颜色

linearGradient.addColorStop(0, 'rgb(255,0,0)');

linearGradient.addColorStop(0.3, 'rgb(0,255,0)');

linearGradient.addColorStop(1, 'rgb(0,0,255)');//设置渐变作为样式

ctx.fillStyle =linearGradient;

ctx.fillRect(0, 0, 200, 200);

径向渐变

var radialGradient = ctx.createRadialGradient(400, 50, 0, 400, 150, 100);

radialGradient.addColorStop(0, 'rgb(255,255,0)');

radialGradient.addColorStop(1, 'rgb(0,0,0)');

ctx.fillStyle=radialGradient;

ctx.beginPath();

ctx.arc(400, 150, 100, 0, Math.PI * 2, true);

ctx.fill();

文字

字体若设置了居中，圆心会在文字的中间位置，所以圆心还是要根据画布大小和文字的宽度进行设置。

var str = "hello world";//设置文本样式，比如大小，字体

ctx.font = "50px sans-serif";//水平对其设置，left center right

ctx.textAlign = "center";//垂直对齐设置，top middle bottom

ctx.textBaseline = "top";//填充文本

ctx.fillText(str,300,0);//描边文本

ctx.strokeText(str,0,200);//获取文本宽度

var width =ctx.measureText(str).width;

console.log(width);

图片

ctx.fillRect(0, 0, canvas.width, canvas.height);var img = newImage();

img.src= "logo.png";//一定要在图像加载完成后的回调中绘制图像

img.onload = function() {//在(0,0)点处绘制img图像

//ctx.drawImage(img, 0, 0);

//在(0,0)点处绘制img图像，缩放成256*80

//ctx.drawImage(img, 0, 0, 256, 80);

//获取img图像的(0,0)点处的40*40区域，绘制在(100,100)点处，缩放成80*80

ctx.drawImage(img, 0, 0, 40, 40, 100, 100, 80, 80);

}

创建图像画刷ctx.createPattern(image, type)

ctx.fillRect(0, 0, canvas.width, canvas.height);var img = newImage();

img.src= "logo.png";

img.οnlοad= function() {//创建图像画刷，no-repeat,repeat-x,repeat-y,repeat

var pattern = ctx.createPattern(img, "repeat");

ctx.fillStyle=pattern;

ctx.fillRect(0, 0, canvas.width, canvas.height);

}

阴影绘制

//阴影的X偏移

ctx.shadowOffsetX = 10;//阴影的Y偏移

ctx.shadowOffsetY = 10;//阴影的颜色

ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';//阴影的模糊度

ctx.shadowBlur = 10;

ctx.fillStyle= 'rgba(255, 0, 0, 0.5)';

ctx.fillRect(100, 100, 100, 100);

ctx.font= "50px sans-serif";

ctx.fillText("我是小可爱",200,100);

区域剪辑

//保存当前环境

ctx.save();

ctx.arc(300, 100, 200, 0, Math.PI*2, true);//进行区域剪辑

ctx.clip();

ctx.fillStyle= "#F00";

ctx.fillRect(100, 100, 200, 200);//恢复环境，释放了剪辑区域的作用

ctx.restore();

绘制曲线ctx.arc(x, y, startAngle, endAngle ,Math.PI*2, true)

最后一个参数代表是否是逆时针方向

//绘制圆弧

ctx.arc(100, 100, 50, 0 ,Math.PI*2, true);

ctx.fill();//二次样条曲线ctx.quadraticCurveTo(qcpx,qcpy,qx,qy)

ctx.beginPath();

ctx.moveTo(100,355);

ctx.quadraticCurveTo(265,145,380,349);

ctx.fill();//贝塞尔曲线ctx.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)

ctx.beginPath();

ctx.moveTo(175,375);

ctx.bezierCurveTo(297,182,468,252,517,380);

ctx.fill();

canvas绘制曲线生成工具

两次贝塞尔曲线：

http://blogs.sitepointstatic.com/examples/tech/canvas-curves/quadratic-curve.html

三次贝塞尔曲线：

http://blogs.sitepointstatic.com/examples/tech/canvas-curves/bezier-curve.html

动画

ctx.clearRect(x, y, width, height) 清除区域，用于重新绘制

var canvas = document.getElementById('myCanvas');var ctx = canvas.getContext('2d');var posx = 0, posy = 0, dir = 1, isMouseInRect = false;//确定动画范围

canvas.onmousemove = function(e){var mouseX =e.offsetX;var mouseY =e.offsetY;if(mouseX > posx && mouseY posy && mouseY < posy+ 50){

isMouseInRect= true;

}else{

isMouseInRect= false;

}

}//开始动画

setInterval(function() {if(!isMouseInRect){

posx+= 10 *dir;

}//clearRect清空画布的一个矩形区域

ctx.clearRect(0, 0, canvas.width, canvas.height);

ctx.fillRect(posx, posy,50, 50);if(posx + 50 >=canvas.width){

dir= -1;

}else if(posx <= 0){

dir= 1;

}

},100);

离屏技术

把canvas(sx,sy)处宽sw，高sy的区域，绘制到(dx,dy)处，并缩放为宽dx，高dh

ctx.drawImage(canvas,sx,sy,sw,sh,dx,dy,dw,dh)

canvas

canvas{border:1px solid red;

}#offCanvas{display:none;

}

您的浏览器不支持canvas

您的浏览器不支持canvas

varcanvas=document.getElementById('myCanvas');varctx=canvas.getContext('2d');varoffCanvas=document.getElementById('offCanvas');varoffCtx=offCanvas.getContext('2d');varposx= 0, posy= 0, dir= 1, isMouseInRect= false;//把一些复杂的绘画操作，画在离屏Canvas上面

vardrawALot= function(){for(vark=0; k<20; k++){for(vari=0;i

offCtx.beginPath();

offCtx.arc(i,j,5,0,2*Math.PI,true);

offCtx.stroke();

}

}

}

}

canvas.οnmοusemοve= function(e){varmouseX=e.offsetX;varmouseY=e.offsetY;if(mouseX>posx&&mouseYposy&&mouseY

isMouseInRect= true;

}else{

isMouseInRect= false;

}

}

setInterval(function() {if(!isMouseInRect){

posx+= 10 *dir;

}//clearRect清空画布的一个矩形区域

ctx.clearRect(0,0, canvas.width, canvas.height);//drawALot();

//真正要用到复杂的绘画的时候，直接从离屏Canvas上拷贝过来

ctx.drawImage(offCanvas,0,0,offCanvas.width, offCanvas.height,0,0, canvas.width, canvas.height);

ctx.fillRect(posx, posy,50,50);if(posx+ 50 >=canvas.width){

dir= -1;

}else if(posx<= 0){

dir= 1;

}

},100);

drawALot();