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

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

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

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

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

2218閲覧

canvasへの書き込み

Diawel

総合スコア190

HTML5

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

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2016/07/28 12:51

編集2016/08/03 08:47

canvasへこのサイトの方法を使って書き込もうと思っているのですが、x,yの値を

javascript

1getImageData(top, left, width, height); 2```で取得した配列の番地に変換することができずに悩んでいます。 3canvasの左上の角に対するx,yは用意できています。 4変換する方法を教えていただきたいです。 5 6今のコード 7```javascript 8<HTML> 9<HEAD> 10<TITLE></TITLE> 11<SCRIPT language="JavaScript"> 12</SCRIPT> 13</HEAD> 14<div style="width:100; height:100; margin:0px 0px 10px 0px; border:10px #0a0 solid; background:#FFFFFF;" id="element_01"> 15<canvas id="mycanvas" width="100" height="100"></canvas> 16</div> 17<script type="text/javascript"> 18<!-- 19 20(function (){ 21var onclick=false; 22 23 // 各エレメントを取得 24 var element = document.getElementById("element_01"); 25 26 // ------------------------------------------------------------ 27 // マウスのボタンを押すと実行される関数 28 // ------------------------------------------------------------ 29 function MouseDownFunc(e){ 30onclick=true; 31 } 32 33 // ------------------------------------------------------------ 34 // マウスのボタンを離すと実行される関数 35 // ------------------------------------------------------------ 36 function MouseUpFunc(e){ 37onclick=false; 38 } 39 40 // ------------------------------------------------------------ 41 // マウスカーソルが移動するたびに実行される関数 42 // ------------------------------------------------------------ 43 function MouseMoveFunc(e){ 44if(onclick){ 45//alert("test"); 46var mouseX; 47var mouseY; 48// マウス位置を取得する 49mouseX = e.pageX ; // X座標 50mouseY = e.pageY ; // Y座標 51mouseX-=18; 52mouseY-=18; 53if(mouseX>=0&&mouseX<=100&&mouseY>=0&&mouseY<=100){ 54var canvas = document.getElementById('mycanvas'); 55var cc = canvas.getContext('2d'); 56var width = canvas.width; 57var height = canvas.height; 58var target_pixel = mouseX+mouseY*width; // 黒くしたいpixelの場所 59var top = 0; 60var left = 0; 61// canvas全体をImageDataとして取得 62var ImageData = cc.getImageData(top, left, width, height); 63 64ImageData.data[target_pixel] = 255; // 赤 red 65ImageData.data[target_pixel] = 255; // 緑 green 66ImageData.data[target_pixel] = 255; // 青 blue 67ImageData.data[target_pixel] = 255; // 透明度 alpha 68// 書き換えたImageDataをcanvasへ書き出す 69cc.putImageData(ImageData, top, left); 70} 71} 72 } 73 74 if(element.addEventListener){ 75 76 // マウスのボタンを押すと実行されるイベント 77 element.addEventListener("mousedown" , MouseDownFunc); 78 // マウスのボタンを離すと実行されるイベント 79 element.addEventListener("mouseup" , MouseUpFunc); 80 // マウスカーソルが移動するたびに実行されるイベント 81 element.addEventListener("mousemove" , MouseMoveFunc); 82 83 // コンテキストメニューが表示される直前に実行されるイベント 84 element.addEventListener("contextmenu" , function (e){ 85 // コンテキストメニューの表示を無効化 86 e.preventDefault(); 87 }); 88 89 // アタッチイベントに対応している 90 }else if(element.attachEvent){ 91 92 // マウスのボタンを押すと実行されるイベント 93 element.attachEvent("onmousedown" , MouseDownFunc); 94 // マウスのボタンを離すと実行されるイベント 95 element.attachEvent("onmouseup" , MouseUpFunc); 96 // マウスカーソルが移動するたびに実行されるイベント 97 element.attachEvent("onmousemove" , MouseMoveFunc); 98 99 100 // コンテキストメニューが表示される直前に実行されるイベント 101 element.attachEvent("oncontextmenu" , function (e){ 102 // コンテキストメニューの表示を無効化 103 return false; 104 }); 105 106 } 107 108 109})(); 110// --> 111</script> 112</BODY> 113</HTML>

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

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

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

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

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

kei344

2016/07/28 13:13

ご自身で書かれたコードを質問文に追記いただいたほうが回答を得られやすいと思います。
Diawel

2016/08/03 00:13

返信送れてすみません。修正します。
guest

回答1

0

ベストアンサー

こんな感じでしょうか。

JavaScript

1// 要素の位置を取得する 2var rect = canvas.getBoundingClientRect() ; 3// 座標を計算する 4var positionX = rect.left + window.pageXOffset ; // 要素のX座標 5var positionY = rect.top + window.pageYOffset ; // 要素のY座標

【JavaScriptで要素の位置座標を取得する方法】
https://syncer.jp/javascript-reverse-reference/get-offsettop-offsetleft


追記:

RGBA のことを忘れてました。下記で試してみてください。(255,255,255,255で試して白背景に白い線でしばらく格闘したとか言えない)

JavaScript

1ImageData.data[ target_pixel * 4 + 0] = 205; // 赤 red 2ImageData.data[ target_pixel * 4 + 1] = 85; // 緑 green 3ImageData.data[ target_pixel * 4 + 2] = 55; // 青 blue 4ImageData.data[ target_pixel * 4 + 3] = 255; // 透明度 alpha

【HTML5でキャンバスをピクセル単位で操作する - Qiita】
http://qiita.com/tyfkda/items/88236466edb80586abbf

投稿2016/08/03 03:16

編集2016/08/03 09:08
kei344

総合スコア69364

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

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

Diawel

2016/08/03 03:25

ご回答ありがとうございます。 そこはできるんです。でも、getImageData(top, left, width, height);で取得される配列が一次配列で座標を一次配列の番地に直す方法がわからないんです。
kei344

2016/08/03 05:33

すいません、読み違えていました。画像のピクセルデータが全て1次元配列に並んでいて、画像の左上から x,y の箇所の 場所と言うことですね。 width が横のピクセル数でyが縦のピクセル数だから、 ImageData.data[ width * ( y - 1 ) + x ] とかでしょうか。
kei344

2016/08/03 09:08

追記しましたー。
Diawel

2016/08/03 11:17

ありがとうございます! できました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問