所以我想用 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>
<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>
添加回答
举报
0/150
提交
取消