我的第一个项目(七):(解决问题)Vue中canvas无法绘制图片

2023-03-31 20:11:54 来源：博客园

好家伙,

【资料图】

现在,我想要把我的飞机大战塞到我的主页里去,想办法把文件导入

然后,直接死在第一步,图片渲染都成问题

先用vue写一个测试文件

来测试canvas的绘制

<script>// import { PlaneBattle } from "../../../../PB for Vue/startgame"// console.log(document.getElementById("stage"))// plane.create(document.getElementById("stage"));export default {  methods: {    drawsth() {      // PlaneBattle.createNewGame(this.$refs.stage)      // console.log(this.$refs.stage)      // plane.create(this.$refs.stage)      console.log("我被执行啦")      let canvas = document.createElement("canvas");      this.$refs.stage.appendChild(canvas);      canvas.width = 480;      canvas.height = 650;      canvas.ref = canvas;      canvas.style = "border: 1px solid red;"      // this.$ref.stage.style =       console.log(this.$refs.stage)      console.log("...")      console.log(this.$refs.stage.canvas)      const context = canvas.getContext("2d");      let img = new Image();      img.src = "../assets/logo.png";        context.drawImage(img, 0, 0 ,480 ,650)    }  }}</script>

随后,在大佬的帮助下,我找到了问题所在

问题一:

应使用require的方式设置图片的src

img.src = "../assets/logo.png";

改为:

img.src = require("../assets/logo.png")

问题二:

必须在图片加载完毕后再进行绘制

context.drawImage(img, 0, 0 ,480 ,650)

改为(在外面套一层onload)

img.onload = function () {        console.log("img加载完毕")        context.drawImage(img, 0, 0 ,480 ,650)      }

修改后的代码:

<script>// import { PlaneBattle } from "../../../../PB for Vue/startgame"// console.log(document.getElementById("stage"))// plane.create(document.getElementById("stage"));export default {  methods: {    drawsth() {      // PlaneBattle.createNewGame(this.$refs.stage)      // console.log(this.$refs.stage)      // plane.create(this.$refs.stage)      console.log("我被执行啦")      let canvas = document.createElement("canvas");      this.$refs.stage.appendChild(canvas);      canvas.width = 480;      canvas.height = 650;      canvas.ref = canvas;      canvas.style = "border: 1px solid red;"      // this.$ref.stage.style =       console.log(this.$refs.stage)      console.log("...")      console.log(this.$refs.stage.canvas)      const context = canvas.getContext("2d");      let img = new Image();      // img.src = "../assets/logo.png";      img.src = require("../assets/logo.png")      img.onload = function () {        console.log("img加载完毕")        context.drawImage(img, 0, 0 ,480 ,650)      }    }  }}</script>

搞定:

搞定了

关键词：