canvasタグは描画をした後サイズを変更すると内容が消えるよ

2021年1月11日

Javascript テクノロジー

t f B! P L
eyecatch 改めて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; } はみ出したまま、サイズ変更されちゃうよ。

人気の投稿

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。

ブログ アーカイブ