###前提・実現したいこと
ここに質問したいことを詳細に書いてください
Vueを用いてcanvasで線を描画しようとしていた際に疑問に思った点について質問したいと思っています。
Vue、canvas共に勉強をし始めたばかりなので、詳しい仕様についてわからないため教えていただきたいです。
###ソースコード
javascipt
1var ctx 2window.onload = function() { 3 ctx = document.getElementById("canvas").getContext("2d") 4 var field 5 6 field = new Vue({ 7 el: ".field", 8 data: { 9 message: "aaa" 10 }, 11 methods: { 12 send: function(event) { 13 setCanvas() 14 } 15 }, 16 created: function() { 17 18 } 19 }) 20 21} 22 23var setCanvas = function() { 24 ctx.strokeStyle = "#f00" 25 ctx.lineWidth = 10 26 ctx.beginPath(); 27 ctx.moveTo(20, 20); 28 ctx.lineTo(120, 20); 29 ctx.lineTo(120, 120); 30 ctx.lineTo(20, 120); 31 ctx.stroke(); 32}
html
<div class="field"> <canvas id="canvas"></canvas> <button v-on:click="send">send</button> </div>
###問題点について
上記のプログラムでsendボタンを押した際に、canvasで線が描画されず、困っております。
また、下記のようにプログラムを変更したところ、(canvasをfieldの外に出したところ)線が描画されるようになりました。
上記のプログラムで線が描画されない理由を教えていただきたいです。
###試したこと
html
<canvas id="canvas"></canvas> <div class="field"> <button v-on:click="send">send</button> </div>
このように変更を加えたら、線が描画されるようになりました。
初めての質問のため、至らぬ点があるとは思いますが、この仕様について教えていただきたいです。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/12/17 09:00