vueのいじってみた2

なんかいろいろやってみる webpack?? veu init

gakugaku@gakunoMacBook ~/g/s/veu (master)> vue init webpack test2/

? Target directory exists. Continue? Yes
⠋ downloading template
? Project name test2
? Project description A Vue.js project
? Author gaku <m16095@g.metro-cit.ac.jp>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recom
mended) npm

動かしてみる

nmp run dev

で動いた

Circuit.vueを作成し、以下を記入

<template>
  <div class="circuit">
    <img alt="test" src="../assets/test.png" />
    <p v-if="msg.length > 0">
      {{ msg }}
    </p>
    <h1></h1>
    <input type="number" v-model="msg" />
    <button @click="clear()">clear</button>
    <canvas id="board" width="460" height="460"></canvas>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "Hello World!"
    };
  },
  methods: {
    clear() {
      this.msg = "";
    }
  }
};

window.onload = () => {
  // canvas準備
  const board = document.getElementById("board"); //getElementById()等でも可。オブジェクトが取れれば良い。
  const ctx = board.getContext("2d");

  // 画像読み込み
  const chara = new Image();
  chara.src = "/images/test.png"; // 画像のURLを指定

  console.log(chara.src);
  chara.onload = () => {
    console.log("a");
    ctx.drawImage(chara, 0, 0);
  };
};
</script>

index.jsに以下を追加

{
    path: "/circuit",
    name: "Circuit",
    component: () => import("../views/Circuit.vue")
  }

App.vueに以下を追加

<router-link to="/circuit">Circuit</router-link>

回路の画像はassetsだとwebpackされてしまい、画像として認識されなかったので、publicにimagesフォルダを作成しそこに追加

canvasで画像を編集し始めてみる

window.onload = () => {
  // canvas準備
  const board = document.getElementById("board"); //getElementById()等でも可。オブジェクトが取れれば良い。
  const ctx = board.getContext("2d");
  const scale = 1; // 縦横を50%縮小
  // 画像読み込み
  const chara = new Image();
  chara.src = "/images/test2.png"; // 画像のURLを指定
  chara.onload = () => {
    var dstWidth = chara.width * scale;
    var dstHeight = chara.height * scale;
    ctx.drawImage(chara, 150, 100, dstWidth, dstHeight);
  };
};

これで、画像の位置と大きさを変更できるようになっ

window.onload = () => {
  // canvas準備
  const board = document.getElementById("board"); //getElementById()等でも可。オブジェクトが取れれば良い。
  const ctx = board.getContext("2d");
  const scale = 1; // 縦横を50%縮小
  // 画像読み込み
  const chara = new Image();
  chara.src = "/images/test2.png"; // 画像のURLを指定
  var wides = window.innerWidth;
  var high = window.innerHeight;
  var text = "5";
  chara.onload = () => {
    var dstWidth = chara.width * scale;
    var dstHeight = chara.height * scale;
    board.width = wides;
    board.height = high;
    var a = 25;
    ctx.font = a + "px sans-serif";
    ctx.drawImage(chara, 150, 100, dstWidth, dstHeight);
    ctx.fillText(text, 280, 270);
    ctx.fillText("", 100, 270);
  };
};

またちょっと変更した