8-1 canvas动画做出来了 但是还是不名白
来源：8-1 Canvas动画
JH鹰
2017-12-07 19:54:54
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvas动画</title>
<style>
canvas{background-color:lightblue;}
</style>
</head>
<body>
<canvas width="800px" height="800px" id="canvas">您的浏览器不支持canvas</canvas>
<script>
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
//补充代码
var posx=0,posy=0;dir=1,isMouseInRect=false;
// isMouseInRect 是自己定变量的还是实码
canvas.onmousemove = function(e){
var mouseX=e.offsetX; //什么意思
var mouseY=e.offsetY; //什么意思
if(mouseX > posx+400 && mouseX<posx +450 && mouseY > posy && mouseY < posy+50){
isMouseInRect=true;
}else {
isMouseInRect =false;
}
}
setInterval(function () {
if (!isMouseInRect) {
posy+= 10 * dir;
}
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.fillStyle="green";
ctx.fillRect(posx+400,posy,50,50);
if (posy + 50>= canvas.width) {
dir=-1;
}else if(posy<=0){
dir=1;
}
},100)
</script>
</body>
</html>
1回答
-
樱桃小胖子
2017-12-07
由于Canvas上鼠标事件中不能直接获取鼠标在Canvas的坐标，所获取的都是基于整个屏幕的坐标。所以通过鼠标事件e.pageX与e.pageY来获取鼠标位置，然后通过Canvas. getBoundingClientRect()来获取Canvas对象相对屏幕的相对位置，通过计算得到鼠标在Canvas的坐标， isMouseInRect 是自己定义的，你也可以定义成其他的，祝学习愉快~
0
相似问题
回答 3
回答 1