改めてcanvasって便利なタグだな〜と気がついた、弓削田です。
webページに、いろいろな図形や画像を好き勝手描けるし、表示スピードも早い。
ゲームなどに向いているのもわかる気がするけど、
その独特なプログラミング手法をスキルとして持っていると、
もはや、webサイトでの表現は無限大です。
でも、そんなcanvasタグを使った操作で、やってから気がついた点があったので、それを共有したいと思います。
canvasを使って三角形を描画する
とあるプログラミング問題集を作っていたときに、「三角形の面積を求めよ」という問題で、実際の三角形を描画しようと思って以下のようなコードで記述してみました。
<canvas class="sample"></canvas>
<script>
let canvas = document.querySelector("canvas");
let ctx = canvas.getContext("2d");
let w = 100;
let h = 100;
ctx.beginPath();
ctx.moveTo(w/2 , 0);
ctx.lineTo(0 , h);
ctx.lineTo(w, h);
ctx.closePath();
ctx.strokeStyle = "rgb(0,0,0)";
ctx.stroke();
ctx.fillStyle="rgba(0,0,255,0.1)";
ctx.fill();
</script>
そして表示されたのが以下のような図形です。
とりあえず、この時点では問題ないのですが、サイズを動的に変更させようと思って、100~500ぐらいの数値にしてみたところ、
GoogleChromeブラウザのmac版では、300×150のサイズでデフォルト表示されているため、その値を超えると、図形がcanvasからはみ出てしまう事象が発生しました。
canvasのサイズを変更すれば解決するのだが・・・
上記はみ出したときに、canvasタグにwidthとheightをセットすればいいかと思ってやってみた所・・・
canvas画面が真っ白になる事象が確認された。
let canvas = document.querySelector("canvas.sample");
canvas.width = 500;
canvas.height = 100;
・・・？？？
通常、javascriptでタグのサイズを変更するのと同じような感じでやったのだが、どうやらcanvasはサイズ変更されると、画面描画がclearされてしまうらしい。
なので、この命令を、描画の前に行う必要があるということ。
やってはいけないcanvasのstyleサイズ変更
そして注意点として、cssでcanvasのサイズを変更するというワザは、以下のような惨めな結果に繋がります・・・
canvas.sample{
width:500px;
height:100px;
}
はみ出したまま、サイズ変更されちゃうよ。
