canvas的使用：

1.<canvas id="canvas"  height="300" width="300">

  您的浏览器不支持canvas标签

  </canvas>

 

2.

属性	值	描述
height	pixels	设置 canvas 的高度。
width	pixels	设置 canvas 的宽度。

canvas标签在页面中只显示一个设定背景色的画布，如果要产生新内容或

者进行画图操作，需要借助canvas API(HTML5的内置对context 对象)和

javascript操作实现画图或者其他图像操作

 

 

3.canvas的绘制流程：

1. 获取canvas对象
   var canvas=document.getElementById(“canvas");

2. 创建 context 绘制环境对象
   var cxt=canvas.getContext("2d");

3. 设置绘图样式
   cxt.fillStyle="red";

4. 进行绘制
   cxt.fillRect(100,100,200,200);

 

4.Canvas的API-颜色、样式和阴影属性和方法

属性	描述
fillStyle	设置或返回用于填充绘画的颜色、渐变或模式
strokeStyle	设置或返回用于笔触的颜色、渐变或模式
shadowColor	设置或返回用于阴影的颜色
shadowBlur	设置或返回用于阴影的模糊级别
shadowOffsetX	设置或返回阴影距形状的水平距离
shadowOffsetY	设置或返回阴影距形状的垂直距离

 

5.Canvas的API-矩形方法

 

方法	描述
rect()	创建矩形，（创建后，再填充或描边）
fillRect()	绘制"被填充"的矩形
strokeRect()	绘制矩形（无填充）
clearRect()	在给定的矩形内清除指定的像素

 

6.Canvas的API-线条样式属性和方法

lineWidth

设置或返回当前的线条宽度

 

7.Canvas的API-路径方法

方法	描述
fill()	填充当前绘图（路径）
stroke()	绘制已定义的路径
beginPath()	起始一条路径，或重置当前路径
moveTo()	把路径移动到画布中的指定点，不创建线条
closePath()	创建从当前点回到起始点的路径
lineTo()	添加一个新点，创建从该点到最后指定点的线条
arc()	创建弧/曲线（用于创建圆形或部分圆）

 

8.Canvas的API-渐变方法

方法	描述
createLinearGradient()	创建线性渐变（用在画布内容上）
createRadialGradient()	创建放射状/环形的渐变（用在画布内容上）
addColorStop()	规定渐变对象中的颜色和停止位置

 

9.Canvas的API-文本属性和方法

属性	描述
font	设置或返回文本内容的当前字体属性
textAlign	设置或返回文本内容的当前对齐方式
textBaseline	设置或返回在绘制文本时使用的当前文本基线
方法	描述
fillText()	在画布上绘制"被填充的"文本
strokeText()	在画布上绘制文本（无填充）
measureText()	返回包含指定文本宽度的对象

 

10.Canvas的API-转换方法

方法	描述
scale()	缩放当前绘图至更大或更小
rotate()	旋转当前绘图
translate()	重新映射画布上的 (0,0) 位置
transform()	替换绘图的当前转换矩阵
setTransform()	将当前转换重置为单位矩阵。然后运行 transform()

 

11.Canvas的API-动画制作-清除方法

属性	描述
clearRect()	在给定的矩形内清除指定的像素