canvas渐变色彩带
Posted lvmx
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了canvas渐变色彩带相关的知识，希望对你有一定的参考价值。
【canvas】渐变色彩带
先上效果
附上源码+注释
<html> <head> <meta charset="utf-8"> <title>liner</title> <style type="text/css"> p{
font-size: 50px; position: absolute;
left: 50%;
top: 30%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%); } </style> </head> <body> <p>LVMX</p> <canvas id='canvas'></canvas> <script type="text/javascript"> var c = document.getElementById('canvas'), x = c.getContext('2d'), f = 50, // 可理解为一个offset值 决定了绘制的彩带的宽度 r = 0, q; // 初始点 // canvas的宽高 全屏显示 c.width = window.innerWidth; c.height = window.innerHeight;
//透明度 x.globalAlpha = 0.5 // 初始化函数 function init (){ // 清屏 重新绘制 x.clearRect(0, 0, window.innerWidth, window.innerHeight) q = [{ x: 0, y: window.innerHeight*0.5 + f }, { x: 0, y: window.innerHeight*0.5 - f }]
// X在屏幕范围内 循环绘制 while (q[1].x < window.innerWidth + f) { draw(q[0],q[1]) } } // 控制绘图流程的函数 function draw (p1,p2) { x.beginPath() x.moveTo(p1.x, p1.y) x.lineTo(p2.x, p2.y)
// 绘制第三个点 连接成一个三角形 var p3x = p1.x + (Math.random()*2 - 0.15) * 100, p3y = y(p2.y) x.lineTo(p3x, p3y) x.closePath()
// 渐变色 // 使用到rgb转化16进制的公式 (R << 16 | G << 8 | B).toString(16) r-= Math.PI*2/-50 x.fillStyle = '#' + (Math.cos(r)*127 + 128 <<16 |Math.cos(r+ Math.PI*2/3)*127 + 128 <<8| Math.cos(r+Math.PI*2/3*2)*127+128).toString(16) x.fill()
// 设置 点1 = 点2 点2 = 点3
// 重复复制保证个每个相连的三角形都有一个共同的边 q[0] = q[1] q[1] = {x:p3x ,y:p3y} }
// 控制Y坐标的函数 // 如果Y超过了窗口大小则重新取，直到满足条件为止；否则，结束绘制 function y (point) { var t = point + (Math.random()*2 - 1.1) * f; return (t > window.innerHeight || t < 0) ? y(point) : t }
document.onclick = init init()
</script> </body>
</html>想说的话
这个漂亮的效果并非原创，是在其他文章中学习的。首先，还是要向原作者表达敬意。
关于这段代码，原文章写的非常简单，没有canvas基础的小白很难读懂，笔者对代码进行了解读，编辑成小白更易懂的模式。代码中所有Math.random()的倍数、以及与其有关的换算均为经验值，皆可根据浏览器比例进行调整。渐变色的实现方式也并未一种。文中的实现方式非常巧妙，建议学习加以利用。如果这篇文章有帮助到你，欢迎点赞~
以上是关于canvas渐变色彩带的主要内容，如果未能解决你的问题，请参考以下文章