HTML5 JS fillRect() comportement étrange

Question

J'ai deux problèmes bizarres avec fillrect (x, y, width, height).

1. multiplie la valeur de « hauteur » par deux

2. X et y est censé être réglé sur la position de la souris, mais le rectangle est vers la gauche en bas, et se plus loin que la souris se déplace en bas à gauche.

Ce code est d'un tutoriel vidéo, et le code semble fonctionner pour le gars et la vidéo, et tout le monde puisque personne ne commenta le même problème. Quoi qu'il en soit voici le code:

function doFirst(){ 
    canv = document.getElementById('canvas'); 
    canvas = canv.getContext('2d'); 

    document.addEventListener("mousemove", onMouseMove, false); 
} 

function onMouseMove(e){ 
    canvas.clearRect(0, 0, canv.width, canv.height); 
    var x = e.clientX; 
    var y = e.clientY; 
    canvas.fillRect(x, y, 50, 50); 
} 

window.addEventListener("load", doFirst, false); 

Je pensais que peut-être je raté une étape dans le tutoriel, et après avoir vérifié encore et j'ai décidé de le simplifier à juste dessiner un rectangle sans l'auditeur de la souris, mais la toile encore a attiré avec 2X la hauteur et environ 2x la position y.

function doFirst(){ 
    canv = document.getElementById('canvas'); 
    canvas = canv.getContext('2d'); 

    canvas.fillRect(10, 10, 50, 50); 
} 

window.addEventListener("load", doFirst, false); 

La fonction fillRect fonctionnait bien l'autre jour lorsque j'ai commencé à jouer avec HTML5 canvas, alors que s'est-il passé? comment l'ai-je brisé?

Answer 1

je crois que cela se produit parce que vous essayez de régler la largeur et la hauteur de la toile avec CSS:

<!--Sets size of the canvas on the page--> 
<canvas id="canvas" style="width:500px; height:500px;"></canvas> 

Au lieu de cela, utilisez ceci:

<!--Sets drawing surface size--> 
<canvas id="canvas" width="500" height="500"></canvas> 

La « largeur » et " height "indique la taille de la surface de dessin, qui est 300x150 par défaut. La définition de la largeur et de la hauteur CSS de la zone de travail agrandira ou réduira la surface de dessin, mais ne modifiera pas le nombre de pixels de la surface. fillRect prend les coordonnées dans les pixels de "surface de dessin", pas "pixels de page HTML".