1 绘制文本
fillText(string,x,y,maxWidth) //填充试绘制文本
strokeText(string,x,y,maxWidth) 画线试绘制文本
设置字体样式：
context.font 文字的字体样式
可选属性：
font-style 字体样式
font-variant 字体变体
font-weight 字体粗细
font-size
font-family
caption
icon
menu
message-box
small-caption
status-bar
实例：
ctx.font = "30px Georgia"
context.textAlign 文字的对齐方式
start
end
center
left
right
context.textBaseline 调整文本的基线
top
hanging
middle
alphabetic
ideographic
bottom
2.ctx.globalCompositeOperation 设置图形交叉参数
source-atop
....
3.canvas状态的保存与恢复
ctx.save() 保存之前的绘图参数,压栈保存
ctx.restore() 恢复之前保存的绘图参数
4.阴影
ctx.shadowColor
ctx.shadowOffsetX 阴影对于图像的水平偏移
ctx.shadowOffsetY 阴影对于图像的垂直偏移
ctx.shadowBlur 模糊参数
5.绘制图像
var img = new Image();
img.src = "......." img.onload = function()
{
ctx.drawImage(img,x,y);
}
ctx.drawImage(img,x,y);
ctx.drawImage(img,x,y,width,height);
width:绘制图片的最终宽度
height:绘制图片的最终高度 ctx.drawImage(img,sx,sy,swidth,sheight,dx,dy,width,height);
sx:裁剪区域起始横坐标
sy:裁剪区域起始纵坐标
swidth：裁剪区域宽度
sheight：裁剪区域高度
6.drawImage可以用来绘制视频