Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
css
body { margin: 0; overflow: hidden}
JavaScript
var canvas = document.querySelector( 'canvas') canvas.style.background = 'linear-gradient( to bottom, #002172, #479CD5)' const randomInt = (min, max) => Math.floor( Math.random() * ( max - min ) + min) // get canvas var _w, _h function refreshSize() { _w = canvas.width = innerWidth _h = canvas.height = innerHeight }; refreshSize(); // set width and height to canvas var c = canvas.getContext( '2d') // get context now you can draw from here class Flower { constructor( x, y, radius) { this.x = x this.y = y this.radius = radius this.dx = 0.8 + Math.random() * 0.2 this.fdx = Math.pow( this.dx, 15) this.radians = 0 } draw() { let long = this.radius * 20 let cutLong = long / 10 c.beginPath() c.strokeStyle = '#fff' c.arc( this.x, this.y, this.radius, 0, Math.PI * 2, true) c.moveTo(this.x, this.y + this.radius) c.lineTo(this.x, this.y + long) c.stroke() c.beginPath() c.save() c.strokeStyle = '#725527' c.lineWidth = cutLong c.lineCap = 'round' c.moveTo( this.x, this.y + long - cutLong) c.lineTo( this.x, this.y + long + cutLong) c.stroke() c.restore() c.beginPath() c.save() c.globalAlpha = 0.5 for ( let i = 0.5; i < 5; i++ ) { c.moveTo( this.x, this.y) c.quadraticCurveTo( this.x + cutLong,this.y + cutLong, this.x + cutLong * i, this.y - cutLong * 1.5) c.moveTo( this.x, this.y) c.quadraticCurveTo( this.x - cutLong,this.y + cutLong, this.x - cutLong * i, this.y - cutLong * 1.5) } c.lineWidth = 1 c.stroke() c.restore() } createFlower( array = [] ) { let i = array.indexOf( this ) array.splice( i, 1) let x = 0 let y = randomInt( -10, _h * 1.5) array.push( new Flower( x, y, this.radius) ) } update( array = [] ) { if ( this.x - this.radius > _w ) this.createFlower( array ) this.radians += 0.01 this.x += this.dx this.y += Math.cos( this.radians ) - this.fdx this.draw() } } var flowers = [] function init() { for ( let i = 0; i < 100; i++ ) { let x = Math.random() * _w let y = randomInt( -10, _h * 1.5) flowers.push( new Flower( x, y, 1)) } };init(); // a IIFE function loop() { requestAnimationFrame(loop) refreshSize() flowers.forEach( f => f.update( flowers ) ) };loop(); // loop to animate
粒子
时间
文字
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号