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>
posted on 2015-08-04 15:24 句号小弟wutian 阅读(112) 评论(0) 收藏举报