var canvas = document.getElementById('tutorial');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
// drawing code here
} else {
// canvas-unsupported code here
}
二、绘制形状
1、绘制矩形
fillRect(x, y, width, height)
绘制一个填充的矩形
strokeRect(x, y, width, height)
绘制一个矩形的边框
clearRect(x, y, width, height)
清除指定矩形区域,让清除部分完全透明。
functiondraw() {var canvas = document.getElementById('canvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.fillRect(25,25,100,100);//函数绘制了一个边长为100px的黑色正方形
ctx.clearRect(45,45,60,60);//函数从正方形的中心开始擦除了一个60*60px的正方形
ctx.strokeRect(50,50,50,50);//在清除区域内生成一个50*50的正方形边框。
}
}