希望我的画布上画了一个圈，但导致蚀

这里是我的jsfiddle：jsfiddle 希望我的画布上画了一个圈，但导致蚀

我想不通为什么这个代码导致偏食，请大家看看下面我的代码，这是一个动画使用。

function circleGraph(radius) { 
    return { 
    type: 'circle', 
    radius: radius, 
    currentAngleAnimate: 0 
    } 
} 
$(document).ready(function() { 
    var canvas = document.getElementById('mycanvas'); 
    var context = canvas.getContext('2d') 
    var width = canvas.width; 
    var height = canvas.height; 
    var circleObj = circleGraph(50); 

    context.lineWidth = 1; 
    context.strokeStyle = '#ad2323'; 
    context.fillStyle = '#ad2323'; 

    var draw = function() { 
    context.clearRect(0, 0, width, height); 
    context.beginPath(); 
    circleObj.currentAngleAnimate += Math.PI * 2/60; 
    context.arc(width/2, height/2, circleObj.radius, -Math.PI/2, circleObj.currentAngleAnimate, false); 
    context.stroke(); 
    context.lineTo(width/2, height/2); 
    context.fill(); 
    requestAnimationFrame(draw) 
    } 
    requestAnimationFrame(draw); 
});

来源

2016-06-21 zl2003cn

你的画布，有default width and height的300 x 150像素。这些是canvas HTML元素的属性。然后，通过CSS规则将画布拉伸至400 x 400像素 - 但是，CSS规则仅影响画布的显示显示而不是分辨率。

解决方案：拿出你的CSS，并设置宽度和高度属性：

<canvas id="mycanvas" width="400" height="400></canvas>

来源

2016-06-21 06:33:01

正确的，但你的回答是不恰当的。这个问题之前已经有很多次被问及过。请勿尝试将提问者指向许多重复问答中的一个，而不是添加到一堆重复的问答中。考虑删除你的答案以支持其中一个问答。 – markE

@markE很好，你找到了重复！但是，请不要让其他用户删除他们的答案而离开居高临下的评论。欢迎您在此与社区讨论您的个人观点：http://meta.stackoverflow.com/questions/253735/is-it-wrong-to-downvote-a-good-answer-to-a-duplicate-question和http://meta.stackoverflow.com/questions/252009/should-there-be-a-deterrent-for-answering-obvious-duplicate-questions –

这当然不是一个个人的观点，明显重复问答应避免按顺序保持Stackoverflow不那么混乱。这是一个政策，不发布重复的答案 - 因此“关闭：重复......”的能力。顺便说一句，我的态度更令人沮丧，而不是居高临下。与个人无关。： - // – markE

从你的CSS规则删除height和width：

#mycanvas { 
    border: thin solid green; 
    position: relative; 
}

现在，添加width和height通过HTML属性，它应该工作：

<canvas id="mycanvas" height="400" width="400"></canvas>

来源

2016-06-21 06:32:48

希望我的画布上画了一个圈，但导致蚀

回答

相关问题