使用canvas绘制动画原理就是不断的绘制canvas图形,当画的速度够快,看上去就能动起来。这里需要了解一下屏幕刷新率,根据效果来调整绘制的速度(1秒刷新60次 屏幕刷新率保持在60次/秒保障动画效果的流畅性)
什么是屏幕刷新率:屏幕刷新率指的是屏幕切换画面的频率,通常情况下,我们需要至少每秒24帧才能感觉画面流畅。因此,市面上绝大多数的显示设备都是60Hz左右的屏幕刷新率,这个已经足以满足大多数人的正常使用需求了。
下面来绘制几个简单canvas动画:
鼠标点击绘制小球
<template>
<div class="out">
<canvas id="canvas" width="1000" height="600"></canvas>
</div>
</template>
<script>
export default {
mounted() {
//产生范围随机数的函数
function randomInt (from, to) {
return parseInt(Math.random() * (to - from + 1) + from);
}
function Ball(x, y, ctx) {
this.ctx = ctx;
this.r=1; // 初始半径
this.speed=0.4;
this.x=x;
this.y=y;
// 随机颜色
let R = randomInt(1, 255)
let G = randomInt(1, 255)
let B = randomInt(1, 255)
let A = Math.random()
this.color = `rgba(${R},${G},${B},${A})`
}
//绘制
Ball.prototype.draw = function () {
this.ctx.beginPath()
this.ctx.arc(this.x, this.y, this.r, 0, Math.PI/180, true)
this.ctx.closePath()
this.ctx.strokeStyle = this.color;
this.ctx.stroke();
if(this.r>=20) return;
this.r+=this.speed;
}
// 初始化
const init = ()=>{
let canvas = document.getElementById("canvas");
let ctx = canvas.getContext('2d');
let W = window.innerWidth,
H = window.innerHeight;
canvas.width = W;
canvas.height = H;
// 保证canvas宽高和屏幕一致
if (W != window.innerWidth) {
canvas.width = W = window.innerWidth;
}
if (H != window.innerHeight) {
canvas.height = H = window.innerHeight;
}
//定义一个数组用来盛放所有的小球"对象"
let balls = []
window.document.onmousedown = function (e) {
let ball = new Ball(e.clientX, e.clientY, ctx);
balls.push(ball)
};
setInterval(function () {
//绘图之前先清空画布
ctx.clearRect(0, 0, canvas.width, canvas.height)
for (let i = 0; i < balls.length; i++) {
balls[i].draw()
}
}, 1000 / 60)
}
init();
},
methods: {
}
}
</script>
<style>
body{
background-color: #000;
overflow: hidden;
}
</style>
躁动的小球(网上找的例子)
<template>
<div class="out">
<canvas id="canvas" width="1000" height="600"></canvas>
</div>
</template>
<script>
export default {
mounted() {
//产生范围随机数的函数
function randomInt (from, to) {
return parseInt(Math.random() * (to - from + 1) + from);
}
function Ball(canvasW, canvasH, ctx) {
this.canvasW = canvasW;
this.canvasH = canvasH;
this.ctx = ctx;
// 小球水机半径,位置
this.r = randomInt(10, 80)
this.x = randomInt(this.r, this.canvasW - this.r)
this.y = randomInt(this.r, this.canvasH - this.r)
// 随机颜色
let R = randomInt(0, 255)
let G = randomInt(0, 255)
let B = randomInt(0, 255)
let A = Math.random()
this.color = `rgba(${R},${G},${B},${A})`
// 随机小球的速度(及方向)
let speedX = randomInt(1, 4)
this.speedX = randomInt(0, 100) > 50 ? speedX : -speedX
let speedY = randomInt(1, 4)
this.speedY = randomInt(0, 100) > 50 ? speedY : -speedY
}
//绘制一个小球
Ball.prototype.draw = function () {
let deg = Math.PI / 180
this.ctx.beginPath()
this.ctx.arc(this.x, this.y, this.r, 0, 360 * deg, true)
this.ctx.closePath()
this.ctx.fillStyle = this.color
this.ctx.fill()
}
//小球移动
Ball.prototype.ballMove = function () {
this.x += this.speedX
this.y += this.speedY
// 撞到y轴调整x的运动方向
if ((this.x >= this.canvasW - this.r) || (this.x <= this.r)) {
this.speedX *= -1
}
// 撞到x轴调整y的运动方向
if (this.y >= this.canvasH - this.r || this.y <= this.r) {
this.speedY *= -1
}
}
// 初始化
const init = ()=>{
let canvas = document.querySelector('#canvas');
let ctx = canvas.getContext('2d');
let ballLength = randomInt(10, 100); // 随机产生的小球个数
//定义一个数组用来盛放所有的小球"对象"
let balls = []
// 循环创建多个小球
for (let i = 0; i < ballLength; i++) {
let ball = new Ball(canvas.width, canvas.height, ctx);
balls.push(ball)
}
setInterval(function () {
//绘图之前先清空画布
ctx.clearRect(0, 0, canvas.width, canvas.height)
for (let i = 0; i < balls.length; i++) {
balls[i].ballMove();
balls[i].draw()
}
}, 30) // 1000 / 60
}
init();
},
methods: {
}
}
</script>
<style>
*{
padding: 0;
margin: 0;
}
body{
background-color: #333333;
}
.out{
height: 600px;
width: 1000px;
margin: 50px auto;
box-shadow: 2px 2px 10px #999;
}
</style>