canvas 繪圖基礎

時間 2019-11-17

標籤 canvas 繪圖基礎简体版

原文原文鏈接

<body>
    <canvas style="border:1px solid yellowgreen;width: 500px;height: 200px" id="mycanvas">
        My Canvas
    </canvas>
    <script>
        var cv = document.getElementById('mycanvas');
        var cxt = cv.getContext('2d');

        var line = function(){
            cxt.moveTo(10,10);
            cxt.lineTo(30,100);
            cxt.lineTo(400,190);
            cxt.stroke();
        }

        var rect = function(){
            cxt.fillStyle = 'green';
            cxt.fillRect(0,0,100,100);
        }

        var circle = function(){
            cxt.fillStyle = 'green';
            cxt.beginPath();
            cxt.arc(50,50,30,0,Math.PI*2,true);
            //這裏的arc方法的用法是 arc(X,Y,Radius,startAngle,endAngle,anticlockwise),意思是（圓心X座標，圓心Y座標，半徑，開始角度（弧度），結束角度弧度，是否按照順時針畫）；
            cxt.closePath();
            cxt.fill();
        }

        var draw = function(){
            var img=new Image();
            img.src="http://images.cnblogs.com/cnblogs_com/html5test/359114/r_test.jpg";
            cxt.drawImage(img,0,0);
        }
        
    </script>
</body>

相關標籤/搜索