meine Leinwand einen Kreis zeichnen will, aber hier in einer Eclipse

Question

ist mein jsfiddle führen: jsfiddle

Ich kann dieser Code Ergebnis in einer Finsternis nicht herausfinden, warum, bitte nehmen Sie ein unter meinem Code aussieht, ist dies eine Animation mit requestAnimationFrame.

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); 
}); 

Answer 1

Ihre Leinwand ein default width and height hat von 300 x 150 Pixel. Dies sind die Attribute des Canvas-HTML-Elements. Anschließend dehnen Sie die Zeichenfläche über CSS-Regeln auf 400 x 400 Pixel - die CSS-Regeln wirken sich jedoch nur auf die Darstellung der Zeichenfläche aus, nicht auf die Auflösung der Zeichenfläche.

Lösung: Ihre CSS entfernen und die Breite und Höhe Attribute gesetzt:

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

Answer 2

entfernen height und width von Ihrer CSS-Regel:

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

Nun fügen width und height durch HTML-Attribute und es funktionieren soll:

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