Javascript html5画布镜像对象_Javascript_Html5 Canvas

Javascript html5画布镜像对象

javascript html5-canvas

Javascript html5画布镜像对象,javascript,html5-canvas,Javascript,Html5 Canvas,我在文本编辑器中编写了以下代码： <!DOCTYPE HTML><html> <head> <script> window.onload = function() { var canvas = document.getElementById("canvasArea"); var context = canvas.getContext("2d")

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

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


window.onload=函数（）
{
var canvas=document.getElementById（“canvasArea”）；
var context=canvas.getContext（“2d”）；
var ball=新图像（）；
var smallImage=”https://i.warosu.org/data/sci/img/0076/83/1448614341262.png";
var-ballXPos=75；
var ballYPos=15；
var球宽=90；
var ballHeight=90；
var reflectAdj=3.5；
var反射系数α=0.4；
var reflect Y=（2*ballYPos）+（2*（ballHeight reflectAdj））；
var gradLV=context.createLinearGradient（0,0,0，canvas.height）；
ball.onload=函数（）
{
渐变加色停止（0，“淡天蓝”）；
渐变添加颜色停止（.3，“橙色”）；
渐变添加颜色停止（1，“蓝色”）；
context.fillStyle=gradLV；
fillRect（0，0，canvs.width，canvas.height）；
上下文翻译（0，反射）；
上下文。量表（1，-1）；
context.globalAlpha=reflectAlpha；
drawImage（ball、ballXpos、ballYpos、ballWidth、ballHeight）；
}
}
您的浏览器当前不支持HTML5画布。

在这段代码中，画布应该显示镜像对象，但画布是完全空白的。有人能告诉我我做错了什么吗？/请告诉我，谢谢你。

你的代码充满了许多小错误，其中大部分都是打字错误。您还未能将图像URL指定为

new image（）

构造函数的

src

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

window.onload=function（）{
var canvas=document.getElementById（“canvasArea”）；
var context=canvas.getContext（“2d”）；
var ball=新图像（）；
ball.src=”https://i.warosu.org/data/sci/img/0076/83/1448614341262.png";
var-ballXPos=75；
var ballYPos=15；
var球宽=90；
var ballHeight=90；
var reflectAdj=3.5；
var反射系数α=0.4；
var反射率=（2*ballYPos）+（2*（ballHeight reflectAdj））；
var gradLV=context.createLinearGradient（0,0,0，canvas.height）；
ball.onload=函数（）{
渐变加色停止（0，“淡天蓝”）；
渐变添加颜色停止（.3，“橙色”）；
渐变添加颜色停止（1，“蓝色”）；
context.fillStyle=gradLV；
context.fillRect（0,0，canvas.width，canvas.height）；
上下文翻译（0，反射）；
上下文。量表（1，-1）；
context.globalAlpha=reflectAlpha；
drawImage（ball、ballXPos、ballYPos、ballWidth、ballHeight）；
}
}


您的浏览器当前不支持HTML5画布。

首先，请尝试修复这么多错误，尝试使用console.log进行调试，甚至触发ball.onload。变量反映Y->致命错误。context.drawImage（ball、ballXpos、ballYpos、ballWidth、ballHeight->一些变量甚至不存在！输入错误，输入错误太多。您试图完全盲编码。。