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（）方法使它们成为整数。以下是您的固定代码。

＆＃13;

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

＆＃13;

使用clientX / clientY实时更新rgba？

2 个答案: