猿问

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

弹跳后改变球的颜色并使球成为图像

所以我想用 HTML 和 Javascript 制作 DVD 弹跳屏幕，但我无法让球成为 DVD 标志并在球或图像发生弹跳时更改颜色。有谁知道如何将球更改为图像并在发生弹跳时更改其颜色？


<html>

    <head>

    </head>

    

    <body>

        <script>

            var context;

            var x=100;

            var y=100;

            var dx=5;

            var dy=2;


            function init()

            {

              context= myCanvas.getContext('2d');

              setInterval(draw,20);

            }


            function draw()

            {

                //base_image = new Image();

                //base_image.src = 'dvd.png';

                //context.drawImage(base_image, 100, 100);

                //base_image.arc(x,y,20,0,Math.PI*2,true);

                

                

                context.clearRect(0,0, 600,600);

                context.beginPath();

                context.fillStyle="#0000ff";

                //Draws a circle of radius 20 at the coordinates 100,100 on the canvas

                context.arc(x,y,20,0,Math.PI*2,true); 

                context.closePath();

                context.fill();

                

                

                // Boundary Logic

                if (x < 0 || x > 600){

                    dx = -dx;

                    context.fillStyle="#77ff00";

                }

                if (y < 0 || y > 600){

                    dy = -dy;

                }

                x+=dx;

                y+=dy;

            }

        </script>

        

        //<img src="dvd.png" id="dvd" width="100" height="100">

        <body onLoad="init();">

          <canvas id="myCanvas" width="600" height="600" >

          </canvas>

    </body>

</html>


慕仙森
浏览 135回答 1
1回答

千巷猫影

干得好。我稍微编辑了你的代码。<html>&nbsp; &nbsp; <head>&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; </head>&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; <body onLoad="init();">&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; <script>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var context;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var x=100;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var y=100;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var dx=5;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var dy=2;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var image;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var image_height = 100;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var image_width = 100;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var myCanvas;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; function init()&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; myCanvas = document.getElementById("myCanvas");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; context= myCanvas.getContext('2d');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; image = new Image();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; image.onload = function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; context.drawImage(image, x,y, image_width, image_height);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; image.src="https://img.icons8.com/ios/452/dvd-logo.png";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setInterval(draw,20);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; function draw()&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; context.clearRect(0,0, 600,600);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; context.drawImage(image, x,y, 100, 100);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; context.globalCompositeOperation = "source-in";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // draw color&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var right_bound = 600 - image_width;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var bottom_bound = 600 - image_height;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // Boundary Logic&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (x < 0 || x > right_bound){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dx = -dx;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;context.fillStyle = "#09f";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (y < 0 || y > bottom_bound){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dy = -dy;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;context.fillStyle = "#ff0";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; context.fillRect(0, 0, 600, 600);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //reset back to default global composite&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; context.globalCompositeOperation = "source-over";&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; x+=dx;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; y+=dy;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; </script>&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; <canvas id="myCanvas" width="600" height="600"> </canvas>&nbsp; &nbsp;</body>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</html>
0
打开App，查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript