ホームページ > 記事 > ウェブフロントエンド > キャンバスを使って便利な落書きボードを作成する方法
今回は、キャンバスを使って便利な落書きボードを作る方法を紹介します。キャンバスを使って便利な落書きボードを作るときの注意点は何ですか?実際の事例を見てみましょう。キャンバス内のカーソル座標を取得します
座標を取得するコードは非常に簡単です:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <style> *{margin: 0;padding: 0} </style></head><body> <canvas id="board" style="border: 1px #ccc solid;"></canvas> <span id="point"></span> <script> var canvas = document.getElementById('board'); var context = canvas.getContext('2d'); var current = { color: 'black',//<===画笔颜色配置 width: 1//线条宽度 }; //获取点坐标 function getPoint(e) { if (e.touches && e.touches.length > 0) { var touch = e.touches[0]; return { x: touch.pageX, y: touch.pageY }; } return { x: e.clientX, y: e.clientY }; } //鼠标移动 function onMouseMove(e) { var p = getPoint(e); document.getElementById("point").innerHTML=p.x+"-"+p.y; } canvas.width = 600; canvas.height = 300; canvas.addEventListener('mousemove', onMouseMove, false); //<==兼容PC canvas.addEventListener('touchmove', onMouseMove, false);//<===兼容安卓或其他系统 </script></body></html>注: マウスとタッチ スクリーンのイベントは異なるため、マウスはキャンバス上でホバーするだけで取得できますが、タッチ スクリーンを押す必要があり、返される Event オブジェクトも異なります。 2. 描画するかどうかの制御描画するかどうかの制御は、実際には非常に簡単です。つまり、自己定義変数の値を判断して制御します
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <style> *{margin: 0;padding: 0} </style></head><body> <canvas id="board" style="border: 1px #ccc solid;"></canvas> <span id="point"></span> <script> var canvas = document.getElementById('board'); var context = canvas.getContext('2d'); var current = { color: 'black',//<===画笔颜色配置 width: 1//线条宽度 }; var drawing = false;//<===是否绘制 //获取点坐标 function getPoint(e) { if (e.touches && e.touches.length > 0) { var touch = e.touches[0]; return { x: touch.pageX, y: touch.pageY }; } return { x: e.clientX, y: e.clientY }; } //鼠标按下 function onMouseDown(e) { drawing = true; } //鼠标弹起 function onMouseUp(e) { if (!drawing) { return; } drawing = false; } //鼠标移动 function onMouseMove(e) { if (!drawing) { return; } var p = getPoint(e); document.getElementById("point").innerHTML=p.x+"-"+p.y; } canvas.width = 600; canvas.height = 300; canvas.addEventListener('mousedown', onMouseDown, false); canvas.addEventListener('mouseup', onMouseUp, false); canvas.addEventListener('mouseout', onMouseUp, false); canvas.addEventListener('mousemove', onMouseMove, false); canvas.addEventListener('touchstart', onMouseDown, false); canvas.addEventListener('touchend', onMouseUp, false); canvas.addEventListener('touchmove', onMouseMove, false); </script></body></html>3. 線描画のコードです。線画もとても簡単です
....//线条绘制function drawLine(x0, y0, x1, y1, color, width) { context.beginPath(); context.moveTo(x0, y0); context.lineTo(x1, y1); context.strokeStyle = color; context.lineWidth = width; context.stroke(); context.closePath(); } ....線画のコードをイベントに組み込みます:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title></head><body> <canvas id="board" style="border: 1px #ccc solid;"></canvas> <span id="point"></span> <script> var canvas = document.getElementById('board'); var context = canvas.getContext('2d'); var current = { color: 'black',//<===画笔颜色配置 width: 1//线条宽度 }; var drawing = false;//<===是否绘制 //获取点坐标 function getPoint(e) { if (e.touches && e.touches.length > 0) { var touch = e.touches[0]; return { x: touch.pageX, y: touch.pageY }; } return { x: e.clientX, y: e.clientY }; } //线条绘制 function drawLine(x0, y0, x1, y1, color, width) { context.beginPath(); context.moveTo(x0, y0); context.lineTo(x1, y1); context.strokeStyle = color; context.lineWidth = width; context.stroke(); context.closePath(); } //鼠标按下 function onMouseDown(e) { drawing = true; //记录按下点 var p = getPoint(e); current.x = p.x; current.y = p.y; } //鼠标弹起 function onMouseUp(e) { if (!drawing) { return; } drawing = false; //绘制结束点 var p = getPoint(e); drawLine(current.x, current.y, p.x, p.y, current.color, current.width); } //鼠标移动 function onMouseMove(e) { if (!drawing) { return; } var p = getPoint(e); document.getElementById("point").innerHTML = p.x + "-" + p.y; //移动绘制 drawLine(current.x, current.y, p.x, p.y, current.color, current.width); current.x = p.x; current.y = p.y; } canvas.width = 600; canvas.height = 300; canvas.addEventListener('mousedown', onMouseDown, false); canvas.addEventListener('mouseup', onMouseUp, false); canvas.addEventListener('mouseout', onMouseUp, false); canvas.addEventListener('mousemove', onMouseMove, false); canvas.addEventListener('touchstart', onMouseDown, false); canvas.addEventListener('touchend', onMouseUp, false); canvas.addEventListener('touchmove', onMouseMove, false); </script></body></html>4. 線画の最適化描いた線の幅が比較的細い場合は大丈夫ですが、太くなると問題を書きます:この時点では、描画を少し変更するだけです。コードだけです
....//线条绘制function drawLine(x0, y0, x1, y1, color, width) { context.beginPath(); context.moveTo(x0, y0); context.lineTo(x1, y1); context.strokeStyle = color; context.lineWidth = width; //-----加入----- context.lineCap = "round"; context.lineJoin = "round"; //-----加入----- context.stroke(); context.closePath(); } ....この記事の事例を読んだ後、あなたは方法をマスターしたと思います。さらに興味深い情報については、に関する他の関連記事に注目してください。 php中国語のウェブサイトです! 関連記事:
s-xlsxを使用してセルを結合する方法
js-xlsxを使用してxlsxファイルを非同期的に読み取る方法)
以上がキャンバスを使って便利な落書きボードを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。