canvas心形线条聚集表白动画效果代码
代码语言:html
所属分类:表白
代码描述:canvas心形线条聚集表白动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<canvas id="heart"></canvas>
<script>
window.requestAnimationFrame = window.__requestAnimationFrame || window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || (function() {
return function(a, c) {
var d = c.__lastTime;
if (d === undefined) {
d = 0
}
var b = Date.now();
var e = Math.max(1, 33 - (b - d));
window.setTimeout(a, e);
c.__lastTime = b + e
}
})();
window.isDevice = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(((navigator.userAgent || navigator.vendor || window.opera)).toLowerCase()));
var loaded = false;
var init = function() {
if (loaded) {
return
}
loaded = true;
var p = window.isDevice;
var n = p ? 0.5 : 1;
var a = document.getElementById("heart");
var c = a.getContext("2d");
var A = a.width = n * innerWidth;
var j = a.height = n * innerHeight;
var t = Math.random;
c.fillStyle = "rgba(0,0,0,1)";
c.fillRect(0, 0, A, j);
var h = function(e) {
return [Math.pow(Math.sin(e), 3), -(15 * Math.cos(e) - 5 * Math.cos(2 * e) - 2 * Math.cos(3 * e) - Math.cos(4 * e))]
};
var u = function(k, x, y, e, i) {
return [e + k[0] * x, i + k[1] * y]
};
window.addEventListener("resize", function() {
.........完整代码请登录后点击上方下载按钮下载查看
网友评论0