canvas应用

2019-05-25 14:41:35 作者：互联网

<!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>

标签：10,canvas,lineTo,ece,50,grd,应用,fillStyle
来源： https://www.cnblogs.com/lufeibin/p/10922332.html