在Vue中使用Canvas绘制背景
好家伙，
在vue中使用canvas绘制与在html中使用canvas绘制大致相同,
但又有所区别
法一(无图片资源):
vue中canvas的使用 - 掘金 (juejin.cn)
- 找到cancas元素；
- 创建context对象；getContext() 方法返回一个用于画布上绘图环境；参数 ‘2d’ 指定了画布上绘制的类型，它指定了二维绘图，
- 并且导致这个方法返回一个环境对象，该对象导出一个二维绘图API。了解别的参数查看MDN文档。
- 设置fillStyle属性可以是CSS颜色，渐变，或图案。
- fillRect(x,y,width,height) 方法定义了矩形当前的填充方式，x、y为坐标位置。
法二(有图片资源):
var img = new Image(); // 创建 img 元素
img.onload = function(){
// 执行 drawImage 语句
}
img.src = 'myImage.png'; // 设置图片源地址
修Bug:然而为什么画不出来呢?
<template>
<div>
<canvas id="myCanvas" width="480" height="650"></canvas>
<!-- <img src="../../assets/background.png" alt=""> -->
</div>
</template>
<script>
export default {
mounted() {
this.initCancas();
},
methods: {
initCancas() {
console.log("初始化canvas");
let canvas = document.getElementById('myCanvas');
let context = canvas.getContext('2d');
const bg = new Image();
bg.src = "../../assets/background.png";
context.drawImage(bg, 0,0);
console.log('结束')
bg.addEventListener("load", () => {
setInterval(() => {
context.drawImage(this.bg, 0,0);
},10)
})
},
}
}
</script>
<style>
canvas {
border: 1px solid red;
}
</style>
(明天给他解决一下)
分享一个很帅的动态背景:
