先上 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. Selenium 设置浏览器下载 Firefox 和Chrome

    当我们在使用Selenium运行自动化测试时,偶尔需要用到下载功能,但浏览器的下载可能会弹出下载窗口,或者下载路径不是我们想要保存的位置,所以在通过Selenium启动浏览器时需要做相关的设置,将使这 ...

  2. asp.net C# 实现阿里大鱼和云片网短信接口类

    云片网短信通用类 public class YunpianSMS { public YunpianSMS() { } /// <summary> /// 服务器HTTP地址 /// < ...

  3. label联动checkbox

    label联动checkbox时,若label包含在checkbox外层时label不需for属性,设置label的display属性为block时可以使整个div联动.

  4. Nginx监控-Nginx+Telegraf+Influxb+Grafana

    搭建了Nginx集群后,需要继续深入研究的就是日常Nginx监控. Nginx如何监控?相信百度就可以找到:nginx-status 通过Nginx-status,实时获取到Nginx监控数据后,如何 ...

  5. LeetCode 169. Majority Element (众数)

    Given an array of size n, find the majority element. The majority element is the element that appear ...

  6. ubuntu上安装adt时无法在线安装的问题

    安装了新的ubuntu系统之后,就得重新布置android开发环境了. 找了网上的教程,一步一步做,到了在eclipse上在线下载adt总是出现 Unable to connect to reposi ...

  7. 初探 ELK - 每天5分钟玩转 Docker 容器技术(89)

    在开源的日志管理方案中,最出名的莫过于 ELK 了.ELK 是三个软件的合称:Elasticsearch.Logstash.Kibana. Elasticsearch一个近乎实时查询的全文搜索引擎.E ...

  8. Android: Only the original thread that created a view hierarchy can touch its views 异常

    最近自己再写一个小项目练手,创建一个线程从网络获取数据然后显示在 recyclerView 上.写好后发现页面能够显示,但是有时候会把请求的数据显示过来,有时候不会.点开 android monito ...

  9. 使用Apache Commons Email 发生邮件

    Apache Commons Email的Maven依赖 <!-- https://mvnrepository.com/artifact/org.apache.commons/commons-e ...

  10. [MYSQL] 记一次MySQL性能调优

    最近在做数据迁移工作,已有一堆数据文件,要把这些数据文件写到MySQL 数据库里面去. MySQL数据库上架了一层服务接口,可以直接调用.博主写了一个迁移程序,放在服务器A上. *********** ...