HTML5:レーザーの実装とグラデーション描画

　レーザーは割と思った通りすんなり実装することが出来た。つまづいたのがレーザーのグラデーション描画だ。ただの四角い箱だけだと味気ないかなとおもい、レーザーの両端を少し薄暗くしてみたいと思い、四角形のグラデーション描画に挑戦したところ、まったくグラデーションが反映されなかった。

・コードの順番が悪い？
・値の指定が間違っている？
・関数のつづりがちがう？

色々考えたがわからない。
う〜ん。

関数の値を色々いじってみると、ついにわかった。

・グラデーション指定する座標はキャンバス上の座標

ということだ。

グラデーションを指定する時に、

let g = cnt.createLinearGradient( 開始x, 開始y , 終了x, 終了y );

こいつで座標を指定するのだが、これについて私は「これから描画する四角形の中の座標」だと思い込んでいた。そのため、指定した値は

( 0, 0, 8, 0 );

としていたのだが、実際にこれを動かすと、キャンバス上の(0,0)〜(8,0)の間だけしかグラデーションがかからない。

自機が(100,100)に居たとして、レーザーを(104,100)から出すとしたら、

(104,100,104+8, 0 );　　//　←+8はレーザーの太さ分

と指定してやらないといけない。レーザーは自機に追随するので、リアルタイムでグラデーション範囲も変えないといけないのだった。

「相対距離じゃなくて絶対距離」

っていうことですかね。


　わかりやすく図説しようとしたのに画像がアップロードできなかった。