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>
回答1件
あなたの回答
tips
プレビュー