Question

我在文本编辑器中编写了以下代码：

<!DOCTYPE HTML><html>
    <head>
        <script>

        window.onload = function()
        {
            var canvas = document.getElementById("canvasArea");
            var context = canvas.getContext("2d");

            var ball = new Image();
            var smallImage = "https://i.warosu.org/data/sci/img/0076/83/1448614341262.png";

            var ballXPos = 75;
            var ballYPos = 15;
            var ballWidth = 90;
            var ballHeight = 90;

            var reflectAdj = 3.5;
            var reflectAlpha = .4;
            var reflect Y = (2*ballYPos) + (2*(ballHeight-reflectAdj));

            var gradLV = context.createLinearGradient(0, 0, 0, canvas.height);

            ball.onload = function()
            {
                gradLV.addColorStop( 0, "lightskyblue");
                gradLV.addColorStop(.3, "orange");
                gradLV.addColorStop(1, "blue");

                context.fillStyle = gradLV;
                context.fillRect(0, 0, canvs.width, canvas.height);

                context.translate(0, reflectY);

                context.scale(1,-1);

                context.globalAlpha = reflectAlpha;

                context.drawImage(ball, ballXpos, ballYpos, ballWidth, ballHeight);
            }
        }
        </script>
    </head>
    <body>
        <div style = "width:400px;  height:210px; margin:0 auto; padding:5px;">
            <canvas id = "canvasArea" width = "400" height = "210"
            style = "border:2px solid black">
                Your browser doesn't currently support HTML5 Canvas.
            </canvas>
        </div>
    </body>
</html>

在此代码中，画布应显示镜像对象，但画布完全空白。有人可以告诉我我做错了什么/请说谢谢。

Answer 1

您的代码中包含许多小错误，其中大多数都是拼写错误。您也未能将图片网址指定为src构造函数的new Image()。

下面的代码修复了这些问题并在画布上提供了可视化输出。我不确定你想要的是什么样的镜面效果，但希望这会让你走上正确的道路。

window.onload = function() {
  var canvas = document.getElementById("canvasArea");
  var context = canvas.getContext("2d");

  var ball = new Image();
  ball.src = "https://i.warosu.org/data/sci/img/0076/83/1448614341262.png";

  var ballXPos = 75;
  var ballYPos = 15;
  var ballWidth = 90;
  var ballHeight = 90;

  var reflectAdj = 3.5;
  var reflectAlpha = .4;
  var reflectY = (2*ballYPos) + (2*(ballHeight-reflectAdj));

  var gradLV = context.createLinearGradient(0, 0, 0, canvas.height);

  ball.onload = function() {
    gradLV.addColorStop( 0, "lightskyblue");
    gradLV.addColorStop(.3, "orange");
    gradLV.addColorStop(1, "blue");

    context.fillStyle = gradLV;
    context.fillRect(0, 0, canvas.width, canvas.height);

    context.translate(0, reflectY);

    context.scale(1,-1);

    context.globalAlpha = reflectAlpha;

    context.drawImage(ball, ballXPos, ballYPos, ballWidth, ballHeight);
  }
}

<div style = "width:400px;  height:210px; margin:0 auto; padding:5px;">
  <canvas id = "canvasArea" width = "400" height = "210" style = "border:2px solid black">
    Your browser doesn't currently support HTML5 Canvas.
  </canvas>
</div>

html5画布镜像对象

1 个答案: