canvas画图

这个元素负责在页面中设定一个区域，然后就可以通过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上下文。由于显卡，系统等原因，好多不支持。