<template>
<div class="demo">
<div class="canvas1">
<canvas class="myCanvas" width="800" height="500" ref="myCanvas"></canvas>
</div>
</div>
</template>
<script>
export default {
name: 'slideshow',
data () {
return {
}
},
mounted () {
this.myCanvas1()
},
methods: {
myCanvas1() {
// 得到到画布
// var canvas = document.getElementById('myCanvas')
var canvas = this.$refs.myCanvas
// 获取上下文
var ctx = canvas.getContext("2d")
// 绘制圆弧
// ctx.beginPath()
// // false表示顺时针 true为逆时针方向 7或2*Math.PI 表示一个圆 顺时针方向
// ctx.arc(200,200,100,0,2*Math.PI,false)
// ctx.stroke()
// ctx.fillStyle ='orange'
// ctx.fill()
// 炫彩小球
// 球类
function Ball(x,y,r) {
this.x = x;
this.y = y
// 初始半径
this.r = r
// 设置随机颜色
this.color = getRandom()
// 设置行进方向
this.dx = parseInt(Math.random()*10) -5
// 设置行进方向
this.dy = parseInt(Math.random()*10) - 5
// 将这个小球维护到
ballArr.push(this)
}
Ball.prototype.updata = function () {
// 小球运动
this.x += this.dx;
this.y += this.dy
this.r -= 0.4
// 小球半径小于0,从数组中删除
if (this.r <= 0) {
this.remove()
}
}
// 随机颜色
function getRandom () {
var allType = '0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f'
var allTypeArr = allType.split(",")
var color = "#"
for (var i = 0;i<6;i++) {
var random = parseInt(Math.random() * allTypeArr.length)
color += allTypeArr[random]
}
return color
}
// 渲染小球
Ball.prototype.render = function () {
ctx.beginPath()
ctx.arc(this.x,this.y,this.r,0,Math.PI * 2, false)
ctx.fillStyle = this.color
ctx.fill()
}
// canvas设置鼠标监听 鼠标移动创建小球
canvas.addEventListener("mousemove",function(event) {
new Ball(event.offsetX,event.offsetY,30)
})
// 删除小球
Ball.prototype.remove = function () {
for(var i = 0; i< ballArr.length;i++) {
if (ballArr[i] == this) {
ballArr.splice(i,1)
}
}
}
var ballArr = []
// 定时器进行渲染更新
setInterval(function(){
// 动画逻辑 清屏 更新 渲染
ctx.clearRect(0,0,canvas.width,canvas.height)
for(var i = 0; i<ballArr.length;i++) {
ballArr[i].updata()
if (ballArr[i]) {
ballArr[i].render()
}
}
},50)
},
}
}
</script>
<style scoped>
canvas {
border: 1px solid #114211;
}
</style>
canvas画布,记录一下