html5 - canvas画出的秒针中间有段空白是什么原因？？

问题描述

问 题

function drawSecond(second){
    ctx.save();
    ctx.beginPath();
    ctx.fillStyle="#c14543";
    var rad=2*Math.PI/60*second;
    ctx.rotate(rad);
    ctx.moveTo(2*rem,20*rem);
    ctx.lineTo(-2*rem,20*rem);
    ctx.lineTo(1,-r+40*rem);
    ctx.lineTo(-1,-r+40*rem);
    ctx.fill();
    ctx.restore();
}

代码如上，画出的秒针为什么中间会有段空白？？希望有大神可以解决一下

解决方案

ctx.moveTo(2*rem,20*rem);
ctx.lineTo(-2*rem,20*rem);
ctx.lineTo(-1,-r+40*rem);
ctx.lineTo(1,-r+40*rem);


坐标顺序错了吧.导致绘制了一个交叉线.

这篇关于html5 - canvas画出的秒针中间有段空白是什么原因？？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！