HTML5画布镜像对象

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

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

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

您的代码充满了许多小错误，其中大多数是错别字。您也无法将图像URL指定为new Image()构造函数的src。

下面的代码解决了这些问题，并在画布上提供了视觉输出。我不确定您要想要什么镜子效果，但希望这会让您走上正确的道路。

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>

相关内容

最新更新

热门标签：