Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
css
* { padding: 0; margin: 0; overflow: hidden; }
JavaScript
var w, m, c, C, W, H, HW, HH, r, diameter; var a = function () { document .getElementsByTagName("body")[0] .appendChild(document.createElement("canvas")); w = window; m = Math; c = document.getElementsByTagName("canvas")[0]; c.style.background = 'black'; C = c.getContext("2d"); }; var b = function () { W = c.width = w.innerWidth; H = c.height = w.innerHeight; HW = W / 2; HH = H / 2; diameter = 20; }; var f = function (t) { t /= 3000; C.clearRect(0, 0, W, H); C.globalCompositeOperation = 'lighter'; for (var k = 0; k < 3; k++) { if (k === 0) C.fillStyle = '#FF0000'; if (k === 1) C.fillStyle = '#00FF00'; if (k === 2) C.fillStyle = '#0000FF'; for (i = 0; i < H; i += diameter) { for (j = 0; j < W / 2; j += diameter) { var index = i * W + j; C.globalAlpha = m.tan(index * index - t); C.fillRect( m.tan(i * j - m.sin(index + k / 100) + t) * j + HW - diameter / 2, i, m.tan(index + i / j + t + k / 100) / 2 * diameter / 2, m.tan(index * index - t) * diameter / 2 ); } } } r = requestAnimationFrame(f); }; window.onload = function () { a(); b(); f(); w.onresize = function () { cancelAnimationFrame(r); b(); f(); }; };
粒子
时间
文字
hover
canvas
3d
游戏
音乐
火焰
水波
轮播图
鼠标跟随
动画
css
加载动画
导航
菜单
按钮
滑块
tab
弹出层
统计图
svg
×
Close
在线代码下载提示
开通在线代码永久免费下载,需支付20jQ币
开通后,在线代码模块中所有代码可终身免费下!
您已开通在线代码永久免费下载,关闭提示框后,点下载代码可直接下载!
您已经开通过在线代码永久免费下载
对不起,您的jQ币不足!可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title>JavaScript Canvas-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style>
</style> </head> <body>
<script>
</script>
</body> </html>
2012-2021 jQuery插件库版权所有
jquery插件
|
jq22工具库
|
网页技术
|
广告合作
|
在线反馈
|
版权声明
沪ICP备13043785号-1
浙公网安备 33041102000314号