国产99久久精品_欧美日本韩国一区二区_激情小说综合网_欧美一级二级视频_午夜av电影_日本久久精品视频

最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
當前位置: 首頁 - 科技 - 知識百科 - 正文

canvas怎樣做出黑色背景的青色煙花

來源:懂視網 責編:小采 時間:2020-11-27 20:01:03
文檔

canvas怎樣做出黑色背景的青色煙花

canvas怎樣做出黑色背景的青色煙花:這次給大家帶來canvas怎樣做出黑色背景的青色煙花,canvas做出黑色背景的青色煙花的注意事項有哪些,下面就是實戰案例,一起來看一下。html<canvas></canvas><h1>201<span>8</span></h1>
推薦度:
導讀canvas怎樣做出黑色背景的青色煙花:這次給大家帶來canvas怎樣做出黑色背景的青色煙花,canvas做出黑色背景的青色煙花的注意事項有哪些,下面就是實戰案例,一起來看一下。html<canvas></canvas><h1>201<span>8</span></h1>
這次給大家帶來canvas怎樣做出黑色背景的青色煙花,canvas做出黑色背景的青色煙花的注意事項有哪些,下面就是實戰案例,一起來看一下。

1.png

html

<canvas></canvas><h1>201<span>8</span></h1>

css

html,body { padding: 0px; margin: 0px; background: #222; font-family: 'Karla', sans-serif; color: #FFF; height: 100%; overflow: hidden;
}h1 { z-index: 1000; position: fixed; top: 50%; left: 50%; transform: translateX(-50%) translateY(-100%); font-size: 58px; overflow: hidden;
}span { position: relative; display: inline-block; animation: drop 0.75s ease 0s;
}canvas { width: 100%; height: 100%;
}
@keyframes drop {
 0% { transform: translateY(-100px); opacity: 0;
 }
 90% { opacity: 1; transform: translateY(10px);
 }
 100% { transform: translateY(0px);
 }
}

js

var ctx = document.querySelector('canvas').getContext('2d')ctx.canvas.width = window.innerWidthctx.canvas.height = window.innerHeightvar sparks = []var fireworks = []var i = 20;while (i--) { fireworks.push( new Firework(Math.random() * window.innerWidth, window.innerHeight * Math.random()) )}render()function render() { setTimeout(render, 1000 / 60) ctx.fillStyle = 'rgba(0, 0, 0, 0.1)'; ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height) for (var firework of fireworks) { if (firework.dead) continue firework.move() firework.draw() } for (var spark of sparks) { if (spark.dead) continue spark.move() spark.draw() } if (Math.random() < 0.05) { fireworks.push(new Firework()) }}function Spark(x, y, color) { this.x = x this.y = y this.dir = Math.random() * (Math.PI * 2) this.dead = false this.color = color this.speed = Math.random() * 3 + 3; this.walker = new Walker({ radius: 20, speed: 0.25 }) this.gravity = 0.25 this.dur = this.speed / 0.1 this.move = function () { this.dur-- if (this.dur < 0) this.dead = true if (this.speed < 0) return if (this.speed > 0) this.speed -= 0.1 var walk = this.walker.step() this.x += Math.cos(this.dir + walk) * this.speed this.y += Math.sin(this.dir + walk) * this.speed this.y += this.gravity this.gravity += 0.05 } this.draw = function () { drawCircle(this.x, this.y, 3, this.color) }}function Firework(x, y) { this.xmove = new Walker({ radius: 10, speed: 0.5 }) this.x = x || Math.random() * ctx.canvas.width this.y = y || ctx.canvas.height this.height = Math.random() * ctx.canvas.height / 2 this.dead = false this.color = randomColor() this.move = function () { this.x += this.xmove.step() if (this.y > this.height) this.y -= 1; else this.burst() } this.draw = function () { drawCircle(this.x, this.y, 1, this.color) } this.burst = function () { this.dead = true var i = 100; while (i--) sparks.push(new Spark(this.x, this.y, this.color)) }}function drawCircle(x, y, radius, color) { color = color || '#FFF' ctx.fillStyle = color ctx.fillRect(x - radius / 2, y - radius / 2, radius, radius)}function randomColor() { return ['#6ae5ab', '#88e3b2', '#36b89b', '#7bd7ec', '#66cbe1'][Math.floor(Math.random() * 5)];}function Walker(options) { this.step = function () { this.direction = Math.sign(this.target) * this.speed this.value += this.direction this.target ? this.target -= this.direction : (this.value) ? (this.wander) ? this.target = this.newTarget() : this.target = -this.value : this.target = this.newTarget() return this.direction } this.newTarget = function () { return Math.round(Math.random() * (this.radius * 2) - this.radius) } this.start = 0 this.value = 0 this.radius = options.radius this.target = this.newTarget() this.direction = Math.sign(this.target) this.wander = options.wander this.speed = options.speed || 1}

相信看了本文案例你已經掌握了方法,更多精彩請關注Gxl網其它相關文章!

推薦閱讀:

JS中的async/await

canvas怎樣做出黑色背景的紅色煙花

聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

文檔

canvas怎樣做出黑色背景的青色煙花

canvas怎樣做出黑色背景的青色煙花:這次給大家帶來canvas怎樣做出黑色背景的青色煙花,canvas做出黑色背景的青色煙花的注意事項有哪些,下面就是實戰案例,一起來看一下。html<canvas></canvas><h1>201<span>8</span></h1>
推薦度:
標簽: 煙花 黑色的 煙火
  • 熱門焦點

最新推薦

猜你喜歡

熱門推薦

專題
Top
主站蜘蛛池模板: 国产区在线免费观看 | 黑人一区二区三区中文字幕 | 日日摸夜夜添夜夜爽免费视频 | 一区二区三区视频 | 色视频在线免费观看 | 久国产精品视频 | 97伊人久久 | 亚洲视频入口 | 一区二区三区视频在线观看 | 在线观看网站国产 | 日韩日韩日韩 | 久久国产午夜一区二区福利 | 国产成人精品在线 | 国产日韩欧美综合在线 | 国产精品久久成人影院 | 国产网站视频 | 欧美一区三区 | 日韩一区二区免费视频 | 夜夜操夜夜| 日韩第三页 | 午夜视频免费看 | 香港一级a毛片在线播放 | 亚洲精品美女久久久aaa | 亚洲另类中文字幕 | 又黄又爽无遮挡免费视频 | 国产在线一区二区 | 成人精品一区二区www | 日韩亚洲视频 | 国产精品一区在线播放 | 亚洲欧洲日本在线观看 | 亚洲欧美精品成人久久91 | 国产日韩一区二区三区在线观看 | 久久久亚洲欧美综合 | 一本大道香蕉视频在线观看 | 极品美女户外勾搭无套 | 亚洲国产成人久久一区二区三区 | www.久久.com| 欧美国产综合在线 | 国产呦系列 欧美呦 日韩呦 | 欧美在线观看成人高清视频 | 精品麻豆 |