HTML5 Canvas绘图

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( )