HTML5 canvas如何实现代码流瀑布？（附代码）

码农天地 - 2020-06-20 05:53:00

---

本篇文章给大家分享HTML5 canvas代码流瀑布的具体代码。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

在js部分写canvas代码，有详细注释

html部分：

一个canvas元素：

<canvas id="canvas" ></canvas>

css部分：

<style> *{ padding: 0; margin: 0; } canvas{ background-color: #111; } body{ overflow: hidden; }</style>

js部分

<script> var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); // 获取浏览器的宽度和高度 var w = window.innerWidth; var h = window.innerHeight; // 设置canvas的宽高 canvas.width = w; canvas.height = h; // 每个文字的大小 var fontSize = 16; // 一共可以有多少列文字 var col = Math.floor(w / fontSize); // 记录每列文字的y轴坐标 var cpy = []; for(var i = 0;i< col; i++) { cpy[i] = 1; } //定义文字 var str = "Javascriphafhsdhfsfsf{}"; // 绘制 draw(); setInterval(draw,30); function draw(){ context.beginPath(); // 背景填充颜色 context.fillStyle = "rgba(0,0,0,0.05)"; context.fillRect(0,0,w,h); // 设置字体大小 context.font = fontSize +"px bold 微软雅黑 "; // 设置字体颜色 context.fillStyle = "#00cc33"; for(var i = 0; i < col;i++) { var index = Math.floor(Math.random()*str.length); var x = i*fontSize; var y = cpy[i]*fontSize; context.fillText(str.charAt(index),x,y); if(y >= h && Math.random()> 0.99)// 出现时间延迟的效果 { cpy[i]=0;// 只要Math.random> 0.99 时才纵坐标从0开始写字 } cpy[i]++;// 数组值加一，以便下一次写的字在下面一行 } }</script>

动态效果图：

更多炫酷特效，推荐访问：js特效大全！

以上就是HTML5 canvas如何实现代码流瀑布？（附代码）的详细内容，更多请关注php中文网其它相关文章！

微信分享相关标签：js canvas 代码流瀑布 html5本文转载于：csdn，如有侵犯，请联系a@php.cn删除上一篇：meta标签的三要素是什么下一篇：没有了

相关文章

相关视频

HTML5 Canvas绘图之drawImage(...canvas如何实现七巧板图案和粒子时钟效果？（代...小程序用canvas绘制海报的做法canvas实现雪花随机动态飘落效果（代码示例）HTML5 canvas如何实现代码流瀑布？（附代...HTML5Canvas标签-绘制图片HTML5 Canvas 转换Canvas和SVG的比较

网友评论

文明上网理性发言，请遵守 新闻评论服务协议

我要评论立即提交专题推荐独孤九贱-php全栈开发教程

全栈 100W+

主讲：Peter-Zhu 轻松幽默、简短易学，非常适合PHP学习入门

玉女心经-web前端开发教程

入门 50W+

主讲：灭绝师太 由浅入深、明快简洁，非常适合前端学习入门

天龙八部-实战开发教程

实战 80W+

主讲：西门大官人 思路清晰、严谨规范，适合有一定web编程基础学习

作者信息

青灯夜游

今天学习一小步，明天提升一大步

最近文章分享 10 个提高 JavaScript 技能的测验问答20015个你可能还不了解的 Git 命令976分享一些值得前端开发者收藏的 GitHub 库430发布技术文章最新文章热门排行

HTML5 canvas如何实现代码流瀑布？（附代码）meta标签的三要素是什么什么是h5页面关于html5中自定义属性的介绍前端安全以及如何防范详细介绍移动端h5页面尺寸大小WPS H5是什么软件h5和js有什么区别

h5是什么app是什么意思Google AMP 是什么鬼？什么是前端和后端HTML5如何实现视频直播功能HTML5开发实例-3D全景(ThreeJs全景Demo) 详解（图）【H5开发工具】2017最好用的10种HTML5应用开发工具推荐如何用HTML5在页面中插入可自动播放的视频推荐视频教程Canvas 绘制时钟炫丽的倒计时效果Canvas绘图与动画HTML5 Canvas 动画实战教程视频教程分类php视频教程html视频教程css视频教程JS视频教程jQuery视频教程mysql视频教程Linux视频教程Python视频教程article_status = 287557;网站首页 PHP视频PHP实战PHP代码PHP手册词条手记编程词典

php中文网：公益在线php培训，帮助PHP学习者快速成长！ 合肥彼岸互联信息技术有限公司

Copyright 2014-2020 https://www.php.cn/ All Rights Reserved | 皖B2-20150071-9 皖公网安备 34010402701654号 关于我们免责申明赞助与捐赠广告合作

座机号码：0551-64933227  安徽省合肥市政务新区置地广场D座2101

  var _hmt = _hmt || [];(function(){var hm = document.createElement("script");hm.src="//hm.baidu.com/hm.js?8cc45d54c337ca616c34b1cf747da91c";var s=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(hm, s);})();(function(){var bp = document.createElement('script');var curProtocol = window.location.protocol.split(':')[0];if(curProtocol === 'https'){bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';}else{bp.src = 'http://push.zhanzhang.baidu.com/push.js';};var s = document.getElementsByTagName("script")[0];s.parentNode.insertBefore(bp, s);})();$('.content').viewer();

Tags 标签