Canvas 绘图学习笔记2

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可以用来绘制视频