canvas画布:随鼠标移动的图像

<!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>

原文链接:加载失败,请重新获取