使用 clientX/clientY 实时更新 rgba？

Question

下面的代码一直有效，直到第 47 行被第 48 行替换（即计算 fillStyle）。出于某种原因，尝试使用 clientY 来计算 rgba 的蓝色部分不起作用，而计算 alpha 则不是问题。

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

Answer 1

只是根据 CSS 规范 w3schools，RGB 值应该是整数。 Math.floor 你的 B 值，它会起作用。

Answer 2

红色、绿色和蓝色值应该是整数。您可以使用 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>

使用 clientX/clientY 实时更新 rgba？

Live update of rgba using clientX/clientY?

javascript

canvas

addeventlistener

mouse-position