Question

我在矢量中有一个简单的形状，我想只为形状的2个顶点设置动画，以便在悬停时水平移动鼠标。我想用html5 canvas在我的网站上发布它。有人可以帮我理解如何做到这一点（可能很容易）？谢谢！

的Nik

Answer 1

这是一个简单的过程：

在画布上收听mousemove个事件。
清除画布并重新绘制与鼠标位置x对齐的图像。

这是一个让你在画布元素上用左耳水平拖动皮卡丘的例子：

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
var $canvas=$("#canvas");
var canvasOffset=$canvas.offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;

var imgLeft=3;
var imgTop=100;

var img=new Image();
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/multple/pikachu.png";
function start(){
  draw(0);
  $("#canvas").mousemove(function(e){handleMouseMove(e);});
}

function draw(x){
  ctx.clearRect(0,0,cw,ch);
  ctx.drawImage(img,x-imgLeft,imgTop);
}

function handleMouseMove(e){
  // tell the browser we're handling this event
  e.preventDefault();
  e.stopPropagation();

  var mouseX=parseInt(e.clientX-offsetX);

  draw(mouseX);
}

body{ background-color: ivory; }
#canvas{border:1px solid red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h4>Move the mouse to move Pikachu by the ear</h4>
<canvas id="canvas" width=300 height=300></canvas>

在鼠标悬停时跟踪鼠标的2个形状的动画

1 个答案: