HTML5 Canvas绘图

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

HTML5 Canvas绘图

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

HTML5 Canvas绘图
** 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);

HTML5 Canvas绘图
** 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);

HTML5 Canvas绘图

线条样式

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( ) ：填充当前绘图（路径）
HTML5 Canvas绘图
stroke( ) : 绘制已定义的路径

beginPath( ) ：起使一条路径，或重置当前路径
moveTo( ) : 把路径移动到画布中的指定点，不创建线条
closePath( ) : 创建从当前点回到起使点的路径
lineTo( ) ：添加一个新点，然后在画布中创建从该点到最后指定点的线条
HTML5 Canvas绘图
clip( ) ：从原始画布剪切任意形状和尺寸的区域。
quadraticCurveTo( )：创建二次贝塞尔曲线
bezierCurveTo( )：创建三次方贝塞尔曲线
arc( )：创建弧/曲线(用于创建圆形或部分圆)
arcTo( )：创建两切线之间的弧/曲线
isPointInParh( )：如果指定的点位于当前路径中，则返回 true，否则返回 false

转换

scale( ) ：缩放当前绘图至更大或更小
rotate( )：旋转当前绘图
translate( )：重新映射画布上的（0,0）位置