HTML5 Canvas 学习笔记（canvas绘制线条、矩形、多边形、圆、自_H5之家

1 function draw5(id) { 2 var canvas = document.getElementById(id); 3 if (canvas == null) ; context = canvas.getContext("2d"); context.fillStyle = "#EEEEFF"; 10 context.fillRect(0, 0, 400, 300); 11 12 context.fillStyle = "rgba(255,0,0,0.1)"; context.translate(100, 100); 15 context.scale(0.5, 0.5); 16 context.rotate(Math.PI / 4); 17 context.fillRect(0, 0, 100, 100); context.restore(); context.save(); context.fillStyle = "rgba(255,0,0,0.2)"; context.translate(100, 100); 25 context.rotate(Math.PI / 4); 26 context.scale(0.5, 0.5); 27 context.fillRect(0, 0, 100, 100); context.save(); context.fillStyle = "rgba(255,0,0,0.3)"; context.scale(0.5, 0.5); 34 context.translate(100, 100); 35 context.rotate(Math.PI / 4); 36 context.fillRect(0, 0, 100, 100); context.save(); context.fillStyle = "rgba(255,0,0,0.4)"; context.scale(0.5, 0.5); 43 context.rotate(Math.PI / 4); 44 context.translate(100, 100); 45 context.fillRect(0, 0, 100, 100); context.save(); context.fillStyle = "rgba(255,0,0,0.5)"; context.rotate(Math.PI / 4); 52 context.translate(100, 100); 53 context.scale(0.5, 0.5); 54 context.fillRect(0, 0, 100, 100); context.save(); context.fillStyle = "rgba(255,0,0,1)"; context.rotate(Math.PI / 4); 61 context.scale(0.5, 0.5); 62 context.translate(100, 100); 63 context.fillRect(0, 0, 100, 100); }