cman.jpWEBページ作成
広告
マウスによる線画
広告
マウスによる線画のサンプル
線（形状、色、太さ）を選択
| 線の形状 |
|
|---|---|
| 線の色 | |
| 線の太さ |
マウスによる線画を描く （マウスを押したまま移動してはなす）
線画を画像で表示 （右クリックで保存可能）
マウスによる線画、線画を画像に変換するjavascriptを表示
※直前に描いた線画のjavascriptを表示します。
マウスによる線画のjavascript
サンプルはコピー＆ペーストしてご利用ください。
canvasに描いた線画を画像に変換するjavascript
function toDataURL(){
var wimg = canvas.toDataURL();
// 変換した画像を<img>タグに設定
document.getElementById("urlimg").src = wimg;}
var wimg = canvas.toDataURL();
// 変換した画像を<img>タグに設定
document.getElementById("urlimg").src = wimg;}
ＣＯＮＴＥＸＴ設定値 （上記javascriptで使用のもののみ）
contextの設定値は、下記以外にも多数あります。それらを指定すると、より複雑な図形を描くことができます。
【メソッド】
| メソッド | 意味 | パラメータ設定値 |
|---|---|---|
| arc (x,y,r,sAngle,eAngle,anticlockwise) | 円を作成 （描画は、fill、strokeをで行う） |
x：円の中心ｘ座標 y：円の中心ｙ座標 r：半径 sAngle：開始位置の角度 eAngle：終端位置の角度 anticlockwise：false（時計廻り）、true（反時計廻り） |
| beginPath | 現在のパスをクリアする | - |
| clearRect (x,y,width,height) | 指定領域をすべてクリア | x：始点のｘ座標 y：始点のｙ座標 width：始点からの幅 height：始点からの高さ |
| fill | 塗りつぶしの描画 | - |
| fillRect (x,y,width,height) | 塗りつぶしの四角を描画 | clearRectと同様 |
| lineTo(x,y) | 特定済みの始点より線を作成 （描画は、strokeをで行う） |
x：終点のｘ座標 y：終点のｙ座標 |
| moveTo(x,y) | 地点を特定 | x：地点のｘ座標 y：地点のｙ座標 |
| stroke | 線を描画 | - |
| strokeRect (x,y,width,height) | 四角を描画 | clearRectと同様 |
【属性】
| 属性名 | 意味 | 設定値 |
|---|---|---|
| fillStyle | 塗りつぶしの色 | 単一色、グラデーション、パターン |
| globalCompositeOperation | 配置方法の指定 | source-over：元の画像に上書きする（デフォルト） destination-over：元の画像に透明で上書きする （重なる部分は、透明になる） source-atop,source-in,source-out destination-atop,destination-in,destination-out lighter,copy,xor,vendorName-operationName |
| lineCap | 線の終端 | butt：キャップなし, round：丸, square：四角 |
| lineWidth | 線の幅 | 数値 |
| strokeStyle | 線の色 | 単一色、グラデーション、パターン |
注意事項
- canvas上のマウスの座標を、clientx、clientyで取得すると画面左上を基点とした値となります。そのため、canvasが画面左上に表示されていない場合、描画がマウスからずれて表示されます。ずれを補正するため、clientx、clientyの値からcanvasの絶対座標値（"getBoundingClientRect"で取得）を差し引きます。
- canvasのサイズは、cssに指定すると、canvasのデフォルトサイズ（width=300、height=150）からの相対サイズとなり、拡大または、縮小して表示されます。そのため、canvasのサイズは、canvasタグのwidth、heightに指定します。
| 関連するJavaScript |
|---|
| カーソル形状の変更。マウスに画像を追従 |
| 画像やDIVをマウスで好きな場所に移動 |
広告