html5画布镜像对象

Question

I wrote the following code in my text editor:我在文本编辑器中编写了以下代码：

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

In this code, the canvas is supposed to show a mirrored object, but the canvas is completely blank.在这段代码中，画布应该显示一个镜像对象，但画布完全是空白的。 Can someone please tell me what I did wrong/ PLease and thank you.有人可以告诉我我做错了什么/请和谢谢。

Answer 1

Your code was full of a number of small errors, most of which were typos.您的代码充满了许多小错误，其中大部分是拼写错误。 You were also failing to specify the image URL as the src of the new Image() constructor.您也未能将图像 URL 指定为new Image()构造函数的src 。

The code below fixes these issues and provides visual output on the canvas.下面的代码修复了这些问题并在画布上提供了可视化输出。 I'm not sure exactly what mirror effect you're going for, but hopefully this sets you on the right path.我不确定你想要什么样的镜像效果，但希望这能让你走上正确的道路。

 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 个解决方案

解决方案1
0 2018-02-14 16:36:30

html5画布镜像对象

问题描述

1 个解决方案

解决方案1 0 2018-02-14 16:36:30

解决方案1
0 2018-02-14 16:36:30