希望我的畫布上畫了一個圈，但導致蝕

這裏是我的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

希望我的畫布上畫了一個圈，但導致蝕

回答

相關問題