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>
原文：https://www.cnblogs.com/hjcby/p/13527217.html