html5 canvas基礎(1)--路徑

時間 2019-12-10
原文原文鏈接
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>html5 canvas API</title>

    <script type="text/javascript">

        window.onload=function(){

            var canvas = document.getElementById('can');


            //找不到元素的處理
            if (canvas==null){
               console.info('canvas元素不存在..');
                return  false;

            }
            /**
             *  獲取上下文(2d)平面圖
             * @type {CanvasRenderingContext2D}
             */
            var context = canvas.getContext('2d');
            //設置填充樣式
            context.fillStyle="yellow";
            //填充一個矩形，無背景色
            context.fillRect(10,10,250,250);
             //填充樣式，顏色英文,rgb,十六進制數都可以
            context.fillStyle="green";
            //填充一個矩形
            context.fillRect(140,140,250,250);
            //設置圖形邊框的樣式
            context.strokeStyle="red";
            //邊框線寬
           context.lineWidth=10;
            //繪製一個矩形(x,y,w,h) 在座標(x,y)處繪製寬和高爲(w,h)的矩形
            context.strokeRect(100,100,200,200);

            //清除矩形，擦除指定區域中的圖像，讓其背景變爲透明
           context.clearRect(100,100,200,200);
             /**
              * 繪製圓形或者圓弧
              * */
            for(var i=0;i<10;i++){

                //開始建立路徑
                context.beginPath();
                /**
                 * arc有六個參數(x,y,radius,startAngle,endAngle,anticlockwise)
                 * (起點橫座標,起點縱座標,圓形(弧)的半徑,開始角度，結束角度,是否順時針方向繪製)
                 */
                context.arc(35*i,35*i,i*6,0,Math.PI*2,true);
                //關閉路徑,路徑的繪製工做完成,還沒開始繪製圖像
                context.closePath();
                ///填充顏色
                context.fillStyle='rgba(245,0,0,0.5)';
                //填充圖形
               context.fill();

            }
            /**
             * 繪製一個圓弧
             */
            context.beginPath();
            context.arc(300,300,100,90,120,true);
            context.closePath();
            context.fillStyle="pink";
            context.fill();




            var can= document.getElementById("line");
            /**
             *
             * @type {CanvasRenderingContext2D}
             */
            var ctx =can.getContext('2d');

            ctx.fillStyle='rgb(100,200,210)';

            ctx.fillRect(0,0,350,350);

            var m=0;
            var nx=100;
            var ny=100;
            var s=100;

            ctx.beginPath();
            ctx.fillStyle='rgb(200,240,210)';
            ctx.strokeStyle="rgb(0,0,123)";
            var $x=Math.sin(0);
            var $y=Math.cos(0);
            var $d=Math.PI/15*11;
            for (var i=0;i<30;i++){

                var $x=Math.sin($d*i);
                var $y=Math.cos($d*i);
                ctx.lineTo(nx+$x*s,ny+$y*s);

            }
            ctx.closePath();
            ctx.fill();
            ctx.stroke();
        }

    </script>
</head>
<body>

  <canvas id="can" width="400" height="400" style="background-color:gray;">
您的瀏覽器不支持canvas！

  </canvas>

  <canvas id="line" width="400" height="400" style="background-color:salmon;">
      您的瀏覽器不支持canvas！

  </canvas>


</body>
</html>

複製代碼