ツールとしては、
- マウスでクリック中ペイント可
- 色を変えれる
- 線の太さを変えれる
まずはcanvas属性でマウスイベントを取得するため、addEventListenerで以下のマウス属性を指定。
- mousedown
- mousemove
- mouseup
またマウスのクリック場所を正確に取得するため、描画するcanvasの場所を絶対属性で指定。
<!DOCTYPE html> <html>
つづいて、それぞれの登録されたイベントリスナーから呼び出されるメソッドを実装。
ポイントは、
- mousedownでクリック開始位置をセット
- mousemoveで描画処理
- mouseupで描画終了
以下ソース。
<body onload="drawInit()"> </body>
0 件のコメント:
コメントを投稿