小程序canvas学习
效果图：
.wxml
<canvas style="width: 100vw; height: 100vh;" canvas-id="firstCanvas"></canvas>
.js
onLoad: function (options) {
const ctx = wx.createCanvasContext('firstCanvas')
var canvasWidth = wx.getSystemInfoSync().windowWidth
var canvasHeight = wx.getSystemInfoSync().windowHeight
var numParticles = 50
var bg = [18, 10, 34]
var cols = ['#FF5722', '#FF9800', '#FF9800', '#FF9800', '#FF9800', '#B71C1C', '#00BCD4', '#00BCD4', '#009688']
setup()
function setup() {
ctx.beginPath();
ctx.rect(0, 0, canvasWidth, canvasHeight)
ctx.fillStyle = `rgba(${bg[0]}, ${bg[1]}, ${bg[2]}, ${1})`
ctx.fill()
ctx.draw()
}
// window.requestAnimationFrame(animate);
setInterval(animate, 60)
function animate() {
fade(0.3)
draw()
// window.requestAnimationFrame(function(){animate()})
}
function fade(amt) {
ctx.beginPath();
ctx.rect(0, 0, canvasWidth, canvasHeight)
ctx.fillStyle = `rgba(${bg[0]}, ${bg[1]}, ${bg[2]}, ${amt})`
ctx.fill()
ctx.draw()
}
function Particle() {
this.pos = {
x: Math.random() * canvasWidth * 0.8 + canvasWidth * 0.1,
y: Math.random() * canvasHeight * 0.8 + canvasHeight * 0.1
}
this.r = 1
this.speed = 6
this.step = Math.random() * 400
this.vx = Math.random() * this.speed / 4 - this.speed / 8
this.vy = Math.random() * this.speed / 4 - this.speed / 8
this.colIndex = Math.floor(Math.random() * cols.length)
this.history = []
this.update = function () {
this.step++
this.step %= 400
if (this.history.length > 5) {
this.history.shift()
}
this.pos.x += this.vx
this.pos.y += this.vy
this.vx = this.vx * 0.98 + (Math.random() * this.speed * 2 - this.speed) * 0.12
this.vy = this.vy * 0.98 + (Math.random() * this.speed * 2 - this.speed) * 0.12
if (this.history.length > 4) {
ctx.beginPath()
ctx.moveTo(this.pos.x, this.pos.y)
for (var i = this.history.length - 1; i >= 0; i--) {
ctx.lineTo(this.history[i].x, this.history[i].y)
}
ctx.fillStyle = cols[this.colIndex]
ctx.strokeStyle = cols[this.colIndex]
ctx.fill()
ctx.lineWidth = 2
ctx.lineJoin = "round"
// ctx.closePath()
ctx.stroke()
}
if (this.pos.x > canvasWidth || this.pos.x < 0 || this.pos.y > canvasHeight || this.pos.y < 0) {
delete this.pos
delete this.history
return false;
}
this.history.push({
x: this.pos.x,
y: this.pos.y
})
return true;
}
}
var particles = [new Particle()]
function draw() {
if (particles.length < numParticles) {
particles.push(new Particle())
}
particles = particles.filter(function (p) {
return p.update()
})
}
},总结：目前小程序canvas还很卡 不建议使用
PC端：
效果图
代码：
js
<script type="text/javascript">
var canvas = document.createElement('canvas')
document.getElementsByTagName('body')[0].appendChild(canvas)
var ctx = canvas.getContext('2d')
var numParticles = 50
var bg = [18, 10, 34]
var cols = ['#FF5722', '#FF9800', '#FF9800', '#FF9800', '#FF9800', '#B71C1C', '#00BCD4', '#00BCD4', '#009688']
setup()
function setup() {
canvas.width = window.innerWidth
canvas.height = window.innerHeight
ctx.beginPath();
ctx.rect(0, 0, canvas.width, canvas.height)
ctx.fillStyle = `rgba(${bg[0]}, ${bg[1]}, ${bg[2]}, ${1})`
ctx.fill()
}
// window.requestAnimationFrame(animate);
setInterval(animate, 1000/29.9)
function animate() {
fade(0.3)
draw()
// window.requestAnimationFrame(function(){animate()})
}
function fade(amt) {
ctx.beginPath();
ctx.rect(0, 0, canvas.width, canvas.height)
ctx.fillStyle = `rgba(${bg[0]}, ${bg[1]}, ${bg[2]}, ${amt})`
ctx.fill()
}
function Particle () {
this.pos = {
x: Math.random() * canvas.width * 0.8 + canvas.width * 0.1,
y: Math.random() * canvas.height * 0.8 + canvas.height * 0.1
}
this.r = 1
this.speed = 6
this.step = Math.random() * 400
this.vx = Math.random() * this.speed/4 - this.speed/8
this.vy = Math.random() * this.speed/4 - this.speed/8
this.colIndex = Math.floor(Math.random()*cols.length)
this.history = []
this.update = function () {
//////////////////////////////////////
this.step ++
this.step %= 400
if (this.history.length > 5){
this.history.shift()
}
this.pos.x += this.vx
this.pos.y += this.vy
this.vx = this.vx * 0.98 + (Math.random() * this.speed * 2 - this.speed) * 0.12
this.vy = this.vy * 0.98 + (Math.random() * this.speed * 2 - this.speed) * 0.12
//////////////////////////////////////
if (this.history.length > 4){
ctx.beginPath()
ctx.moveTo(this.pos.x ,this.pos.y)
for (var i = this.history.length-1; i >= 0; i--){
ctx.lineTo(this.history[i].x ,this.history[i].y)
}
// ctx.fillStyle = `hsla(${Math.sin( this.step / 300) * 70 + 70},${99}%,${50}%,1)`
// ctx.strokeStyle = `hsla(${Math.sin( this.step / 300) * 70 + 70},${99}%,${50}%,0.5)`
ctx.fillStyle = cols[this.colIndex]
ctx.strokeStyle = cols[this.colIndex]
ctx.fill()
ctx.lineWidth = 2
ctx.lineJoin = "round"
// ctx.closePath()
ctx.stroke()
}
//////////////////////////////////////
if (this.pos.x > canvas.width || this.pos.x < 0 || this.pos.y > canvas.height || this.pos.y < 0) {
delete this.pos
delete this.history
return false;
}
this.history.push({
x: this.pos.x,
y: this.pos.y
})
return true;
}
}
var particles = [new Particle()]
function draw() {
if (particles.length < numParticles) {
particles.push(new Particle())
}
particles = particles.filter(function (p){
return p.update()
})
}
</script>