HOME > MIDI/AUDIO LAB

Web MIDI API 実験室

widthとclientWidth

canvas の設定とマウス位置との関係

<canvas></canvas>
と記述すると以下の赤のエリアとなる。キャンパスの初期値は300pxx150pxとなっている。
canvasの上へマウスを乗せると、その位置を表示します。
canvasの右上が(0,0) です。



<canvas width="600" height="300"></canvas>
と記述すると以下の青のエリアとなる。キャンパスサイズは600pxx300pxに設定される。




<canvas id="t03" width="300" height="150"></canvas>
#t03 {width: 50%}
と記述すると以下の緑のエリアとなる。
canvas タグでは、width="300", height="150"との設定であるが、
css でwidth 50% と設定すると、width=300 が、windowサイズの50%に拡大される。
その拡大率に合わせて、heightも拡大される。
マウスの位置は、clientWidth, clientHeightの値で返される。



<canvas id="t04" width="300" height="150"></canvas>
#t04 {width: 50%}
と記述し、
canvas.height = 300;
canvas.width = 700;
すると以下の黄色のエリアとなる。
canvas タグでは、width="300", height="150"との設定であるが、
後で、キャンパスのサイズをwidth=700, height=300" に変更、さらに
css でwidth 50% に変更され、width=700 が、windowサイズの50%に拡大される。
その拡大率に合わせて、height=150も拡大される。
マウスの位置は、clientWidth, clientHeightの値で返される。




Copyright © Mikata Hawa 2015-2020
fabercastell679@yahoo.com