最近、HTML5 のいくつかの新しい要素属性を研究したところ、特に新しいタグ要素 Canvas が非常に使いやすいことがわかりました。公式紹介: Canvas API (canvas) は、Web ページ上にリアルタイムで画像を生成するために使用される HTML5 の新しいタグであり、基本的には JavaScript で操作できるビットマップです。以下では、JavaScript と Canvas を組み合わせて描画ボード機能を実装しています。
効果デモンストレーション画像:
コード部分（直接コピーして使用してください）
<!DOCTYPE HTML><html><head> <meta charset=utf-8 /> <title>JavaScript+Canvas によるカスタム描画ボードの実装</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); //黒い四角形を描画します ctx.fillStyle=black; ctx.fillRect(0,0,600,300); //マークを押します var onoff = false //変数 oldx と oldy はマウスが移動する前の座標を表します var oldx = -10 ; var oldy = -10; //色を設定します var linecolor = 白 //線幅を設定します var linw = 4; // マウス移動イベントを追加します Canvas.addEventListener(mousemove,draw,true); // 3 番目のパラメータは主にキャプチャまたはバブリングに関連します // マウス プレス イベントを追加します Canvas.addEventListener(mousedown,down,false); // マウスを追加しますup イベント Canvas.addEventListener(mouseup,up,false); function down(event){ onoff = true;イベント.ページY-10; //コンソール.ログ(イベント.ページX+'....000....'+イベント.ページY) / /event.pageX とevent.pageY は、オーバーフロー部分 (つまり、スクロール バー) を含むページ全体のマウス位置を基準にしています。 == true) { var newx = イベント.pageX-10; var newy = event.pageY-10; ctx.beginPath();//beginPath() 現在定義されているパスを破棄し、新しいパスを開始します。現在のポイントを (0,0) に設定します。 ctx.moveTo(oldx,oldy); //クリックされたときの座標を原点として移動します ctx.lineTo(newx,newy) //新しいパスを描画します ctx.drawingStyle=linecolor; ; ctx.lineCap=round; ctx.blood();// ストローク() メソッドは、moveTo() メソッドと lineTo() メソッドで定義されたパスを実際に描画します。デフォルトの色は黒です。 //新しいマウスの位置を次の描画開始座標に割り当てますoldx = newy = newy };</script></body></html>以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。