Mise à jour en temps réel de rgba en utilisant clientX/clientY?

Le code ci-dessous fonctionne jusqu'à ce que la ligne 47 soit remplacée par la ligne 48 (c'est-à-dire en calculant le style de remplissage). Pour une raison quelconque, tenter d'utiliser clientY pour calculer la partie bleue de la rgba ne fonctionne pas, alors que le calcul de l'alpha n'est pas un problème.Mise à jour en temps réel de rgba en utilisant clientX/clientY?

<!DOCTYPE html> 
<html> 

<head> 
    <title> My Animation </title> 
</head> 

<body> 
    <canvas id="myCanvas" height="768" width="1200"></canvas> 
</body> 
<script> 
    var mainCanvas = document.getElementById("myCanvas"); 
    var ctx = mainCanvas.getContext('2d'); 
    var canvasWidth = mainCanvas.width; 
    var canvasHeight = mainCanvas.height; 
    // the array of squares 
    var squares = []; 

    var mouseX = 1200; 
    var mouseY = 768; 
    var putPoint = function (e) { 
     // update mouse 
     mouseX = e.clientX; 
     mouseY = e.clientY; 
    } 
    mainCanvas.addEventListener("click", putPoint); 

    for (i = 0; i < 100; i++) { 
     squares.push(new Square()); 
    } 

    function Square() { 
     this.x = Math.random() * 1024; 
     this.y = Math.random() * 768; 
     this.inc = Math.random() * 360; 
     this.angle = 0; 
     this.speed = Math.random() * 6 - 3; 
    } 

    Square.prototype.update = function() { 
     ctx.save(); 
     ctx.translate(this.x, this.y); 
     ctx.rotate(this.angle); 
     ctx.beginPath(); 
     ctx.rect(-25, -25, 50, 50); 
     ctx.closePath(); 
//  ctx.fillStyle = "rgba(255,0," + 150 + "," + mouseX/1024 + ")"; 
     ctx.fillStyle = "rgba(255,0," + mouseY/768*255 + "," + mouseX/1024 + ")"; 
     console.log(mouseY/768*255); 
     ctx.fill(); 
     ctx.restore(); 
     this.inc = this.inc + this.speed; 
     this.angle = this.inc % 360/57.2958; 

    } 

    function draw() { 
     ctx.clearRect(0, 0, 1024, 768); 
     for (var i = 0; i < squares.length; i++) { 
      var myBox = squares[i]; 
      myBox.update(); 
     } 
     requestAnimationFrame(draw); 
    } 

    draw(); 
</script>

Source

2017-05-14 RonH

Essayez de le déboguer: console.log ("RGBA (255,0," + mouseY/768 * 255 + "" + mouseX/1024 + ")") pour voir pourquoi la valeur est incorrecte. – Zydnar

Les valeurs Rouge, Vert et Bleu doivent être des entiers. Vous pouvez en faire des entiers en utilisant la méthode Math.floor(). Voici votre code fixe.

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title> My Animation </title> 
 
</head> 
 

 
<body> 
 
    <canvas id="myCanvas" height="768" width="1200"></canvas> 
 
</body> 
 
<script> 
 
    var mainCanvas = document.getElementById("myCanvas"); 
 
    var ctx = mainCanvas.getContext('2d'); 
 
    var canvasWidth = mainCanvas.width; 
 
    var canvasHeight = mainCanvas.height; 
 
    // the array of squares 
 
    var squares = []; 
 

 
    var mouseX = 1200; 
 
    var mouseY = 768; 
 
    var putPoint = function (e) { 
 
     // update mouse 
 
     mouseX = e.clientX; 
 
     mouseY = e.clientY; 
 
    } 
 
    mainCanvas.addEventListener("click", putPoint); 
 

 
    for (i = 0; i < 100; i++) { 
 
     squares.push(new Square()); 
 
    } 
 

 
    function Square() { 
 
     this.x = Math.random() * 1024; 
 
     this.y = Math.random() * 768; 
 
     this.inc = Math.random() * 360; 
 
     this.angle = 0; 
 
     this.speed = Math.random() * 6 - 3; 
 
    } 
 

 
    Square.prototype.update = function() { 
 
     ctx.save(); 
 
     ctx.translate(this.x, this.y); 
 
     ctx.rotate(this.angle); 
 
     ctx.beginPath(); 
 
     ctx.rect(-25, -25, 50, 50); 
 
     ctx.closePath(); 
 
     //ctx.fillStyle = "rgba(255,0," + 150 + "," + mouseX/1024 + ")"; 
 

 
     ctx.fillStyle = "rgba(255,0," + Math.floor(mouseY/768*255) + "," + mouseX/1024 + ")"; 
 
     
 
     //console.log(mouseY/768*255); 
 
     ctx.fill(); 
 
     ctx.restore(); 
 
     this.inc = this.inc + this.speed; 
 
     this.angle = this.inc % 360/57.2958; 
 

 
    } 
 

 
    function draw() { 
 
     ctx.clearRect(0, 0, 1024, 768); 
 
     for (var i = 0; i < squares.length; i++) { 
 
      var myBox = squares[i]; 
 
      myBox.update(); 
 
     } 
 
     requestAnimationFrame(draw); 
 
    } 
 

 
    draw(); 
 
</script>

Source

2017-05-14 10:29:14

Merci Abhinav, ça marche - j'aurais dû y penser! – RonH

Alors s'il vous plaît accepter comme la réponse; D –

Il est juste que les valeurs RVB doivent être entier, selon spécification CSS: w3schools. Math.floor votre valeur B et ça va marcher.

Source

2017-05-14 10:16:00

w3school n'est pas lié à w3c et ne représente pas du tout les spécifications. Les spécifications CSS3 [sont ici] (https://drafts.csswg.org/css-color-3/#numerical) et en effet ont limité la notation aux valeurs entières, alors que [spécifications CSS4] (https://drafts.csswg.org/css-color/# funcdef-rgb) autorise maintenant la notation flottante, qui est supportée par FF. – Kaiido

Mise à jour en temps réel de rgba en utilisant clientX/clientY?

Répondre

Questions connexes