Canvas

Canvas绘制矩形

//html（在html的canvas元素中为其制定高和宽）

<canvas id="drawing" width="200" height="200">A Drawing Of Somothing.</canvas>

//js

var drawing = document.getElementById("drawing");

//判断浏览器是否支持canvas

if (drawing.getContext) {

var context = drawing.getContext("2d");

//制定填充的样式（css中的颜色）

context.fillStyle = "red";

//填充绘制矩形

context.fillRect(10,10,50,50);

context.fillStyle = "rgba(0,0,255,0.5)";

context.fillRect(30,30,50,50);

//清除其中一小块矩形

context.clearRect(30,30,30,30);

 

Canvas绘制表盘

var context = drawing.getContext("2d");

//开始路径

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

 

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