效果 - 简书

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #myCanvas {
                border: 10px solid red;
                /*canvas的宽和高不能在样式表里设置*/
            }
        </style>
    </head>

    <body>
        <canvas id="myCanvas" width="600" height="600"></canvas>
    </body>
    <script type="text/javascript">
        var myCanvas = document.getElementById("myCanvas");

        var context = myCanvas.getContext("2d");
        var arr=["red","blue","black","yellow"]
        var deg = Math.PI/180;
//      for(var i = 0; i < 4; i++) {
//          context.beginPath();
//          context.moveTo(50+i*20, 50+i*20);
//          context.lineTo(50+i*20, 300+i*20);
//          context.lineTo(300+i*20, 300+i*20);
//          context.lineTo(300+i*20, 50+i*20);
//          context.strokeStyle = arr[i];
//          context.fillStyle=arr[i];
//          context.fill();
//          context.closePath();
//          context.lineWidth = 2;
//          context.stroke();
//      }
//      context.strokeStyle = arr[0];
//      context.strokeRect(50,50,200,100);//x,y,w,h

//      context.fillStyle=arr[0];
//      context.fillRect(50,50,200,100);


//      context.lineWidth = 50;
//      context.strokeStyle = "black";
//      context.strokeRect(50,50,200,200);
//      context.fillStyle = "red";
//      context.fillRect(50,50,200,200);

        //圆形的绘制
        //圆心x，y，半径，开始角度，结束，顺/逆时针（角度采用弧度）
//      context.beginPath();
//      context.lineWidth=20;
//      context.strokeStyle = "black";
//      context.arc(300,300,100,0,360*deg,true);
//      context.fillStyle = "royalblue";
//      context.fill();
//      context.stroke();
        
        //字体的绘制
//      context.font="100px Arial";
////        context.strokeStyle = "red";
////        context.strokeText("Hello",100,100);
////        
////        context.fillStyle = "#007AFF";
////        context.fillText("world",200,200);
//
//      //渐变
//      
//      var gradient = context.createLinearGradient(0,0,400,0);//开始坐标，结束坐标
//      gradient.addColorStop(0,"red");
//      gradient.addColorStop(0.5,"green");
//      gradient.addColorStop(1,"blue");
//      
//      context.fillStyle = gradient;
////        context.fillRect(0,0,600,600);
//      context.fillText("hellow world",0,100);

//      var gradient = context.createRadialGradient(300,300,0,300,300,300);
//      gradient.addColorStop(0,"pink");
//      gradient.addColorStop(0.2,"lightgoldenrodyellow");
//      gradient.addColorStop(1,"orange");
//      
//      context.fillStyle = gradient;
//      context.fillRect(0,0,600,600);

        //阴影
//      context.font="70px Arial";
//      context.shadowColor = "#00BFFF";
//      context.shadowBlur = 30;
//      context.shadowOffsetX = 10;
//      context.shadowOffsetY = 10;
//      context.fillStyle = "burlywood";
//      context.fillText("hellow world",50,100);
        
        
    </script>

</html>
效果

推荐阅读更多精彩内容
