canvas学习笔记

14. June 2016 笔记 0
<script>
    window.onload=function () {
        var canvas = document.getElementById("canvas");
        var content=canvas.getContext("2d");
        content.arc(200,222,100,0,1.5*Math.PI,true); //圆心,半径,起始位置,结束位置,是否逆时针
        content.stroke();//绘制图形

        for(var i=0;i<10;i++){
            content.beginPath();//开始绘制一个路径
            content.arc(50+i*100,100,40,0,2*Math.PI*(i+1)/10);
            content.closePath();
            content.stroke();// 开始绘制线条
        }
        content.fillStyle="red";//填充颜色
        for(var i=0;i<10;i++){
            content.beginPath();
            content.arc(50+i*100,300,40,0,2*Math.PI*(i+1)/10);
            content.stroke();
            content.closePath();
            content.fill(); 开始填充
        }
//        content.beginPath();
//        content.moveTo(100,100);
//        content.lineTo(400,400);
//        content.lineTo(100,400);
//        content.lineTo(100,100);
//        content.closePath();
//        content.strokeStyle="red";//绘制线的颜色
//        content.fillStyle="rgb(10,50,200)";
//        content.fillStyle="red";
//        content.fill();
//        content.stroke();

    }
</script>

Leave a Reply

Your email address will not be published. Required fields are marked *