(ちょっとメモ)canvasサイズをCSS3のvw, vhで取得してみたけど...

最終更新日:2015年07月04日  (初回投稿日:2015年07月04日)

先日アップした「[69-12] canvasをサイトの背景に使おう」で、
canvasのサイズをブラウザ ウィンドウサイズと一致させるためには、
canvasの親要素にdivを用意し、そのdivはCSSでフルサイズ指定。canvasサイズはその親のdivから取得するのが共通の方法みたい」と書きました。

そこに「width:100vw; height:100vh」でいけるんじゃないかと情報をいただき、
早速試してみました。

vw, vh は、CSS3での新しい単位
「v」は「Viewport」の頭文字。ビューポートとはデバイスの表示領域のことです。
1vw = ビューポートの幅の 1/100(100vwで横幅いっぱい)
1vh = ビューポートの高さの 1/100(100vhで高さいっぱい)です。

確かに親のdivなんかなくても canvasのサイズ取得はできました
(それだけでも画期的か)
しかし、描画が変にボケてしまうんです。小さいものを拡大したようなボケ方で。残念!
canvasの描画部分は、座標や幅・長さなどはピクセル単位なのですが、これが、vw, vh単位に影響されるのか、ビューポートへの割合に変化するようです。(それでなぜボケるのかは不明ですが)

サイズ取得はできるのに、描画部分が「ボケ」て使い物にならない

サンプルはこちらです。canvasがちゃんと背景になっていますが、描画がボケボケ。
描画部分は「サンプル2」を流用しています。
canvasをサイトの背景にしよう:サンプル番外編

こちらが「サンプル2」。ラインがクッキリ。
canvasをサイトの背景にしよう:サンプル2

サンプル2」の描画部分のソースをそのまま流用した時点では、
このように背景が白くとんでいました。

ですが、少しラインらしきものも現れます。
「ctx.globalCompositeOperation = "lighter"」の影響で、ラインの幅が太すぎて重なり部分が多くて、全体に白くとんでいるんだと思われます。

ラインの幅の数値を少なくしたら、冒頭の「サンプル番外編」の表示になりました。
そこで、単位がピクセルでなく表示領域に対する割合になったのではないかと思った次第です。
ラインの幅は、サンプル2では「150」にしていました。150pxのつもりで指定していますが、これを150vw(またはvh)で解釈されたのではないか?と。
「30」にしたら、そこそこ見られるようになりました。30vwなのか30vhなのか不明ですが...。

ただ、単位が変わったからといって、なぜボケるのか?
小さく作って拡大描画しているからボケるんだと思うけど、どんな数値で描画して何を基準に拡大率を決めているのかが、サッパリ。
あれこれいじってみましたが、どうにも調整できず、あきらめました。
結局、親のdivのサイズをピクセルで取得して、canvasサイズに当て込む方法が、今のところスタンダード、というか「実用的」だと思います。

そもそも、canvasをCSSで親のbodyに対して縦横100%に指定しても、描画コンテキストがあると描画できなかったため、仲介に親のdivを設けたのでした。
ということは「canvasサイズはピクセルで取得しなければならない」ということじゃないかな。

そのうち canvas API が vw, vh単位に対応すればイケルのかしらん?
とにかくもっと簡単にサイズ取得ができるといいのですが。
それより、canvasを body要素に backgroundプロパティで貼れたらいいのに! CSS4か5あたりで実現したりしてね。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
09 | 2017/10 | 11
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.