http://www.w3school.com.cn/tags/html_ref_canvas.asp
Canvas标签
HTML5 标签用作绘图的容器，使用JS脚本来完成绘图。
如下代码可以获取绘制上下文，类似于C#中的Graphics g = e.Graphics获取画布
var c = document.getElementById("Canvas");
var ctx = c.getContext("2d");
绘制的对象有文本、线条、矩形、圆形等
浏览器支持
IE8以及更早的版本不支持元素
颜色、样式和阴影
| 属性 | 描述 | Code |
|---|---|---|
| fillStyle | 设置或返回用于填充绘画的颜色、渐变或模式 | ctx.fillStyle="#0000ff"; ctx.fillRect(20,20,150,100) |
| strokeStyle | 设置或返回用于笔触的颜色、渐变或模式 | ctx.strokeStyle="#0000ff"; ctx.strokeRect(20,20,150,100) |
| shadowColor | 设置或返回用于阴影的颜色 | ctx.shadowBlur=20; ctx.shadowColor="black"; |
| shadowBlur | 设置或返回用于阴影的模糊级别 | ctx.shadowBlur=20; ctx.shadowColor="black"; |
| shadowOffsetX | 设置或返回阴影距形状的水平距离 | ctx.shadowBlur=10; ctx.shadowOffsetX=20; ctx.shadowColor="black"; |
| shadowOffsetY | 设置或返回阴影距形状的垂直距离 | ctx.shadowBlur=10; ctx.shadowOffsetY=20; ctx.shadowColor="black"; |
createLinearGradient( )
创建线性渐变（用在画布内容上）
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var grd=ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"black");
grd.addColorStop(1,"white");
ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);
createPattern( ) 在指定的方向上重复指定的元素
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("lamp");
var pat=ctx.createPattern(img,"repeat");
ctx.rect(0,0,150,100);
ctx.fillStyle=pat;
ctx.fill();
** createRadialGradient( )** 创建放射状/环形的渐变（用在画布内容上）
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,100);
** addColorStop( )** 规定渐变对象中的颜色和停止位置
var c=document.getElementById('myCanvas');
var ctx=c.getContext('2d');
var grd=ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"black");
grd.addColorStop(1,"white");
ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);
线条样式
lineCap : 设置或返回线条的结束断点样式
lineJoin : 设置或返回两条线相交时，所创建的拐角类型
lineWidth : 设置或返回当前的线条宽度
miterLimit : 设置或返回最大斜接长度
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.lineCap="round";
ctx.moveTo(20,20);
ctx.lineTo(20,200);
ctx.stroke();
矩形
rect( ) ： 创建矩形
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.rect(20,20,150,100);
ctx.stroke();
fillRect( ) : 绘制"被填充"的矩形
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillRect(20,20,150,100);//默认填充黑色
strokeRect( ) ：绘制矩形(无填充)
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeRect(20,20,150,100);
clearRect( ) : 在给定的矩形内清除指定的像素
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(0,0,300,150);
ctx.clearRect(20,20,100,50);
路径
fill( ) ：填充当前绘图（路径）
stroke( ) : 绘制已定义的路径
beginPath( ) ：起使一条路径，或重置当前路径
moveTo( ) : 把路径移动到画布中的指定点，不创建线条
closePath( ) : 创建从当前点回到起使点的路径
lineTo( ) ：添加一个新点，然后在画布中创建从该点到最后指定点的线条
clip( ) ：从原始画布剪切任意形状和尺寸的区域。
quadraticCurveTo( )：创建二次贝塞尔曲线
bezierCurveTo( )：创建三次方贝塞尔曲线
arc( )：创建弧/曲线(用于创建圆形或部分圆)
arcTo( )：创建两切线之间的弧/曲线
isPointInParh( )：如果指定的点位于当前路径中，则返回 true，否则返回 false
转换
scale( ) ：缩放当前绘图至更大或更小
rotate( )：旋转当前绘图
translate( )：重新映射画布上的（0,0）位置
transform( )：替换绘图的当前旋转矩阵
setTransform( )：将当前转换重置为单位矩阵。然后运行transform( )
文本
属性
font ：设置或返回文本内容的当前字体属性
textAlign：设置或返回文本的当前对齐方式
textBaseline：设置或返回在绘制文本时使用的当前文本基线
方法
fillText( )：在画图上绘制"被填充的"文本
strokeText( )：在画布上绘制文本（无填充）
measureText( )：返回包含指定文本宽度的对象
图像绘制
方法
drawImage( ) ：向画布上绘制图像、画布或视频
像素操作
属性
width：返回ImageData 对象的宽度
height：返回ImageData 对象的高度
data：返回一个对象，其包含指定的ImageData 对象的图像数据
方法
createImageData( )：创建新的、空白的ImageData对象
getImageData( )：返回ImageData对象，该对象为画布上指定的矩形复制像素数据
putImageData( )：把图像数据（从指定的ImageData对象）放回画布上
合成
属性
globalAlpha ： 设置或返回绘图的当前alpha或透明值
globalCompositeOperation：设置或返回新图像如何绘制到已有的图像上
其他
方法
save( ) ：保存当前环境的状态
restore( )：返回之前保存过的路径状态和属性
createEvent( )
getContext( )
toDataURL( )