前端开发者网页前端界面开发|前端开发跟网页设计有啥区别|1500个前端开发常用javascript特效
html 代码
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″ />
<meta name=”author” content=”” />
<meta name=”keywords” content=”” />
<meta name=”description” content=”” />
<meta name=”viewport” content=”width=device-width,initial-scale=1.0,user-scalable=no” />
<title>h5与前端开发：canvas数字特效</title>
</head>
<body>
<canvas style=”background:#000″></canvas>
<script>
(function () {
var digit = [
[//digit 0
[0, 1, 1, 1, 1, 1, 0],
[1, 1, 1, 1, 1, 1, 1],
[1, 1, 0, 0, 0, 1, 1],
[1, 1, 0, 0, 0, 1, 1],
[1, 1, 0, 0, 0, 1, 1],
[1, 1, 0, 0, 0, 1, 1],
[1, 1, 0, 0, 0, 1, 1],
[1, 1, 0, 0, 0, 1, 1],
[1, 1, 1, 1, 1, 1, 1],
[0, 1, 1, 1, 1, 1, 0]
],
[//digit 1
[0, 0, 0, 1, 1, 0, 0],
[0, 0, 1, 1, 1, 0, 0],
[0, 1, 1, 1, 1, 0, 0],
[0, 0, 0, 1, 1, 0, 0],
[0, 0, 0, 1, 1, 0, 0],
[0, 0, 0, 1, 1, 0, 0],
[0, 0, 0, 1, 1, 0, 0],
[0, 0, 0, 1, 1, 0, 0],
[0, 0, 0, 1, 1, 0, 0],
[0, 0, 0, 1, 1, 0, 0]
],
[//digit 2
[0, 0, 1, 1, 1, 0, 0],
[0, 1, 1, 0, 1, 1, 0],
[1, 1, 0, 0, 0, 1, 1],
[0, 0, 0, 0, 0, 1, 1],
[0, 0, 0, 0, 1, 1, 0],
[0, 0, 0, 1, 1, 0, 0],
[0, 0, 1, 1, 0, 0, 0],
[0, 1, 1, 0, 0, 0, 1],
[1, 1, 1, 1, 1, 1, 1],
[1, 1, 1, 1, 1, 1, 1]
],
[//digit 3
[0, 0, 1, 1, 1, 0, 0],
[0, 1, 1, 0, 1, 1, 0],
[1, 1, 0, 0, 0, 1, 1],
[0, 0, 0, 0, 0, 1, 1],
[0, 0, 0, 1, 1, 1, 0],
[0, 0, 0, 1, 1, 1, 0],
[0, 0, 0, 0, 0, 1, 1],
[1, 1, 0, 0, 0, 1, 1],
[0, 1, 1, 0, 1, 1, 0],
[0, 0, 1, 1, 1, 0, 0]
],
[//digit 4
[0, 0, 0, 1, 1, 0, 0],
[0, 0, 0, 1, 1, 0, 0],
[0, 0, 1, 0, 1, 0, 0],
[0, 1, 1, 0, 1, 0, 0],
[1, 1, 0, 0, 1, 0, 0],
[1, 1, 1, 1, 1, 1, 1],
[1, 1, 1, 1, 1, 1, 1],
[0, 0, 0, 1, 1, 0, 0],
[0, 0, 0, 1, 1, 0, 0],
[0, 0, 0, 1, 1, 0, 0]
],
[//digit 5
[0, 1, 1, 1, 1, 1, 0],
[0, 1, 1, 1, 1, 1, 0],
[0, 1, 1, 0, 0, 0, 0],
[0, 1, 1, 1, 1, 0, 0],
[0, 0, 0, 0, 1, 1, 0],
[0, 0, 0, 0, 0, 1, 1],
[0, 0, 0, 0, 0, 1, 1],
[0, 0, 0, 0, 1, 1, 0],
[0, 1, 1, 0, 1, 1, 0],
[0, 1, 1, 1, 1, 0, 0]
],
[//digit 6
[0, 0, 1, 1, 1, 0, 0],
[0, 1, 1, 0, 1, 1, 0],
[0, 1, 1, 0, 0, 0, 0],
[0, 1, 1, 0, 0, 0, 0],
[0, 1, 1, 1, 1, 1, 0],
[0, 1, 1, 0, 1, 1, 0],
[0, 1, 1, 0, 0, 1, 1],
[0, 1, 1, 0, 0, 1, 1],
[0, 1, 1, 0, 1, 1, 0],
[0, 0, 1, 1, 1, 0, 0]
],
[//digit 7
[1, 1, 1, 1, 1, 1, 0],
[1, 1, 1, 1, 1, 1, 0],
[0, 0, 0, 0, 1, 1, 0],
[0, 0, 0, 0, 1, 1, 0],
[0, 0, 0, 1, 1, 0, 0],
[0, 0, 0, 1, 1, 0, 0],
[0, 0, 1, 1, 0, 0, 0],
[0, 0, 1, 1, 0, 0, 0],
[0, 0, 1, 1, 0, 0, 0],
[0, 0, 1, 1, 0, 0, 0]
],
[//digit 8
[0, 0, 1, 1, 1, 0, 0],
[0, 1, 1, 0, 1, 1, 0],
[1, 1, 0, 0, 0, 1, 1],
[1, 1, 0, 0, 0, 1, 1],
[0, 1, 1, 1, 1, 1, 0],
[0, 1, 1, 1, 1, 1, 0],
[1, 1, 0, 0, 0, 1, 1],
[1, 1, 0, 0, 0, 1, 1],
[0, 1, 1, 0, 1, 1, 0],
[0, 0, 1, 1, 1, 0, 0]
],
[//digit 9
[0, 0, 1, 1, 1, 0, 0],
[0, 1, 1, 0, 1, 1, 0],
[1, 1, 0, 0, 0, 1, 1],
[1, 1, 0, 0, 0, 1, 1],
[0, 1, 1, 0, 0, 1, 1],
[0, 0, 1, 1, 1, 1, 1],
[0, 0, 0, 0, 0, 1, 1],
[1, 1, 0, 0, 0, 1, 1],
[0, 1, 1, 0, 0, 1, 1],
[0, 0, 1, 1, 1, 1, 0]
]
];
function Dot(tx, ty, x, y, radius) {
this.tx = tx;
this.ty = ty;
this.x = x;
this.y = y;
this._dx = tx – x;
this._dy = ty – y;
this.radius = radius;
// this.speed=0.1;
}
Dot.prototype = {
PI2: Math.PI * 2,
move: function (t, d) {
/*
var speed=this.speed,
vx=(this.tx-this.x)*speed,
vy=(this.ty-this.y)*speed;
this.x+=vx;
this.y+=vy;
if(Math.abs(this.x-this.tx)<0.5&&Math.abs(this.y-this.ty)<0.5){
this.x=this.tx;
this.y=this.ty;
return false;
}
*/
if (t > d) {
this._x = this.tx;
this._y = this.ty;
return false;
}
this._x = this.ease(this.x, this._dx, t, d);
this._y = this.ease(this.y, this._dy, t, d);
return true;
},
draw: function (ctx) {
var x = this._x,
y = this._y,
grd = ctx.createRadialGradient(x, y, this.radius / 2, x, y, this.radius);
grd.addColorStop(0, “#FFF”);
grd.addColorStop(1, “rgba(255,255,255,0.1)”);
ctx.fillStyle = grd;
ctx.beginPath();
ctx.arc(x, y, this.radius, 0, this.PI2, true);
ctx.closePath();
ctx.fill();
},
ease: function (b, c, t, d) {
return (t /= d / 2) < 1 ? c / 2 * t * t + b : -c / 2 * ((–t) * (t – 2) – 1) + b;
}
};
var num = 200 * Math.random() | 0,
radius = 4,
duration = 60, //60frams===1秒
dotSpace = 1,
numSpace = 5,
times = 0,
nums = num.toString().split(“”),
dots = [],
i = 0,
ii = nums.length,
cvs = document.querySelector(“canvas”),
width = cvs.width,
height = cvs.height,
ctx = cvs.getContext(“2d”);
for (; i < ii; i++) {
setDots(nums[i], i, dots, width, height);
}
function drawFrame() {
var i = dots.length;
ctx.clearRect(0, 0, width, height);
times++;
while (i–) {
dots[i].move(times, duration);
dots[i].draw(ctx);
}
requestAnimationFrame(drawFrame);
}
drawFrame();
function setDots(num, i, dots, width, height) {
var dig = digit[num],
y = dig.length,
x = dig[0].length,
dot_width = (dotSpace + radius) * 2,
num_width = dot_width * x,
offsetY = dot_width / 2,
offsetX = i * (num_width + numSpace) + offsetY;
j = 0;
while (y–) {
j = x;
while (j–) {
dig[y][j] && dots.push(new Dot(offsetX + j * dot_width, offsetY + dot_width * y, Math.random() * width, Math.random() * height, radius));
}
}
}
})();
</script>
</body>
</html>
h5动画制作 web前端开发|前端动画都是用什么开发？|前端怎么开发h5动画宣传页面
970106_lzh 2年前 (2021-01-08)说：
huihui 3年前 (2020-10-20)说：
Satisfy 3年前 (2020-06-05)说：
评论前必须登录！
注册