神奇的 Canvas
效果
最终效果就在博客上就能看到啦。下面来说一下实现方式。
实现
我的博客是用 Hexo 搭建的,使用了 Archer 主题,博客的最上层样式作者定义在 layout.ejs 文件里。
<!DOCTYPE html>
<html>
...
<div class="wrapper">
...
</div>
...
</html>
既然是在 canvas 里面画炫酷的背景,那就需要在这里添加一个 canvas 元素,并且和 div:class="wrapper" 一样大。
改造 layout.ejs 文件,用一个 div 将 div:class="wrapper" 和我们的 canvas 包裹起来:
<!DOCTYPE html>
<html>
...
<div id="container-wrapper-canvas" style="position:relative;">
<div class="wrapper">
...
</div>
<canvas id="myCanvas" style="position:absolute;left:0;top:0;z-index:0;pointer-events:none;" />
<script>
</script>
...
</div>
...
</html>
因为不想让 canvas 响应点击事件,所以在它的 style 里面加上:
pointer-events:none;
先定义一些变量(以下代码一股脑塞到 script 标签里就行啦)。
// 屏幕宽高
let container = document.getElementById('container-wrapper-canvas')
let WIDTH = container.offsetWidth
let HEIGHT = container.offsetHeight
// canvas
let canvas = document.getElementById('myCanvas')
let context = canvas.getContext('2d')
// 圆点数量
let roundCount = HEIGHT / 10
// 存放远点属性的数组
let round = []
// 令 canvas 铺满屏幕
canvas.width = WIDTH
canvas.height = HEIGHT
构造圆点位置颜色大小等属性
// 构造圆点位置颜色大小等属性
function roundItem(index, x, y) {
this.index = index
this.x = x
this.y = y
this.r = Math.random() * 4 1
let alpha = (Math.floor(Math.random() * 5) 1) / 10 / 2
this.color = "rgba(0,0,0," alpha ")"
}
画圆点
// 画圆点
roundItem.prototype.draw = function() {
context.fillStyle = this.color
context.shadowBlur = this.r * 2
context.beginPath()
context.arc(this.x, this.y, this.r, 0, 2 * Math.PI, false)
context.closePath()
context.fill()
}
这里看着很熟悉,在做 android、iOS 开发自定义 View 的时候就遇到过类似的代码,在 draw() 函数里画图,这里我想到可以在移动端使用类似的方法画出类似的背景。
这个时候调用初始化函数就可以看到静态的一个个小圆点了
// 调用初始化函数
init();
function init() {
for(var i = 0; i < roundCount; i ){
round[i] = new roundItem(i,Math.random() * WIDTH,Math.random() * HEIGHT);
round[i].draw();
}
animate()
}
为了让小圆点动起来,我们写下面的函数。
// 移动圆点
roundItem.prototype.move = function () {
// y方向移动速度与圆点半径成正比
this.y -= this.r / 20
// x方向移动分两个方向,移动速度与圆点半径成正比
if (this.index % 2 == 0) {
this.x -= 0.08
} else {
this.x = this.r / 40
}
// 如果超出范围就把它拉回来
if (this.y <= 0) {
this.y = HEIGHT
}
if (this.x <= 0) {
this.x = WIDTH
}
if (this.x >= WIDTH) {
this.x -= WIDTH
}
this.draw()
}
// 定义动画
function animate() {
context.clearRect(0, 0, WIDTH, HEIGHT);
for (var i in round) {
round[i].move()
}
requestAnimationFrame(animate)
}
这个时候就可以看到动态的一个个小圆点了。
是不是很炫酷呢,有空我再将它改造得更炫酷一点。
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhckejba
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
怎样阻止微信小程序自动打开
PHP中文网 06-13