反弹后更改球的颜色并使球成为图像答案

【问题标题】：Change Ball's color after bounce and make the ball an image反弹后更改球的颜色并使球成为图像
【发布时间】：2021-03-06 09:57:17
【问题描述】：

所以我想用 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>

【问题讨论】：

标签： javascript image colors

【解决方案1】：

给你。我稍微修改了你的代码。


<html>
    <head>
    
     
    </head>
    
    <body onLoad="init();">
    
    <script>
            var context;
            var x=100;
            var y=100;
            var dx=5;
            var dy=2;
            var image;
            var image_height = 100;
            var image_width = 100;
            var myCanvas;
          
            function init()
            {
              myCanvas = document.getElementById("myCanvas");
              context= myCanvas.getContext('2d');
              image = new Image();
              image.onload = function() {
                context.drawImage(image, x,y, image_width, image_height);
              }
              
              image.src="https://img.icons8.com/ios/452/dvd-logo.png";
              setInterval(draw,20);
            }

            function draw()
            {
              
                context.clearRect(0,0, 600,600);
                context.drawImage(image, x,y, 100, 100);

                context.globalCompositeOperation = "source-in";

                // draw color
               
                

                var right_bound = 600 - image_width;
                var bottom_bound = 600 - image_height;
                // Boundary Logic
                if (x < 0 || x > right_bound){
                    dx = -dx;
                     context.fillStyle = "#09f";
                }
                if (y < 0 || y > bottom_bound){
                    dy = -dy;
                     context.fillStyle = "#ff0";
                }

                context.fillRect(0, 0, 600, 600);
                //reset back to default global composite
                context.globalCompositeOperation = "source-over"; 

                x+=dx;
                y+=dy;
            }
        </script>
        
    
    <canvas id="myCanvas" width="600" height="600"> </canvas>
   </body>
          
         
</html>

【讨论】：