html5 Canvas元素

1. 文本对象

   context 对象属性：    

fillstyle // strokeStyle 字体颜色设置fillStyle属性可以是CSS颜色，渐变，或图案。fillStyle 默认设置是黑色。

font 　　　　　　　字体风格

context 对象方法：

fillText (str , width , height ) // strokeText 绘制文本

fillRect(x,y,width,height) 填充绘制矩形（x,y)为起始点坐标，其他为矩形长宽

strokeRect(x,y,width,height) 描边绘制矩形（x,y)为起始点坐标，其他为矩形长宽

textAlign　　　　　　　　水平对齐方式

testBaseline　　　　　　垂直对齐方式

 

2. 绘制路径

moveTo(x,y) 定义线条开始坐标

lineTo(x,y) 定义线条结束坐标

然后stroke一下

 

3. 绘制圆

arc( x , y , r ,start , stop, true / false ) 圆心坐标，起始弧度，终止弧度，true是逆时针，false是顺时针。默认顺时针

然后 stroke 一下

4. 渐变图形

   渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。

   以下有两种不同的方式来设置Canvas渐变：

   • createLinearGradient(x,y,x1,y1) - 创建线条渐变，传参为起始点和终止点

   • createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变

addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1.

如grd.addColorStop(0,"red");

设置完填充颜色后用 fiil 或 stroke 绘制

5. 插入图像

• drawImage(image,x,y)