HTML5---Canvas绘制

HTML5—Canvas绘制

绘制弧度

Insert title here


    Canvas 画布
    
    
    


    
        window.onload = function() {
            var mCanvas = document.getElementById("canvas");
            var mContext = canvas.getContext("2d");
            if(mContext == null){
                document.write("当前浏览器无法使用canvas");
            } 
            //使用context绘制

             mContext.lineWidth = 5;
             mContext.strokeStyle = "red";

             mContext.beginPath();
             mContext.arc(100, 300, 25, 0, 0.5*Math.PI, true);
             mContext.closePath();
             mContext.stroke();

             mContext.beginPath();
             mContext.arc(200, 300, 25, 0, 0.5*Math.PI, false);
             mContext.closePath();
             mContext.stroke();


             Context.beginPath();
             mContext.arc(300, 300, 25, 0, 1.5*Math.PI, true);
             mContext.closePath();
             mContext.stroke();

             mContext.beginPath();
             mContext.arc(400, 300, 25, 0, 1.5*Math.PI, false);
             mContext.closePath();
             mContext.stroke();
        };


    


**效果图如下：**

我们发现不管是顺时针还是逆时针 都是按照下面的的坐标弧度不变

第二点： 我们只想绘制一个圆弧， 而不是封闭的图形

将mContext.closePath() 删除， 就不是一个封闭的圆弧