1 <body>
2 <canvas id="myCanvas" width="400" height="400" style="border:1px solid red"></canvas>
3 </body>
4 <script>
5 var c = document.getElementById('myCanvas');
6 var ctx = c.getContext("2d");
7 // 红色矩形
8 ctx.beginPath()
9 ctx.fillstyle = "#FF0000";
10 ctx.fillRect(0, 0, 150, 75);
11 // 路径
12 ctx.beginPath()
13 ctx.moveTo(0, 0);
14 ctx.lineTo(200, 100);
15 ctx.strokeStyle = "red";
16 ctx.stroke();
17 // 三角形
18 ctx.beginPath()
19 ctx.moveTo(10, 10);
20 ctx.lineTo(50, 50);
21 ctx.lineTo(10, 50);
22 ctx.lineTo(10, 10);
23 ctx.stroke();
24 // 创建渐变
25 var grd = ctx.createLinearGradient(100, 150, 200, 30);
26 grd.addColorStop(0, "red");
27 grd.addColorStop(1, "blue");
28 // 字
29 ctx.beginPath();
30 ctx.font = "30px Arial";
31 ctx.fillStyle = grd;
32 ctx.fillText("Hello World", 100, 150);
33 ctx.fill();
34 // 圆
35 ctx.beginPath();
36 ctx.fillStyle = 'black';
37 ctx.arc(250, 250, 50, 0, 2 * Math.PI, true);
38 ctx.fill();
39 </script>