先上 demo:
http://en.jsrun.net/W5iKp/show
这两天我一直在研究这个动画,花了大量的时间来想是如何实现的,
一开始我是想在进入 canvas 时按时间来用 lineTo 绘出六边形,退出时反方向再绘出白色的一条线;
想这样:
- function getSpeed(x, y) {
- if (x < 100) {
- if (y > 150) {
- vx = Math.sqrt(3)
- } else if (y > 50) {
- vx = 0;
- } else {
- vx = -Math.sqrt(3);
- }
- vy = 1
- } else {
- if (y < 50) {
- vx = -Math.sqrt(3);
- } else if (y < 150) {
- vx = 0;
- } else {
- vx = Math.sqrt(3)
- }
- vy = -1;
- }
- return {
- Vx: vx,
- Vy: vy
- };
- }
进入canvas 根据 x,y 的坐标获取不同的速度;
然后再实现的过程中发现了很多问题,比如在在pixelRatio为1.x的屏幕上,线条显示粗细的问题,在绘制的时候会出现毛边效果,也会出现线条过粗的情况;
首先解决这个问题我是用 重置高度来实现的 ,如果换成context.clearRect(0,0, 200, 200)线条就会发生变化
也可以用
- canvas.width = width * window.devicePixelRatio
- canvas.style.width = width + 'px';
来改变,这个 three.js 的解决方案,
后来和我同学交流了一下,他告诉了我一个我没用过的 api:
这是链接:https://developer.mozilla.org/zh-CN/docs/web/API/CanvasRenderingContext2D/setLineDash;
这确实是一个更好的方案,以前没发现这个,今天下午趁着空做好了这个动画:
html:
- <canvas id="canvas" width="200" height="200" style="border:1px solid #000"></canvas>
js:
- var canvas = document.getElementById("canvas");
- var context = canvas.getContext("2d");
- var offset;
- var flag = true;
- function animate() {
- var myAnimation = requestAnimationFrame(animate);
- offset += (flag === true) ? 10 : -10;
- if (offset >= 0) {
- offset = 0;
- }
- if (offset <= -600) {
- offset = -600 cancelAnimationFrame(myAnimation);
- }
- canvas.height = 200;
- context.strokeStyle = "#000";
- context.moveTo(100, 200);
- context.lineTo(100 + 50 * (Math.sqrt(3)), 150);
- context.lineTo(100 + 50 * (Math.sqrt(3)), 50);
- context.lineTo(100, 0);
- context.lineTo(100 - 50 * (Math.sqrt(3)), 50);
- context.lineTo(100 - 50 * (Math.sqrt(3)), 150);
- context.closePath();
- context.setLineDash([600, 600]);
- context.lineDashOffset = -offset;
- context.stroke();
- }
- canvas.addEventListener('mouseenter',
- function() {
- offset = -600;
- flag = true animate();
- }) canvas.addEventListener('mouseleave',
- function() {
- flag = false;
- })
如果不懂
- context.setLineDash([600, 600]);
- context.lineDashOffset = -offset;
- 这两个是什么意思可以看看文档,确实是一个好用的东西;
- 本地 demo:
来源: http://www.cnblogs.com/Grewer/p/7921149.html