<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
canvas{
background:#9AA4FF;
}
</style>
</head>
<body>
<h3>canvas画布：随鼠标移动的图像</h3>
<canvas id="HuaBu">
您的浏览器不支持canvas画布
</canvas>
<script src="js/jquery-1.11.1.js"></script>
<script>
var w=600;
var h=400;
HuaBu.width=w; //画布的宽
HuaBu.height=h; //画布的宽
//创建画布
var ctx=HuaBu.getContext("2d");
var peo=new Image();
peo.src="imgs/peo.png";
peo.onload=function () {
//为canvas元素绑定事件监听：让图像画在鼠标移动位置
HuaBu.onmousemove=function (e) {
var x=e.offsetX;
var y=e.offsetY;
var peoWidth=peo.width;
var peoHeight=peo.height;
console.log(x+"--"+y);
ctx.clearRect(0,0,w,h); //清除画布
ctx.drawImage(peo,x-peoWidth/2,y-peoHeight/2); //画图像
};
}
</script>
</body>
</html>
扫一扫
936
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
