カスタムお絵かきボード用JavaScript+Canvasサンプルコード
2022-01-31 02:56:43
最近、HTML5の新しい要素プロパティをいくつか調査したところ、特に新しいタグ要素Canvasがとても便利であることがわかりました。正式には、Canvas API（キャンバス）は HTML5 の新しいタグで、ウェブページにリアルタイムで画像を生成し、画像コンテンツを操作することができます。以下では、JavaScriptとCanvasを組み合わせて、Canvasの機能を実装しています。
効果のデモ画像です。
コード部分（コピーして使うだけです）
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>JavaScript+Canvas for custom drawing boards</title>
</head>
<body>
<canvas id="canvas" width="600" height="300"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
// Draw a black rectangle
ctx.fillStyle="black";
ctx.fillRect(0,0,600,300);
//Press the marker
var onoff = false;
//the variables oldx and oldy represent the coordinates of the mouse before it moves
var oldx = -10;
var oldy = -10;
//set the color
var linecolor = "white";
//set the line width
var linw = 4;
//add mouse-over events
canvas.addEventListener("mousemove",draw,true); //the third parameter is mainly related to capture or bubble
//add the mouse press event
canvas.addEventListener("mousedown",down,false);
//add mouse popup event
canvas.addEventListener("mouseup",up,false);
function down(event){
onoff = true;
oldx = event.pageX-10;
oldy = event.pageY-10;
//console.log(event.pageX+'............. .000.............' +event.pageY);
//event.pageX and event.pageY relative to the entire page mouse position including the overflow (which is the scrollbar)
}
function up(){
onoff = false;
}
function draw(event){
if(onoff == true){
var newx = event.pageX-10;
var newy = event.pageY-10;
ctx.beginPath();//beginPath() discards any currently defined path and starts a new one. It sets the current point to (0,0).
ctx.moveTo(oldx,oldy); //move to the coordinates at the time of the click, using that coordinate as the origin
ctx.lineTo(newx,newy); //draw the new path
ctx.strokeStyle=linecolor;
ctx.lineWidth=linw;
ctx.lineCap="round";
ctx.stroke();// The stroke() method will actually draw the path defined by the moveTo() and lineTo() methods. The default color is black.
//assign the new mouse position to the starting coordinates for the next drawing
oldx = newx;
oldy = newy;
};
};
</script>
</body>
</html>
以上、本記事の全内容をご紹介しましたが、皆様の学習のお役に立てれば幸いです。また、Script Houseをより一層ご支援いただければ幸いです。
関連
-
動画下の自動再生プロパティが無効な場合の解決方法（ミュートプロパティを追加する）。
-
HTML5 の数値入力コードで整数値のみを受け付けるようにする
-
中国語の文字にピンインを追加してコンポーネントを折りたたみ、展開するためのHTML5コード
-
花火用キャンバスサンプルコード
-
HTMLテーブルのテーブルボーダーの実装アイデア
-
IOSキーボードがfocusoutイベントでしまわれたときに元の場所に戻らない問題を解決する
-
html5 目覚ましアプリミニノート
-
HTML5でjsonオブジェクトを使用するためのサンプルコード
-
webViewでhtml画像を読み込む際の問題を解決する。
-
html2 canvasで印刷用の鮮明な画像を生成
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン