在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>

(明天给他解决一下) 

 

 分享一个很帅的动态背景:

Vue中利用canvas添加炫动背景_同一片云彩的博客-CSDN博客