質問編集履歴
2
コードの省略について記載
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -5,6 +5,7 @@
|
|
|
5
5
|
すでにアップロードしてある画像データ（imgフォルダ内）をCanvas描画させようとしているのですが、以下のコードでは描画されません。
|
|
6
6
|
onload内のコンソールログが表示されないので、ここの記載が間違っているようです。
|
|
7
7
|
どうか、ご教示のほど、よろしくお願いします。
|
|
8
|
+
※HTML、bodyタグなどは省略しています。
|
|
8
9
|
```html
|
|
9
10
|
<div id="app">
|
|
10
11
|
<canvas id="canvas" width="320" height="320" ref="canRef"></canvas>
|
1
scriptタグの抜け、閉じ括弧の抜けを訂正。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -10,23 +10,25 @@
|
|
|
10
10
|
<canvas id="canvas" width="320" height="320" ref="canRef"></canvas>
|
|
11
11
|
<div>
|
|
12
12
|
|
|
13
|
+
<script>
|
|
13
|
-
new Vue({
|
|
14
|
+
new Vue({
|
|
14
|
-
|
|
15
|
+
el: '#app',
|
|
15
|
-
|
|
16
|
+
data: {
|
|
16
|
-
|
|
17
|
+
canvas: null,
|
|
17
|
-
|
|
18
|
+
ctx: null,
|
|
18
|
-
|
|
19
|
+
img: null,
|
|
19
|
-
|
|
20
|
+
src: null
|
|
20
|
-
|
|
21
|
+
},
|
|
21
|
-
|
|
22
|
+
mounted: function() {
|
|
22
|
-
|
|
23
|
+
this.canvas = this.$refs.canRef
|
|
23
|
-
|
|
24
|
+
this.ctx = this.canvas.getContext('2d')
|
|
24
|
-
|
|
25
|
+
this.src = 'img/tomato.png'
|
|
25
|
-
|
|
26
|
+
this.img = new Image()
|
|
26
|
-
|
|
27
|
+
this.img.onload = function() {
|
|
27
|
-
|
|
28
|
+
console.log('loaded')
|
|
28
|
-
|
|
29
|
+
this.ctx.drawImage(this.img, 0, 0);
|
|
30
|
+
}
|
|
29
31
|
}
|
|
30
|
-
}
|
|
32
|
+
})
|
|
31
|
-
|
|
33
|
+
</script>
|
|
32
34
|
```
|