<canvas id="drawing" width="200" height="200">如果浏览器不支持canvas,则会显示这里的信息</canvas>
var drawing = document.getElementById("drawing");
var context = drawing.getContext("2d");
var drawing = document.getElementById("drawing");
//确定浏览器支持<canvas>元素
if(drawing.getContext) {
//取得2d上下文对象引用
var context = drawing.getContext("2d");
//填充个红矩形
context.fillStyle = "red";
context.fillRect(0,0,100,100);
//描边个绿矩形
context.strokeStyle= "green";
context.strokeRect(30,30,100,100);
//在两个矩形重叠的地方清除一个小矩形
context.clearRect(20,20,50,50)
}
效果:
var drawing = document.getElementById("drawing");
//确定浏览器支持<canvas>元素
if(drawing.getContext) {
//取得2d上下文对象引用
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,15);
//绘制时钟
context.moveTo(100,100);
context.lineTo(35,100);
//描边路径
context.strokeStyle = "blue";
context.stroke();
}
ps:上面画内圆时用的moveTo()方法,其实就是“提笔”,首先用“笔”画了个外圆,然后将笔提起来,放到内圆的一点上,然后再画。
时钟.png
参考学习:
《高程》