1.绘制矩形
var canvas = document.getElementById(id);
var context = canvas.getContext('2d');
context.fillStyle = '#EEEEFF';
context.strokeStyle = 'yellow';
context.fillRect(0,0,500,300);
context.strokeRect = 'blue';
2. 使用路径
context.beginPath();
context.closePath();
context.fill();
context.stroke();
context.moveTo(20,20);
context.lineTo(20,200);
context.arc(i*25,i*25,i*10,0,Math.PI*2,true);
context.lineCap = 'round';
context.lineJoin = 'round';
context.setLineDash([5]);
context.arcTo(150,100,50,20,30);
context.bezierCurveTo(dx + x*s,dy + y*s - 100, dx + x*s + 100,dy + y*s, dx + x*s,dy + y*s);
3. 使用path2D对象绘制路径
-- -- -- -- --
-- -- -- --
4. 绘制渐变图形
var g1 = context.createLinearGradient(0,0,0,300);
g1.addColorStop(0,'rgba(255,255,0,0.5)');
var g2 = context.createRadialGradient(400,0,0,400,0,400);
g2.addColorStop(0.1,'rgba(255,255,0,0.5)');
g2.addColorStop(0.3,'rgba(0,255,255,0.7)');
g2.addColorStop(1,'rgba(0,0,255,0.7)');
5. 图形绘制阴影
context.shadowOffsetX = 10;
context.shadowOffsetY = 10;
context.shadowColor = 'rgba(100,100,100,0.5)';
context.shadowBlur = 7.5;
6. 使用图形
context.drawImage(image,i*n1,j*n2,n1,n2);
context.createPattern(image,'repeat');
context.clip();
context.getImageData(0,0,image5.width,image5.height);
context.putImageData(imagedata, 0, 0);