cdc8596
奇点码农
2017-11-02 05:54
采纳率: 50%
浏览 3.2k

H5 canvas多次重复画图后 ,位置不是第一次开始的位置

timer = window.setInterval(function () { drawLine_V0101();}, 5000);
function drawLine_V0101()
{
try
{
//获取Canvas对象(画布)
var canvas = document.getElementById("myCanvas1");
//简单地检测当前浏览器是否支持Canvas对象,以免在一些不支持html5的浏览器中提示语法错误
if (canvas.getContext) {
//获取对应的CanvasRenderingContext2D对象(画笔)
var ctx = canvas.getContext("2d");
//圆弧的旋转角度,顺时针负增长,逆时针正增长
ctx.rotate(-8 * Math.PI / 180);
//设置弧线的颜色为蓝色
ctx.strokeStyle = "#00FFD5";
var circle = {
x: 60, //圆心的x轴坐标值
y: 60, //圆心的y轴坐标值
r: 47, //圆的半径

};

                for (var i = 1; i <10; i++)
                {//开始一个新的绘制路径

                    ctx.beginPath();
                    //圆弧的旋转角度
                    circle.x = circle.x-0.342;
                    circle.y = circle.y - 0.940;
                    //沿着坐标点(100,100)为圆心、半径为50px的圆的顺时针方向绘制弧线
                    ctx.arc(circle.x  , circle.y, circle.r,65 * Math.PI / 180, 120 * Math.PI / 180, false);
                    //按照指定的路径绘制弧线
                    ctx.stroke();
                    if (i == 1) {
                        ctx.save();
                    }
                }
                ctx.restore();//回复路径

            }


        }
        catch (e) {
            alert(e.message);
        }

    }



            <!--绘制弧线 V0101-->
<div id="huxian" style="width: 150px;height:150px;position:absolute;z-index:3; left:5.76%;bottom:29.5%">
    <canvas id="myCanvas1" style="width:150px;height:150px;border: 1px solid red;"></canvas>
</div>
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • blovecat
    blovecat 2017-11-05 02:08
    已采纳

    //获取对应的CanvasRenderingContext2D对象(画笔)
    var ctx = canvas.getContext("2d");
    //圆弧的旋转角度,顺时针负增长,逆时针正增长

    //ctx.rotate(-8 * Math.PI / 180);

    上面这句话注释掉试试,不知道是不是你要的效果

    点赞 评论

相关推荐