首页 > 其他分享 >我的第一个项目(七):(解决问题)Vue中canvas无法绘制图片

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

时间:2023-03-31 20:11:51浏览次数:42  
标签:canvas Vue console log img .. 绘制 stage

好家伙,

 

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

 

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

 

先用vue写一个测试文件

来测试canvas的绘制

<template>
  <div>
    <div ref="stage"></div>
    <button @click="drawsth()">添加</button>
    <img src="../assets/logo.png" alt="">
  </div>
</template>

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

<style>
#stage {
      width: 480px;
      height: 650px;
      margin: 0 auto;
    }
</style>

 

 

 

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

 

 

问题一:

应使用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)
      }

 

修改后的代码:

<template>
  <div>
    <div ref="stage"></div>
    <button @click="drawsth()">添加</button>
    <img src="../assets/logo.png" alt="">
  </div>
</template>

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

<style>
#stage {
      width: 480px;
      height: 650px;
      margin: 0 auto;
    }
</style>

 

搞定:

 

 

搞定了

 

 

标签:canvas,Vue,console,log,img,..,绘制,stage
From: https://www.cnblogs.com/FatTiger4399/p/17275903.html

相关文章

  • Vue 2中实现数字滚动效果
     代码:<template><divclass="statistics-num"><!--显示当前数字,不使用逗号分隔符--><spanclass="num">{{currentVal.toString()}}</span><!--显示当前数字,用逗号分隔符--><!--<spanclass="num......
  • Vue引用富文本编辑器
    1.在package.json加上并安装依赖"devDependencies":{"@jsdawn/vue3-tinymce":"^1.1.7",}2.在页面中引入importVue3Tinymcefrom"@jsdawn/vue3-tinymce";3.使用<vue3-tinymcev-model="item.blockDataObj.text":s......
  • vue 使用 导出 Excel
    import*asXLSXfrom"xlsx";exportExcel(){varwb=XLSX.utils.table_to_book(document.querySelector('#data-table2'),{raw:true});varwbout=XLSX.write(wb,{bookType:'xl......
  • vue2中使用antv/G6节点内容可滚动的ER图
    先举一个栗子: 如果不会请移步到官网的栗子,请点击查看狠人话不多,直接给大家上代码:整体代码片段<template><divid="container"style="position:relative;"></div></template><script>/*eslint-disable*/importG6from"@antv/g6";i......
  • vue3创建工程
    创建Vue3项目的步骤如下:安装Node.jsVue3需要依赖Node.js环境,因此需要先安装Node.js。可以从官网下载Node.js的安装包并安装,也可以使用包管理器安装,例如在Ubuntu上可以使用以下命令安装:sudoapt-getupdatesudoapt-getinstallnodejssudoapt-getinstallnpm......
  • vue+leaflet示例:克里金插值渲染显示(附源码下载)
    demo源码运行环境以及配置运行环境:依赖Node安装环境,demo本地Node版本:14.19.1。运行工具:vscode或者其他工具。配置方式:下载demo源码,vscode打开,然后顺序执行以下命令:(1)下载demo环境依赖包命令:npmi(2)启动demo命令:npmrundev(3)打包demo命令:npmrunbuild:release示例效果......
  • vue3 - 在单独的项目制作自定义组件插件,支持vite【前提不要使用webpack专属语法】
    1.背景与vue2组件不一样,没有那么随意,如果想要支持vite,那么不要使用webpack专属语法,如defide和 require等2.解决在 package.json文件属性  main配置为插件入口文件位置,至于是js还是ts随意 目录  简单做了个组件  入口文件内容如下importComponentf......
  • vue或者react中的hooks的理解
    我们听过react里面有hooks的概念,那么怎么理解hooks呢? 其实vue2中,我们没有hooks的概念,vue3中我们引入了组合式函数(也就是用组合式api写的),它其实就是vue的hooks。 总结下来,hooks有以下特点:1、hooks其实就是个函数,只是实现它的方法比较特殊,利用组合式api实现的。2、组合式函......
  • Vue整合EsMap
    一、EsMap地图1.1.生成EsMap本地文件1.1.1.进入EsMap数字孪生三维可视化云平台打开链接https://www.esmap.cn/esmapv/content/cn/member/index.html1.1.1.新建三维场景点击新增三维场景,输入信息,点击下一步即可。其中三维场景ID和建筑token在web端需要使用ID为项目工程......
  • Vue2电商实战项目
    单页面应用分为3层结构层(template)样式层(style)行为层(script)入口文件main.js:程序最开始执行的文件babel:就是翻译官,比如ES6语法转换成ES5语法脚手架使用-命令行创建项目:vuecreate项目名称-node_modules:放置项目依赖的地方-public:一般......