canvas--案例（星）
没事的时候在看些canvas方面的文章，并写了一两个小demo。。下面的代码就是其中之一
（感兴趣的先去看小姐姐的原文吧，从canvas基础讲起且非常详细，真的很不错o.o 小姐姐好像是饿了么的大神来着。。。仰望~~）
https://juejin.im/post/5986d6e1f265da3e241e8cdb（尊重原创）
如果在你只想要看代码，个人感觉自己写的要比小姐姐的原码要清晰简洁点（lian pi 真特么厚。。。哈哈哈哈h）
Talk is cheap, show me the code
总结：（写在前面吧）
在使用缓存Canvas优化Star移动时，我的做法是在cache方法中创建缓存画布换完star将画布对象return出来，初衷是为了降低代码的复杂度，将代码模块化；但是好像动画卡了（应该是和每次都创建画布有关。。。~~~~(>_<)~~~~），最后还是和原代码一样在全局上创建缓存画布（这样写动画效果很流畅，唉之后再想想如何简化代码写法吧^_^切。。就是偷懒。。哼！）
一点建议：（对自己说的。。）
在借鉴和学习别人的案例时，最好将整体效果或功能,划分成各个小块功能去逐一实现；对于某一小块功能的实现最好先自己思考如何实现（反正也不是让你一下想好实现全部功能，
感觉原作者自己写的时候也不是一蹴而就的吧），功能实现后再和原代码相互印证（不同思想的碰撞bulabula。。。）学习大多数知识时也多是如此吧；
引以为戒：（批斗大会。。）
刚开始敲代码的时候，总是想着如何快速实现全部效果（。。。干巴巴的，麻麻赖赖的，一点都不圆圆润，盘他~~~^_^），没有用自己掌握的canvas基础知识去想如何实现功能，反而在很多地方卡壳了（不是很关键的地方纠结）花费的时间更长了；
同一个功能的代码，要相信自己思考后所写的，不一定比原代码差哦（独立思考很重要），不要总是纠结为什么和别人的不一样。。。其实原代码里有很多地方变量的对应以及函数的声明是不必要的而且有点杂乱，强迫症不能忍~~（所以相信自己用心写的代码）。
对于工作的反思（懒得再写一篇博客了。。就放着了，怎样~.~hhhh）
之前一直觉得只要把产品方提的需求做出来就大吉大利今晚吃鸡了，即使是之前没做过的或者不懂的（不要紧，可以搬前辈大神们的嘛。。），实际工作中遇到问题多是如此，这样功能或效果同样达到了要求（也仅仅是达到要求），但自己并没有规划如何开发，导致所写的代码真的是不忍直视（很za乱~~），因为多数有点东平西凑的嫌疑，感觉不是自己在驭使代码，更多的是个被驾驭的角色。。。
希望自己在以后的板砖中，多花点时间去规划如何去做，戒骄戒躁a le。。。
/**
* 敲代码的时候有个缺点，遇到一些代码写法时，总是想着为什么这样写、凭什么要这样写、有没有其他的写法了bulabula。。。盘他~。~
* 毫无疑问这种刨根问底的学习是很好的优点，但是从遇到疑问到查阅资料解决疑问是需要时间成本的。
* 假如说你只是遇到一两个疑问而恰巧通过查阅资料又快速的解决了它，那么很幸运你又get到了新知识，替你高兴。。。
* 但实际搬砖的过程中你会遇到很多的疑问，并且查阅资料也不是这么快可以解决的，而此时你还非要去全部解决掉（一根筋。。。），查啊查..
* 最后花费大量的时间（最气人的是可能疑问并没有解决掉。。呜呜呜...），
* 人的精力是有限的,本来雄赳赳气昂昂的准备搬砖来着,最后却被这样那样的问题所困扰，磨灭了兴致导致不了了之,
* 虽然会有些收获但是这种付出和收获，显然不是最优的方式，所以在搬砖的时候不要过于纠结，还没做出来就想着怎么去优化，哼！。。就是耍流氓（不如先定他个小目标----一鼓作气把功能盘出来再说），
* 把疑问先找个地方记下来（' 小本本 ' 了解一下。。。哈哈哈），等功能全部实现再回过头来解决掉'小本本'上记得内容，
* 最后功德圆满--成功秃顶--步入高级搬砖猿--迎娶心中女神--成为人生赢家。。。
*
*/
/**em。。。大家好!我是'小本本'（手动滑稽~）
* 疑问：
* 1. clientX、layerX、offsetX、pageX、screenX、x 的区别？。。。
*/
下面献上代码，欢迎各位大神review（害羞?~。~）
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>canvas--again</title><style>* {margin: 0;padding: 0;overflow: hidden;}html,body {width: 100%;height: 100%;/* background: linear-gradient(to top, palevioletred 0%, #fff 100%); */background: no-repeat linear-gradient(to bottom, #dcdcdc 0%, #000 100%);}</style>
</head>
<body><canvas id="canvas"></canvas>
</body>
<script>(function(win, doc) {const maxW = win.innerWidth;const maxH = win.innerHeight;const maxSize = 5;const minSize = 1;let isMoving = false;let timer = null;let canvas = doc.getElementById('canvas');canvas.width = maxW;canvas.height = maxH;let ctx = canvas.getContext('2d');let stars = []; // 存放作为背景使用的星星let move_stars = []; // 存放鼠标移动时绘制的星星function CanvasStar(num) {this.num = num;};CanvasStar.prototype = {render() {for (let i = 0; i < this.num; i++) {let alpha = Math.random() + 0.1;stars[i] = new Star(i, getOneRandom(maxW), getOneRandom(maxH), getOneRandom(maxSize, minSize), true, alpha);}animate();}};function Star(id, x, y, r, isCache, dot_alpha) {this.id = id;this.x = x;this.y = y;this.r = r;this.dot_alpha = dot_alpha;this.show = .5; // 作用：控制 鼠标绘制点的隐藏this.direct = getOneRandom(180) + 180;this.isCache = isCache;this.cacheCanvas = doc.createElement('canvas');this.ctx_cache = this.cacheCanvas.getContext('2d');if(isCache) {this.cache();}};Star.prototype = {draw() {// 绘制一个Starif(!this.isCache) {let alpha = Math.random() + 0.1;ctx.save();ctx.beginPath();ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI, false);ctx.closePath();ctx.shadowColor = '#fff';ctx.shadowBlur = 2 * this.r;ctx.fillStyle = `rgba(255, 255, 255, ${ this.dot_alpha })`;ctx.fill();ctx.restore();}else {ctx.drawImage(this.cacheCanvas, this.x - 3 * this.r, this.y - 3 * this.r)}},move() {this.y -= 0.25;if(this.y < -10) {this.y = maxH + 10;}this.draw();},// 使鼠标绘制的点抖动起来
shake(arr) {this.show -= 0.01;if(this.show < 0) {return;}let speed = .5;this.x += Math.cos(this.direct * Math.PI / 180) * speed;this.y += Math.sin(this.direct * Math.PI / 180) * speed;this.draw();this.link();},link() {if(!this.id) return;let len = move_stars.length;// 关键思想：取当前id，之前的4个点，每绘制一次就向前取4个点，以此类推// 而不是move_stars最后的四个点，否则的话只有最后几个点会被连接起来let arr = move_stars.slice(this.id - 3, this.id);let endIdx = arr.length - 1;ctx.save();for(let i = endIdx; i >= 0; i--) {if(i == endIdx && !!arr[endIdx]) {ctx.moveTo(arr[endIdx].x, arr[endIdx].y);ctx.beginPath();ctx.lineTo(this.x, this.y);}if(i != endIdx && !!arr[i] && arr[i].show > 0) ctx.lineTo(arr[i].x, arr[i].y);}ctx.closePath();ctx.strokeStyle = 'rgba(255, 255, 255, 0.125)';ctx.stroke();ctx.restore();},cache() {this.cacheCanvas.width = 6 * this.r;this.cacheCanvas.height = 6 * this.r;this.ctx_cache.save();this.ctx_cache.beginPath();this.ctx_cache.arc(this.r * 3, this.r * 3, this.r, 0, 2 * Math.PI, false);this.ctx_cache.closePath();this.ctx_cache.shadowColor = '#fff';this.ctx_cache.shadowBlur = 2 * this.r;this.ctx_cache.fillStyle = `rgba(255, 255, 255, ${this.dot_alpha})`;this.ctx_cache.fill();this.ctx_cache.restore();}};// 动画function animate() {ctx.clearRect(0, 0, maxW, maxH);let len = stars.length;for(let i = 0; i < len; i++) {stars[i].move();}let len2 = move_stars.length;if(isMoving) {for(let i = 0; i < len2; i++) {if(move_stars[i]) move_stars[i].shake(move_stars);}}else {move_stars = []}requestAnimationFrame(animate);};// 获取区间内的随机数function getOneRandom(max, min = 0) {return Math.floor(Math.random() * (max - min) + min);};// 获取正负号function getSign() {return Math.random() > .5 ? -1 : 1;};// 鼠标移动事件doc.addEventListener('mousemove', function(e) {let x = e.clientX, y = e.clientY;// 控制绘制密度 以及点之间的距离 两个重要的点// 密度是控制绘制的数量 dis_x = Math.abs(x - pre_star.x);// 距离是在已绘制的点基础上、控制点的间距// 控制绘制密度 和 控制点之间的距离 不是一个功能哦（需要实际操作去体会， 文字很难表述~.~）// 没有控制距离的话 绘制的图形，太规则了，不够分散 x = x + getSign() * getOneRandom(50)
let len = move_stars.length;let dis_x, dis_y;if(!len) {move_stars.push( new Star(len, x, y, getOneRandom(maxSize, 3), true, 1) );}if(move_stars[len - 1]) {// 当前的星还没有push到move_stars里，所以上个星是move_stars[len - 1]let pre_star = move_stars[len - 1];if(pre_star) {dis_x = Math.abs(x - pre_star.x);dis_y = Math.abs(y - pre_star.y);}x = x + getSign() * getOneRandom(50);y = y + getSign() * getOneRandom(50);if(dis_x > 5 && dis_y > 5) move_stars.push( new Star(len, x, y, getOneRandom(maxSize, minSize), true, 1) );}isMoving = true;clearInterval(timer); // 清除上一次的定时器（此时还没触发）timer = setInterval(function() {isMoving = false;clearInterval(timer); // 鼠标停止再清除下定时器}, 500)}, false);window.CanvasStar = CanvasStar;})(window, document);
</script>
<script>let canvasStar = new CanvasStar(200);canvasStar.render();
</script><script>
/**小本本* 疑问：* 1. clientX、layerX、offsetX、pageX、screenX、x 的区别？
*/
</script>
</html>~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~已实践 2019/01/23
转载于:https://www.cnblogs.com/Evermenot/p/10290404.html
canvas--案例（星）相关推荐
- 应用案例 | 星舆高精度定位器在港口车辆定位管理的应用案例
案例简介:星舆高精度定位器在智慧港口中的应用 应用时间:2019年下半年 应用地点:华南某大型智慧港口码头区域 项目简讯 位于华南区域的**港是粤港澳大湾区的中心点,也是能靠泊世界最大集装箱船的码头之 ...
- html5绘制五环,浅析HTML5的Canvas——案例绘制
1. Canvas绘制五环 //1.获取canvas和上下文 var canvas = document.getElementById('canvas'); var ctx = canvas.getC ...
- HTML5 Canvas的简单使用
目录 Canvas教程文档 Canvas的使用 1. Canvas基本绘画 2. Canvas画一个时钟 3. Canvas绘制黑客入侵效果 4. Canvas绘制星星特效 5. Canvas网页涂鸦 ...
- canvas插件_HTML系列之-HTML5新元素之Canvas详解
课程简介: 课程目标:通过本课程学习,掌握HTML5中图形绘制canvas的基本原理和使用,并利用canvas解决实际相关问题. 适用人群:具有一定html.css.javascript开发基础的人员 ...
- Echarts5.3.2可视化案例-应用篇
Echarts5.3.2可视化案例-应用篇 Canvas案例 SVG案例 Zrender基本案例 Echarts简介 官网介绍 Echarts案例 Echarts案例 1.Echarts样式主题,显示 ...
- 赏析 | 那些刷屏朋友圈的H5案例们（Top15）
2017年秀H5赏析.排名不分先后.尽可能多得挑选了不同展现形式.或是不同行业的案例.点击相应的图片即可查看案例(本文适合手机端浏览). 人 工 智 能 类 ▲ 点击图片进入案例 美图秀秀:妙啊!史上 ...
- HTML5中的canvas动画以及地理定位
Canvas 什么是canvas? canvas(画布) 是可以使用Javascript来绘制图形的html元素. 基本的语法结构: <canvas id="" width= ...
- Canvas网页涂鸦板再次增强版
目录 第一版Canvas涂鸦板 第二版Canvas涂鸦板 第三版Canvas涂鸦板 体验涂鸦板 第一版Canvas涂鸦板 实现功能:在涂鸦板上鼠标按下去拖动的涂鸦效果 实现思路:监听鼠标按下.移动.松 ...
- HTML5和CSS3-张晨光-专题视频课程
HTML5和CSS3-1663人已学习 课程介绍 HTML5新特性和CSS3的使用案例,从入门到精通. 课程收益 熟练掌握HTML5和CSS3的新特性,赢取未来20年的机会. ...
- 史无前例的 HTML5 资源参考指南
2019独角兽企业重金招聘Python工程师标准>>> 尽管 HTML5 规范在 2014 年之前不会有正式版本,很多设计师已经开始试水高级浏览器已经支持的部分 HTML5 功能.H ...
最新文章
- 职场中有哪些沟通的小技巧？
- 面向站长和网站管理员的Web缓存加速指南
- matlab灰色关联代码,灰色关联分析matlab代码
- 拦截器---SpringMVC学习笔记（十四）
- 洛谷 P3384 【模板】树链剖分
- shell脚本给mysql创建表_shell脚本：实现MySQL创建数据库和删除数据库的脚本
- 190809每日一次
- 荒野行动android模拟,荒野行动用模拟器玩教程 荒野行动模拟器不支持机型解决方法...
- 如何从python官网下载模块-Python各种模块下载及安装配置
- 如何做好项目进度管理
- opencv codebook学习
- 2020 Jiangsu Collegiate Programming Contest-A.Array
- 基本的LC串联和并联振荡电路分析
- ZROI 2018 ZYB和售货机（goods）
- Xcode9 通过无线链接调试，亲测成功
- 无线抄表火热，ZigBee暂输于专用协议[转]
- C++ Learn from菜鸟教程
- 阿里巴巴矢量图标库icon图标在线引用
- 2019新版《黑马web前端课程+项目实践课程》
- 水仙花案例与嵌套循环案例