canvas--总结二

canvas图形绘制

• 矩形绘制

rect(x,y,w,h)  没有独立路径

strokeRect(x,y,w,h) 有独立路径，不影响别的绘制

fillRect(x,y,w,h) 有独立路径，不影响别的绘制

clearRect(x,y,w,h)  须要擦除的矩形区域

 

• 圆弧绘制

弧度概念

一个圆的弧度等于2π

角度弧度转化   一角度等于π/180

绘制圆弧：arc(x,y,r,startAngle,endAngle,anticlockwise);

参数：

x   圆心横坐标

y   圆心纵坐标

r    半径

startAngle   开始角度

endAngle     结束角度

anticlockwise  是否逆时针方向绘制（默认false表示顺时针，true表示逆时针）注意：在使用逆时针时，看需求是否要改变开始和结束的角度

 

• 绘制文本

ctx.font=“微软雅黑”   设置字体

strokeText(text,x,y,maxWidth); /描边文字  fillText(text,x,y,maxWidth);/ 填充文字

    参数：

    text： 要绘制的文本

    x,y ：  文本绘制的坐标（文本左下角）

     maxWidth：   设置文本最大宽度，可选参数

ctx.textAngle  文本水平对齐方式，相对绘制坐标来讲（参数：left,center,right,start(默认),end）

ctx.direction 属性css(rtl,ltr)start和end相关

若是是ltr,start和left表现一致（ltr--从left到right）

若是是rtl,start和right表现一致（rtl--从right到left）

ctx.textBaseline 设置基线（垂直对齐方式）

top  文本的基线处于文本的正上方 而且有一段距离

middle  文本的基线处于文本的正中间

bottom  文本的基线处于文本的正下方，并有一段距离

hanging  文本的基线处于文本正上方，而且和文本粘合

alphabetic  默认值，基线处于文本的下方，而且穿过文字

ideographic和bottom类似，可是不同//

measureText()  获取文本宽度obj.width

 

作动画

• 绘制图片

drawImage();

三个参数时: drawImage(img,x,y);

• img   图片对象，canvas对象，video对象
• x,y    图片绘制的左上角   

五个参数时：drawImage(img,x,y,w,h);

• img   图片对象，canvas对象，video对象
• x,y    图片绘制的左上角  
• w,h   图片绘制尺寸设置（图片缩放，不是截取）

九个参数时：drawImage(img,x,y,w,h,x1,y1,w1,h1);

• img   图片对象，canvas对象，video对象
• x,y    图片绘制的左上角  
• w,h   图片绘制尺寸设置（图片缩放，不是截取）
• x1,y1,w1,h1  画布中的一个矩形区域

• 坐标变换

平移  移动画布的圆点

translate（x.y）;  参数表示移动目标点的坐标

缩放  

scale（x,y）;   参数表示宽高的缩放比例

旋转

rotate（angle);  参数表示旋转角度

 

参考文档：

w3school    http://www.w3school.com.cn/tags/html_ref_canvas.asp

Canvas_API   https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial