clientX/clientY를 사용하는 rgba의 실시간 업데이트?

아래 코드는 47 행이 48 행으로 대체 될 때까지 (즉 fillStyle 계산) 작동합니다. 어떤 이유로 rgba의 파란색 부분을 계산하기 위해 clientY를 사용하려고 시도하지만, 알파를 계산하는 것이 문제가되지 않습니다.clientX/clientY를 사용하는 rgba의 실시간 업데이트?

<!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>

출처

2017-05-14 RonH

시도가를 디버깅 : CONSOLE.LOG ("RGBA (255,0를"쥐의/768 * 255 + ','+ mouseX/1,024 + ")는"+) 볼 왜 가치가 부정확 한가? – Zydnar

빨강, 녹색 및 파랑 값은 정수 여야합니다. Math.floor() 메서드를 사용하여 정수로 만들 수 있습니다. 아래는 고정 코드입니다.

<!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>

출처

2017-05-14 10:29:14

감사합니다 Abhinav, 그 작품 - 나는 그 생각을해야만 했어! – RonH

그런 다음 답으로 받아 들여주세요; D –

CSS 사양 : w3schools에 따르면 RGB 값은 정수 여야합니다. B 값을 Math.floor하면 효과가 있습니다.

출처

2017-05-14 10:16:00

w3school는 w3c와 관련이 없으며 스펙을 전혀 나타내지 않습니다. CSS3 스펙 [여기에 있습니다] (https://drafts.csswg.org/css-color-3/#numerical)이며 실제로는 정수 값으로 제한됩니다. [CSS4 specs] (https://drafts.csswg.org)/css-color/#funcdef-rgb)는 이제 FF에서 지원되는 부동 표기법을 명시 적으로 허용합니다. – Kaiido

clientX/clientY를 사용하는 rgba의 실시간 업데이트?

답변

관련 문제