Vue.js
在Vue组件中的如下代码为什么在浏览器中没有效果？（代码的作用是在画布中的任意位置生成一个随机圆）
粉丝福利 : 关注VUE中文社区公众号，回复视频领取粉丝福利
<template>
<canvas id="draw" width="500" height="500"></canvas>
</template>
<script>
function onready(){
var draw = document.querySelector('#draw'); //获取画布
var ctx = draw.getContext('2d'); //获取画布的2d上下文
var drawWidth = draw.width; //获取画布的宽度
var drawHeight = draw.height; //获取画布的高度
var rand=(min,max) => parseInt(Math.random()*(max-min)+min); //一个随机函数，生成随机数
class Ball{
constructor(ctx,drawWidth,drawHeight){
this.ctx = ctx;
this.color = `rgb(${rand(0,255)},${rand(0,255)},${rand(0,255)})`;//修改颜色
let r = rand(2,20); //生成半径
this.r = r;
this.x = rand(r,drawWidth-r); //圆心在画布中的 X坐标
this.y = rand(r,drawHeight-r); //圆心在画布中的 Y坐标
}
drawing(){
this.ctx.beginPath(); //开始绘制路径
this.ctx.arc(this.x,this.y,this.r,0,Math.PI*2,true); //绘制圆形
this.ctx.fillStyle = this.color; //填充圆形的颜色(颜色随机生成)
this.ctx.closePath(); //绘制路径结束
this.ctx.fill(); //填充圆形
}
}
let obj1 = new Ball(ctx,drawWidth,drawHeight); //实例化一个对象
obj1.drawing(); //调用方法（开始画圆）
}
export default {
data(){
return { }
}
}
</script>
<style>
#draw{
border: 1px solid red; //画布的边框
}
</style>
