<!doctype html> <html> <head> <meta charset="utf-8"> <title>绘制直线</title> </head> <body> <canvas id="cloth" width="200" heigth="200" style="border:1px solid #ff0000;"> Your browser does not support the canvas element. </canvas> <script type="text/javascript"> var c = document.getElementById("cloth"); var ece = c.getContext("2d"); //直线 // ece.moveTo(10,10); // ece.lineTo(150,50); // ece.lineTo(10,50); // ece.lineTo(10,10); // ece.fillStyle="#ff0000"; // ece.fill(); // ece.lineWidth=5; // ece.strokeStyle="#00ff00"; // ece.stroke(); //圆形 // ece.beginPath(); // ece.arc(50,50,50,0,2*Math.PI); // ece.fillStyle="#00ff00"; // ece.closePath(); // ece.fill(); //渐变色 var grd=ece.createLinearGradient(0,0,175,50); grd.addColorStop(0,"#FF0000"); grd.addColorStop(1,"#0000FF"); ece.fillStyle=grd; ece.fillRect(0,0,175,50); </script> </body> </html>
原文：https://www.cnblogs.com/lufeibin/p/10922332.html