这个元素负责在页面中设定一个区域，然后就可以通过JS动态的在这个区域中绘制图形。
<canvas>由几组API构成。
<canvas>还建议一个名为WebGL的3D上下文
（1）基本用法
<canvas id="drawing" width="200" height="200">a drawing of something</canvas>
var drawing = document.getElementById("drawing");
if(drawing.getContext){
var context = drawing.getContext("2d");//为html规范之外的元素创建默认的html元素
}
(2)2D上下文
填充和描边
var drawing = document.getElementById("drawing");
if(drawing.getContext){
var context = drawing.getContext("2d");//为html规范之外的元素创建默认的html元素
context.strokeStyle = "red";
context.fillStyle = "#0000ff";
}
绘制矩形
context.fillStyle = "#ff0000";
context.fillRect(10,10,50,50);
context.strokeStyle = "rgba(0,0,255,0.5)";//描边
context.strokeRect(30,30,50,50);
绘制路径
通过路径可以创造出复杂的形状和线条。
//开始路径
context.beginPath();
//绘制外圆
context.arc(100,100,99,0,2*Math.PI,false);
//绘制内圆
context.moveTo(194,100);
context.arc(100,100,94,0,2*Math.PI,false);
//绘制分针
context.moveTo(100,100);
context.lineTo(100,15);
//绘制时针
context.moveTo(100,100);
context.lineTo(35,100);
//描边路径
context.stroke();
绘制文本
context.font = "bold 14px Arial";
context.textAlign = "center";
context.textBaseline = "middle";
context.fillText("12",100,20);
变换
//开始路径
context.beginPath();
//绘制外圆
context.arc(100,100,99,0,2*Math.PI,false);
//绘制内圆
context.moveTo(194,100);
context.arc(100,100,94,0,2*Math.PI,false);
//变换原点
context.translate(100,100);
//绘制分针
context.moveTo(0,0);
context.lineTo(0,-85);
//绘制时针
context.moveTo(0,0);
context.lineTo(-65,0);
//描边路径
context.stroke();
====
context.rotate(1);
save();保存
restore();返回
绘制图像
var image = document.images[0];
context.drawImage(image,10,10);
context.drawImage(image,50,10,20,30);
context.drawImage(image,0,10,50,50,0,100,40,60);
//取得图像的数据URI
var imgURI = drawing.toDataURL("image/png");
//显示图像
var image = document.createElement("img");
image.src = imgURI;
document.body.appendChild(image);
阴影
阴影需要统一设置,在绘制前设置
//设置阴影
context.shadowOffsetX = 5;
context.shadowOffsetY = 5;
context.shadowBlur =4;
context.shadowColor = "rgba(0,0,0,0.5)";
渐变
var gradient = context.createLinearGradient(30,30,70,70);
gradient.addColorStop(0,"white");gradient.addColorStop(1,"black"); context.fillStyle = gradient;context.fillRect(30,30,50,50);径向渐变var gradient = context.createRadialGradient(55,55,10,55,55,30);gradient.addColorStop(0,"white");gradient.addColorStop(1,"black");模式
是重复的图像。
var image = document.images[0];
pattern = context.createPattern(image,"repeat");
context.fillStyle = pattern;
context.fillRect(10,10,150,150);
使用图像数据
var image = document.images[0];
//绘制原始图像
context.drawImage(image,0,0);
//取得图像数据
imageData = context.getImageData(0,0,image.width,image.height);
data =imageData.data;
//回写图像数据并显示结果
imageData.data = data;
context.putImageData(imageData,0,0);
合成
//修改全局透明度
context.globalAlpha = 0.5;
//重置全局透明度
context.globalAlpha = 0;
WebGL是针对3D上下文。由于显卡，系统等原因，好多不支持。