Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
css
body, html { position: absolute; margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; touch-action: none; content-zooming: none; background: #000; } canvas { position: absolute; width: 100%; height: 100%; user-select: none; background: #000; }
JavaScript
"use strict"; { class Point { constructor (d) { this.vx = 0.0; this.vy = 0.0; this.x = canvas.width / 2 + Math.cos(d / 10) * 400; this.y = canvas.height / 2 + Math.sin(d / 10) * 400; this.d = d; } draw (x, y) { this.vx = this.vx * 0.996 - 0.05 * (this.x - x) / this.d; this.vy = this.vy * 0.996 - 0.05 * (this.y - y) / this.d; this.x += this.vx; this.y += this.vy; ctx.moveTo(x, y); ctx.lineTo(this.x, this.y); ctx.fillRect(this.x, this.y, 4, 4); } } const canvas = { init() { this.elem = document.querySelector("canvas"); this.resize(); window.addEventListener("resize", () => this.resize(), false); return this.elem.getContext("2d"); }, resize() { this.width = this.elem.width = this.elem.offsetWidth; this.height = this.elem.height = this.elem.offsetHeight; } }; const ctx = canvas.init(); const pointer = { x: canvas.width / 2, y: canvas.height / 2, move(e, touch) { const pointer = touch ? e.targetTouches[0] : e; this.x = pointer.clientX; this.y = pointer.clientY; }, init() { window.addEventListener("mousemove", e => this.move(e, false), false); canvas.elem.addEventListener("touchmove", e => this.move(e, true), false); } }; pointer.init(); const points = []; let d = 10; for (let i = 0; i < 800; i++) { points.push(new Point(d += 0.1)); } ctx.fillStyle = '#fff'; ctx.strokeStyle = "#320"; const run = () => { requestAnimationFrame(run); ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.globalCompositeOperation = "lighter"; ctx.beginPath(); for (const p of points) { p.draw(pointer.x, pointer.y); } ctx.stroke(); } run(); }
粒子
时间
文字
hover
canvas
3d
游戏
音乐
火焰
水波
轮播图
鼠标跟随
动画
css
加载动画
导航
菜单
按钮
滑块
tab
弹出层
统计图
svg
×
Close
在线代码下载提示
开通在线代码永久免费下载,需支付20jQ币
开通后,在线代码模块中所有代码可终身免费下!
您已开通在线代码永久免费下载,关闭提示框后,点下载代码可直接下载!
您已经开通过在线代码永久免费下载
对不起,您的jQ币不足!可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title>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号