Permalink
Browse files

Fix canvas-ribbon error.

  • Loading branch information...
geekrainy committed Oct 11, 2017
1 parent 52710a5 commit 29fd0342e4dee5ac9cf062ba93e1d8ac5c78b3a5
Showing with 67 additions and 50 deletions.
  1. +67 −50 source/lib/canvas-ribbon/canvas-ribbon.js
@@ -1,60 +1,77 @@
/**
* Created by zproo on 2017/4/3.
* Created by zproo on 2017/4/8.
*/
! function() {
document.addEventListener("touchstart", (e) => {
targetA = true;
!function () {
document.addEventListener('touchmove', function (e) {
e.preventDefault()
});
document.addEventListener("touchmove", (e) => {
targetA = false
})
document.addEventListener("click", (e) => {
targetA = true
})
function e() {
if (targetA) {
for (a.clearRect(0, 0, d, r), i = [{
x: 0,
y: .7 * r + u
}, {
x: 0,
y: .7 * r - u
}]; i[1].x < d + u;) t(i[0], i[1])
targetA = false
}
function getAttr(script, attr, default_val) {
return Number(script.getAttribute(attr)) || default_val;
}
// 获取自定义配置
var ribbon = document.getElementById('ribbon'); // 当前加载的script
config = {
zIndex: getAttr(ribbon, "zIndex", -1), // z-index
alpha: getAttr(ribbon, "alpha", 0.6), // alpha
ribbon_width: getAttr(ribbon, "size", 90), // size
};
var canvas = document.createElement("canvas");
canvas.style.cssText = "position:fixed;top:0;left:0;z-index:"+config.zIndex;
document.getElementsByTagName("body")[0].appendChild(canvas);
var canvasRibbon = canvas,
ctx = canvasRibbon.getContext('2d'), // 获取canvas 2d上下文
dpr = window.devicePixelRatio || 1, // the size of one CSS pixel to the size of one physical pixel.
width = window.innerWidth, // 返回窗口的文档显示区的宽高
height = window.innerHeight,
RIBBON_WIDTH = config.ribbon_width,
path,
math = Math,
r = 0,
PI_2 = math.PI * 2, // 圆周率*2
cos = math.cos, // cos函数返回一个数值的余弦值(-1~1)
random = math.random; // 返回0-1随机数
canvasRibbon.width = width * dpr; // 返回实际宽高
canvasRibbon.height = height * dpr;
ctx.scale(dpr, dpr); // 水平、竖直方向缩放
ctx.globalAlpha = config.alpha; // 图形透明度
function init() {
ctx.clearRect(0, 0, width, height); // 擦除之前绘制内容
path = [{x: 0, y: height * 0.7 + RIBBON_WIDTH}, {x: 0, y: height * 0.7 - RIBBON_WIDTH}];
// 路径没有填满屏幕宽度时,绘制路径
while (path[1].x < width + RIBBON_WIDTH) {
draw(path[0], path[1])
}
}
function t(e, t) {
a.beginPath(), a.moveTo(e.x, e.y), a.lineTo(t.x, t.y);
var o = t.x + (2 * x() - .25) * u,
c = n(t.y);
a.lineTo(o, c), a.closePath(), h -= m / -50, a.fillStyle = "#" + (127 * s(h) + 128 << 16 | 127 * s(h + m / 3) + 128 << 8 | 127 * s(h + m / 3 * 2) + 128).toString(16), a.fill(), i[0] = i[1], i[1] = {
x: o,
y: c
}
function draw(start, end) {
ctx.beginPath(); // 创建一个新的路径
ctx.moveTo(start.x, start.y); // path起点
ctx.lineTo(end.x, end.y); // path终点
var nextX = end.x + (random() * 2 - 0.25) * RIBBON_WIDTH,
nextY = geneY(end.y);
ctx.lineTo(nextX, nextY);
ctx.closePath();
r -= PI_2 / -50;
// 随机生成并设置canvas路径16进制颜色
ctx.fillStyle = '#' + (cos(r) * 127 + 128 << 16 | cos(r + PI_2 / 3) * 127 + 128 << 8 | cos(r + PI_2 / 3 * 2) * 127 + 128).toString(16);
ctx.fill(); // 根据当前样式填充路径
path[0] = path[1]; // 起点更新为当前终点
path[1] = {x: nextX, y: nextY} // 更新终点
}
function n(e) {
var t = e + (2 * x() - 1.1) * u;
return t > r || 0 > t ? n(e) : t
function geneY(y) {
var temp = y + (random() * 2 - 1.1) * RIBBON_WIDTH;
return (temp > height || temp < 0) ? geneY(y) : temp;
}
var o = document.createElement("canvas");
o.style.cssText = "position:fixed;top:0;left:0;z-index:-1", document.getElementsByTagName("body")[0].appendChild(o);
var i, c = o,
a = c.getContext("2d"),
l = window.devicePixelRatio || 1,
d = window.innerWidth,
r = window.innerHeight,
u = 90,
f = Math,
h = 0,
m = 2 * f.PI,
s = f.cos,
x = f.random,
targetA = false;
c.width = d * l, c.height = r * l, a.scale(l, l), a.globalAlpha = .6, document.onclick = e, document.ontouchend = e, setTimeout(function() {
targetA = true;
e();
}, 100);
document.onclick = init;
document.ontouchstart = init;
init();
}();

0 comments on commit 29fd034

Please sign in to comment.