質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
canvas

HTML5の<canvas>要素用のタグです。CanvasはHTML5から導入された、二次元の図形描写が可能な要素です。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

0回答

505閲覧

canvasで描画するペンの色の変更をしたい

退会済みユーザー

退会済みユーザー

総合スコア0

canvas

HTML5の<canvas>要素用のタグです。CanvasはHTML5から導入された、二次元の図形描写が可能な要素です。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2022/11/03 06:10

編集2022/11/03 07:02
<!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でお絵描きツールを作成しています。
現在、このプログラムは、カラーパレットから色を選択できるようになっています。
しかし、こんなに色は必要ではないので、「赤」、「青」、「黄」のようにそれぞれ色のボタンを配置し、そのボタンをクリックすると、その色に対応したペンで描画ができるというものを作りたいです。
色々試してみたのですが、どれもプログラムの書き方が違い、うまく動作させることができませんでした。どなたか、こちらのコードに追加して、教えていただけませんでしょうか。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

y_waiwai

2022/11/03 06:14

このままではコードが読めないので、質問を編集し、</>(コードの挿入)ボタンを押し、出てくる’’’の枠の中にコードを貼り付けてください
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問