首頁猿問彈跳后改變球的顏色并使球成為圖像

彈跳后改變球的顏色并使球成為圖像

JavaScript

慕仙森 2023-06-15 15:43:08

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

查看完整描述

1 回答

千巷貓影

TA貢獻1829條經驗獲得超7個贊

干得好。我稍微編輯了你的代碼。

<html>

<head>

</head>

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>

</body>

</html>

反對回復 2023-06-15

1 回答
0 關注
161 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

彈跳后改變球的顏色并使球成為圖像

彈跳后改變球的顏色并使球成為圖像

1 回答

添加回答