<!DOCTYPE html> <html> <head> <meta charset='utf-8'> <title>お絵描きツール</title> <style> body { background: #eee; } #canvas { margin: 10px; background: #ffffff; border: 1px solid #aaaaaa; } #canvas { margin: 10px; background: url(./picture/cat.png); background-size: 100% 100%; border: 1px solid #aaaaaa; border:solid 3px #000000; } input[type="image"]{ padding: 2px; outline: none; } input[type="image"].active{ background-color: #fff; } </style> </head> <body> <canvas id="canvas" width="1103" height="1190"></canvas><br> <label>色<input id="color" type="color"></label> <label>太さ<input id="width" type="number" min="1" max="15"></label> <input type="image" id="delete_canvas" src="./picture/clean.png" alt="クリア" width="45px" onClick="delete_canvas()"> <input type="image" id="pencil" src="./picture/pen.png" alt="鉛筆" width="45px" class="active" onClick="tool(1)"> <input type="image" id="eraser" src="./picture/keshigomu.png" alt="消しゴム" width="45px" onClick="tool(2)"> <script type="text/javascript"> var drawing = false; // 前回の座標を記録する(初期値:0) var before_x = 0; var before_y = 0; var canvas = document.getElementById('canvas'); ctx = canvas.getContext('2d'); // canvas 全体に画像を配置 ここから+++ var canvasW = canvas.width; var canvasH = canvas.height; var photo = new Image(); // 画像オブジェクトを生成画像を canvas に表示 photo.onload = function() { ctx.drawImage(photo, 0, 0, canvasW, canvasH); // 画像を canvas 全体に表示 } photo.src = "./picture/kamiyuge.png"; // 画像ファイルの指定 */ canvas.addEventListener('mousemove', draw_canvas); // マウスをクリックしてる時 canvas.addEventListener('mousedown', function(e) { drawing = true; var rect = e.target.getBoundingClientRect(); before_x = e.clientX - rect.left; before_y = e.clientY - rect.top; }); // マウスをクリックしてない時 canvas.addEventListener('mouseup', function() { drawing = false; }); canvas.addEventListener('touchstart', startPoint, false); canvas.addEventListener('touchmove', movePoint, false); canvas.addEventListener('touchend', endPoint, false); // 描画の処理 function draw_canvas(e) { // drawingがtrueじゃなかったら返す if (!drawing){ return }; var rect = e.target.getBoundingClientRect(); var x = e.clientX - rect.left; var y = e.clientY - rect.top; var w = document.getElementById('width').value; var color = document.getElementById('color').value; var r = parseInt(color.substring(1,3), 16); var g = parseInt(color.substring(3,5), 16); var b = parseInt(color.substring(5,7), 16); // 描画 ctx.lineCap = 'round'; ctx.strokeStyle = 'rgb('+ r + ',' + g + ',' + b + ')'; ctx.lineWidth = w; ctx.beginPath(); ctx.moveTo(before_x, before_y); ctx.lineTo(x, y); ctx.stroke(); ctx.closePath(); // 描画最後の座標を前回の座標に代入する before_x = x; before_y = y; } // 色の変更 $(".color a").click(function(){ cnvColor = $(this).data("color"); return false; }); // クリアボタンクリック時 // クリアボタンクリックした時にアラートを表示 function delete_canvas(){ r et = confirm('canvasの内容を削除します。'); // アラートで「OK」を選んだ時 if (ret == true){ ctx.clearRect(0, 0, canvas.width, canvas.height); } } var pen = document.getElementById('pencil'); var era = document.getElementById('eraser'); // 鉛筆と消しゴムの切り替え function tool(btnNum){ // クリックされボタンが鉛筆だったら if (btnNum == 1){ ctx.globalCompositeOperation = 'source-over'; pen.className = 'active'; era.className = ''; } // クリックされボタンが消しゴムだったら else if (btnNum == 2){ ctx.globalCompositeOperation = 'destination-out'; pen.className = ''; era.className = 'active'; } } </script> </body> </html>
現在、canvasでお絵描きツールを作成しています。
現在、このプログラムは、カラーパレットから色を選択できるようになっています。
しかし、こんなに色は必要ではないので、「赤」、「青」、「黄」のようにそれぞれ色のボタンを配置し、そのボタンをクリックすると、その色に対応したペンで描画ができるというものを作りたいです。
色々試してみたのですが、どれもプログラムの書き方が違い、うまく動作させることができませんでした。どなたか、こちらのコードに追加して、教えていただけませんでしょうか。
あなたの回答
tips
プレビュー