HTML 5 Canvas常用属性和方法

填充

fillStyle = "#ff0000"    //设置填充颜色为纯红
fillStyle = my_gradient  //设置填充渐变样式
fillRect(20,20,200,200)  //开始画

笔触（边框）

strokeStyle = "#ff0000"  //设置笔触颜色为纯红
strokeStyle = my_gradient;  //设置笔触渐变样式
strokeRect(20,20,200,20); //开始画矩形

阴影

shadowColor = "#ff0000"; //设置阴影颜色
shadowBlur = 20; //设置阴影模糊级别，默认为0
shadowOffsetX;  //设置阴影水平偏移
shadowOffsetY;  //设置阴影垂直偏移

渐变

createLinearGradient(20,20,20,200); //创建点(20,20)到点(200,20)的渐变
addColorStop(0.3,"#ff0000");addColorStop(0.8,"#ffffff");    规定渐变对象中的颜色和停止位置
createRadialGradient(); //创建径向渐变
createPattern(img,'repeat-x');  //在x轴上平铺img

线条样式

ctx.lineCap="round"; //圆角末端
ctx.lineJoin="round";   //圆角交替点
ctx.lineWidth=10; //线条的粗度为10像素

矩形

rect(); //创建矩形
stroke();   //开始画
strokeRect(20,20,200,20);   //一键画
arc();  //创建圆形
stroke();   //开始画
fillRect()  //绘制填充的矩形
clearRect() //在给定的矩形内清除指定的像素

路径

fill()  //填充，默认黑色，可以通过fillStyle设置颜色
stroke() //绘制已定义的路径，默认黑色，可以通过strokeStyle设置颜色
beginPath() //起始一条路径，或重置当前路径
moveTo()    //把路径移动到画布中的指定点，不创建线条
closePath() //创建从当前点回到起始点的路径
lineTo()    //添加一个新点，然后在画布中创建从该点到最后指定点的线条

转换

scale(2,0.5)  //长度变成原来的两倍，宽度变为原来的一半
rotate(30*Math.PI/180)  //围绕(0,0)顺时针旋转30度
ctx.translate(70,70);   //设置选择点为(70,70);

文本

ctx.font="40px Arial";  //设置填充的字体是Arial，字体大小40px
ctx.fillText("Hello World",10,50);  //在(10,50)处绘制"hello world"
ctx.textBaseline="top"; ctx.fillText("Top",5,100); //基线位于文本以上
ctx.textAlign="start";ctx.fillText("textAlign=start",150,60);   //基线位于文本开始之前
ctx.fillStyle=gradient;ctx.fillText("hello",10,90); //在(10,90)处画hello，并使用gradient渐变填充
ctx.strokeStyle=gradient;ctx.strokeText("jack",10,90);  //在(10,90)处画jack的轮廓，并使用gradient渐变

图像绘制

ctx.drawImage(img,10,10); //在(10,10)这个点绘制图像,图像的尺寸有资源决定
ctx.drawImage(ImgObj,0,0,50,50);  //在(0,0)处绘制图像，尺寸为50*50
ctx.drawImage(ImgObj,0,0,858,536,0,0,400,400);  把ImgObj从图片的(0,0)位置开始裁剪，裁剪858x536，然后放在canvas的(0,0)位置，以400x400显示

几点注意

1.加载图片要绑定图片的onload事件