先上 demo:

https://grewer.github.io/JsDemo/canvasLine/

这两天我一直在研究这个动画,花了大量的时间来想是如何实现的,

一开始我是想在进入 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:

setLineDash

这是链接: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;
这两个是什么意思可以看看文档,确实是一个好用的东西;
 

canvas动画之动态绘出六边形的更多相关文章

  1. JS canvas标签动态绘制图型

    使用canvas标签动态绘制图型,当点击鼠标时,以鼠标点击的坐标作为图形中心点.当点击数为偶数时画三角形,当点击数为奇数时画五角星 <!DOCTYPE HTML> <html> ...

  2. 简单酷炫的canvas动画

    作为一个新人怀着激动而紧张的心情写了第一篇帖子还请大家多多支持,小弟在次拜谢. 驯鹿拉圣诞老人动画效果图如下 html如下: <div style="width:400px;heigh ...

  3. HTML动画分类 HTML5动画 SVG库 SVG工具 Canvas动画工具

     1.js配合传统css属性控制,可以使用setTimeout或者高级的requestAnimationFrame 2.css3 3.svg 4.canvas(当然,这个还是要配合js)   也许这么 ...

  4. canvas动画:自由落体运动

    经过前面的文章,我们已经能够在canvas画布上画出各种炫酷的图形和画面,但是这些画面都是禁止的,怎么样才能让他们动起来呢? 如何绘制基本图形可以参考:canvas基本图形绘制 如何对基本图形移动旋转 ...

  5. 8个经典炫酷的HTML5 Canvas动画欣赏

    HTML5非常强大,尤其是Canvas技术的应用,让HTML5几乎可以完成所有Flash能完成的效果.本文精选了8个经典炫酷的HTML5 Canvas动画欣赏,每一个都提供全部的源代码,希望对你有所帮 ...

  6. 7个惊艳的HTML5 Canvas动画效果及源码

    HTML5非常强大,尤其是现在大部分浏览器都支持HTML5和CSS3,用HTML5制作的动画也多了起来.另外,Canvas上绘制图形非常简单,本文就分享了一些强大的HTML5 Cnavas动画,一起来 ...

  7. 【原创】测试不同浏览器播放canvas动画的平滑程度

    Canvas无疑是HTML5开放式网络平台最激动人心的技术之一.目前,除了IE8以外,各类浏览器的新版本都支持HTML5 Canvas. 程序员需要通过Javascript调用Canvas API.基 ...

  8. HTML5 Canvas动画效果实现原理

    在线演示 使用HTML5画布可以帮助我们高速实现简单的动画效果.基本原理例如以下: 每隔一定时间绘制图形而且清除图形,用来模拟出一个动画过程,能够使用context.clearRect(0, 0, x ...

  9. 毕达哥拉斯树(pythagorasTree)原理解析及canvas动画实现

    以前就看到了这个东西,由于太忙了最近才有时间来实现这个; 该文章适合有一定 canvas 基础的人阅读; 首先说说他的原理: The construction of the Pythagoras tr ...

随机推荐

  1. 【node】使用nvm管理node版本

    写在前面 nvm(nodejs version manager)是nodejs的管理工具,如果你想快速更新node版本,并且不覆盖之前的版本:或者想要在不同的node版本之间进行切换: 使用nvm来安 ...

  2. ArcGis for flex查询FeatureLayer数据

    1. 首先实例化一个FeatureLayer对象 private var featureLayer:FeatureLayer=new FeatureLayer(); 2.指定FeatureLayer对 ...

  3. win10 uwp 保存用户选择文件夹

    如果我们每次把临时处理的文件保存,都要让用户选择一次,用户会不会觉得uwp垃圾?如果我们每次打开应用,都从某个文件读取,而这个文件不在应用目录和已知的目录,那么每次都需要用户选择,用户会不会觉得uwp ...

  4. UVa12100,Printer Queue

    水题,1A过的 数据才100,o(n^3)都能过,感觉用优先队列来做挺麻烦的,直接暴力就可以了,模拟的队列,没用stl #include <iostream> #include <c ...

  5. vue-cli中如何引入jquery

    前言 虽然vue不推荐直接操作DOM,而且也提供了操作DOM的方式.但是在某些时候还是要用到jquery(囧),那么如何在使用vue-cli的时候引入jquery呢? 安装 国内镜像 cnpm 安装 ...

  6. JPA + SpringData 操作数据库原来可以这么简单 ---- 深入了解 JPA - 3

    原创播客,如需转载请注明出处.原文地址:http://www.cnblogs.com/crawl/p/7718741.html ------------------------------------ ...

  7. JqueryMobile基础之创建页面

    首先简答介绍一下JQueryMobile吧,我觉得用一句话来讲就是可以 "写更少的代码,做更多的事情" : 它可以通过一个灵活及简单的方式来布局网页,且兼容所有移动设备.这也是我自 ...

  8. 对Spring事务一些问题的讨论

    提起spring事务,就会让人联想起四大基本特征,五个隔离级别,七大传播特性.相信大多数人都知道这些东西,但是知道是一回事情,能用好真的是另一回事了.在使用Spring事务的时候,我曾遇到过几个比较严 ...

  9. 笔记-64位dump转32位dump

    下图是从测试拷64位windbg抓的dump文件拖到32位windbg查看线程堆栈信息的效果. 那么我们加载一下wow64exts模块,因为需要这个模块帮助把64位的dump,转换成32位的dump. ...

  10. gops - Go语言程序查看和诊断工具

    想必 Java 的开发者没有不知道或者没用过 jps 这个命令的,这个命令是用来在主机上查看有哪些 Java 程序在运行的. 我刚用 Go 语言程序的时候也很苦恼,我部署在公司服务器上的 Go 程序, ...