canvas-图片鼠标移动

canvas-图片鼠标移动

<canvas id="c3" width="500" height="400"></canvas>
  <script>
    var c3=document.getElementById("c3");
    var ctx=c3.getContext("2d")
    // 1.创建图片对象
    var p3=new Image();
    // 2.下载图片
    p3.src="../res/p3.png"
    // 3.绑定下载成功事件onload
    p3.onload=function(){
    //图片宽，高
    var w=p3.width;
    var h=p3.height;
    // 4.为画布绑定鼠标移动事件
    c3.onmousemove=function(event){
     // 清空画布
     ctx.clearRect(0,0,500,400);
    // 5.获取鼠标中心位置
    var x=event.offsetX-(w/2);
    // 5.1判断x,y是否超出边框
    if(x>500-w){
      x=500-w;
    } 
    var y=event.offsetY-(h/2); 
    if(y>400-h){
      y=400-h;
    } 
    // 6.赋值图片x,y
    ctx.drawImage(p3,x,y)  
    }    
    }
    
  </script>