- 締切済み
javascriptKeydownのcanvas
こんにちは。 javascriptのkeydownについての質問です。 <script type="text/javascript"> document.onkeydown = draw; function draw() { var hiddenI = document.getElementById("i"); var hiddenJ = document.getElementById("j"); i = hiddenI.value; j = hiddenJ.value; var canvas = document.getElementById('rolate'); if ( ! canvas || ! canvas.getContext ) { return false; } var ctx = canvas.getContext('2d'); ctx.beginPath(); //下ボタン if(event.keyCode == 40){ i = i; j += 1; ctx.lineTo(i, j); ctx.closePath(); ctx.stroke(); } //右ボタン else if(event.keyCode == 39){ i += 1 ; j = j; ctx.lineTo(i, j); ctx.closePath(); ctx.stroke(); } hiddenI.value = i; hiddenJ.value = j; } </script> <body> <h1>Canvas</h1> <canvas id="rolate" width="600" height="600" style="background:#ffffff;"></canvas> <input type="hidden" value="5" id="i"> <input type="hidden" value="5" id="j"> </body> </html> このコードで下ボタンと右ボタンが押されたとき、 決まった5ピクセルずつdrawしようと書きましたが、 キーを押すたびに、値が倍増されます。 どうすれば、5ピクセルずつ値を増やせるのでしょうか。 間違いがある箇所があれば、ご教授お願いします。 よろしくお願いします。
- augustcrymaybe
- お礼率50% (1/2)
- JavaScript
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- fujillin
- ベストアンサー率61% (1594/2576)
関連するQ&A
- javascriptのcanvasについて
先日こちらで質問させて頂き、頂いた回答をもとに javascriptのcanvasについて勉強を続けていて、 canvasを2つ重ねたカラーシミュレーションのようなものを作りたいと考えています。 先日教えて頂いた内容をもとに 下記のような記述で2枚目のcanvasの画像を入れ替えることや、 色を変更することは出来ました。 ただ、「進む」ボタンや「戻る」ボタンを押したときに 色がもとの色に戻ってしまうので、色は固定されたまま（この記述でいうと茶色や赤）で 画像を入れ替える方法がわからずにいます。 なにか良い方法はないでしょうか。 <style type="text/css"> .canvas001 { position: absolute; top:100px; left:0px; } .canvas002{ position: absolute; top:100px; left:0px; } </style> <script> onload = function() { image1(); image2(); image3();}; function image1() { var cnvs = document.getElementById('canvas1'); var ctx = cnvs.getContext('2d'); var img = new Image(); img.onload = function() { ctx.drawImage(img, 0, 0); }; img.src = "face.png"; }; function image2() { var cnvs = document.getElementById('canvas2'); var ctx = cnvs.getContext('2d'); var img = new Image(); img.onload = function() { ctx.drawImage(img, 0, 0); }; img.src = "hair1.png"; }; var src = [ 'hair1.png', 'hair2.png', 'hair3.png' ]; var currentIndex = 0; var currentImage; function hair(){ var img = currentImage = new Image(); img.onload = function() { if(currentImage === img){ var cnvs = document.getElementById('canvas2'); var ctx = cnvs.getContext('2d'); ctx.clearRect(0, 0, cnvs.offsetWidth, cnvs.offsetHeight); ctx.drawImage(img, 0, 0); } }; img.src = src[currentIndex]; } window.back = function(){ currentIndex = (currentIndex - 1 + src.length) % src.length; hair(); } window.foward = function(){ currentIndex = (currentIndex + 1) % src.length; hair(); } function black(){ var ctx = document.getElementById("canvas2").getContext("2d"); var imagedata = ctx.getImageData(0,0,300,300); var idata = imagedata.data; var num = idata.length; var pix = num / 4; for ( var i = 0 ; i < pix ; i++ ){ var r = idata[ i*4 ]; var g = idata[ i*4 + 1 ]; var b = idata[ i*4 + 2 ]; idata[ i*4 ] = 35; idata[ i*4 + 1 ] = 24; idata[ i*4 + 2 ] = 21; } ctx.putImageData(imagedata,0,0); } function brown(){ var ctx = document.getElementById("canvas2").getContext("2d"); var imagedata = ctx.getImageData(0,0,300,300); var idata = imagedata.data; var num = idata.length; var pix = num / 4; for ( var i = 0 ; i < pix ; i++ ){ var r = idata[ i*4 ]; var g = idata[ i*4 + 1 ]; var b = idata[ i*4 + 2 ]; idata[ i*4 ] = 140; idata[ i*4 + 1 ] = 96; idata[ i*4 + 2 ] = 37; } ctx.putImageData(imagedata,0,0); } function red(){ var ctx = document.getElementById("canvas2").getContext("2d"); var imagedata = ctx.getImageData(0,0,300,300); var idata = imagedata.data; var num = idata.length; var pix = num / 4; for ( var i = 0 ; i < pix ; i++ ){ var r = idata[ i*4 ]; var g = idata[ i*4 + 1 ]; var b = idata[ i*4 + 2 ]; idata[ i*4 ] = 182 ; idata[ i*4 + 1 ] = 0; idata[ i*4 + 2 ] = 5; } ctx.putImageData(imagedata,0,0); } </script> <body> <div> <div class="canvas001"><canvas id="canvas1" height="300"></canvas></div> <div class="canvas002"><canvas id="canvas2" height="300"></canvas></div> </div> <div> <form><div> <INPUT TYPE=button NAME="submit" VALUE="戻る" onClick="back()"> <INPUT TYPE=button NAME="submit" VALUE="進む" onClick="foward()"> </div></form> </div> <img src="btn_black.png" onclick="black()" > <img src="btn_brown.png" onclick="brown()" > <img src="btn_red.png" onclick="red()" > </body>
- ベストアンサー
- JavaScript
- HTML5のcanvasで描画がされない
HTML5のcanvas要素を使って描画をしようとしたのですが、図形が表示されません。 コードは以下の通りです。 ・index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>canvasで図形を描く</title> <script type="text/javascript" src="paint.js"></script> </head> <body onLoad="draw()"> <canvas id="mycanvas"width="800" height"800"> </canvas> </body> </html> ・paint.js function draw() { //描画コンテキストの取得 var canvas = document.getElementById('mycanvas'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); ctx.arc(180,150,20,Math.PI*1,Math.PI*2,true); } } このコードでは(180,150)の位置に半径20の円が描画されるはずなのですが、何も表示されませんでした。 どこかコードに誤りがあるのでしょうか？ よろしくお願いします。
- 締切済み
- HTML
- ２つの図を重ねて表示したい
HTMLもJavaScriptも初心者です。 *.png の図と canvas に書いた図を重ねて表示したいのですが、canvas に書いた図が *.png に隠れて表示されません。 コーディングは次のとおりです。 <html> <title>figures</title> <!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]--> </head> <body> <div id=lyrwall style="position:absolute; left:20px; top:20px;"> <img src=figure.png> </div> <canvas id="canvassample" width="500" height="500"> <script type="text/javascript"> onload = function() { draw(); }; function draw() { var canvas = document.getElementById('canvassample'); if ( ! canvas || ! canvas.getContext ) { return false; } /* 2Dコンテキスト */ var ctx = canvas.getContext('2d'); /* 線を引く */ ctx.beginPath(); ctx.moveTo(20, 20); ctx.lineTo(480, 480); ctx.stroke(); } </script> </canvas> </body> </html> 直線のうち、figure.png と重なる部分が表示されません。表示されるようにするにはどうすればいいのでしょうか。よろしくお願いいたします。
- ベストアンサー
- HTML
- html5canvasの文字枠のずれ
html5のcanvasで、枠付きの文字列を描画しようとしたら、表示がおかしくなったのですが、理由がわかりません。ブラウザはchromeです。 一部のフォントとサイズのときだけ起きるのですが、それ以外で作れば問題ないのでしょうか。 <canvas id="canvas" width="500" height="500"></canvas> <script type="text/javascript"> var canvas = document.getElementById("canvas"); var ctx = canvas.getContext('2d'); ctx.lineWidth=2; ctx.font = "bold 22px 'ＭＳ Ｐ明朝'" ctx.strokeStyle = 'rgba(255, 0, 0, 1)'; ctx.fillStyle = 'rgba(0, 0, 0, 1)'; ctx.strokeText("aa0.3", 10, 25); ctx.fillText("aa0.3", 10, 25); </script>
- ベストアンサー
- JavaScript
- Canvasのメモリーリーク疑いについて
現在、Canvasを使ってペイントソフトにあるような「レイヤー」的な ことが出来ないか実験をしています。 (レイヤー数に関しては、最大で24程度を考えています。) 環境等は、以下の通りです。 OS：Windows XP Pro(SP3) 32bit メモリ:2GB ブラウザ：各ブラウザの最新版(FireFox,Chrome,Opera,safariも実施予定です。) 実験の結果、大量のレイヤーを使用した場合に ついてメモリーリーク的な問題が発生しているような感じがしています。 もちろん、レイヤーなのである程度のメモリ消費は承知の上だったのですが タブを閉じた際や描画してから時間が経過してもメモリ使用量が減少しないのは 使用上問題がありますので質問させて頂くことになった次第です。 (なお、レイヤー数を削減すると、比例してメモリ使用量も削減されていました。 メモリ使用量に関しては、タスクマネージャのプロセスタブのメモリ使用量 で見ています。) で、この問題が特に顕著なのが、Firefoxです。 私見では、1レイヤーにつき1MB程度消費してしまう感じです。 他のブラウザ(クローム、オペラ)では一時的にメモリ使用量は 増加しますが、時間が経過するとだいたい元にもどります。 なお、実験は以下のようなサンプルを作成して行っています。 (途中省略しています。) ご教授して頂きたい点は、以下になります。 ■メモリーリークが起きている場合の対処方法 (特にFirefoxにおける対処方法) ■Canvasを使用しない場合の代替案 宜しくお願い致します。 <html> <head> <script> function draw() { canvas = document.getElementById("g0"); if(!canvas || !canvas.getContext) return false; ctx = canvas.getContext('2d'); ctx.font = "15px 'ＭＳ Ｐゴシック'"; ctx.fillStyle = "black"; ctx.fillText("aaa", 100, 100); canvas = document.getElementById("g1"); if(!canvas || !canvas.getContext) return false; ctx = canvas.getContext('2d'); ctx.font = "15px 'ＭＳ Ｐゴシック'"; ctx.fillStyle = "black"; ctx.fillText("bbb", 150, 150); canvas = document.getElementById("g23"); if(!canvas || !canvas.getContext) return false; ctx = canvas.getContext('2d'); ctx.font = "15px 'ＭＳ Ｐゴシック'"; ctx.fillStyle = "black"; ctx.fillText("eee", 300, 300); } function start() { draw(); } </script> </head> <body onload="start()"> <body onload="start()"> <canvas height="500" width="500" class="g" id="g0"></canvas> <canvas height="500" width="500" class="g" id="g23"></canvas> </body> </html>
- ベストアンサー
- JavaScript
- JavaScriptでのアニメーション
JavaScriptで書いたアニメーションをHTML5上で動かそうとしているのですが、うまくいきません。いろいろなサイトで調べましたが原因がわからなかったのでどなたか解決法を教えてください。 任意の値X,Yを入力、これを始点の座標としてそこからランダムな色の円が動くというアニメーションを作りたいです。しかし、X,Yの値を任意に入力させようとするとアニメーションそのものが動かなくなってしまいます。座標をあらかじめ指定しておくとうまく動くのですが……。 任意の値を入れてもきちんと動くように直したいのですが、方法がわかりません。どなたかご教授願います。 以下コード。これより上と下は省略してあります。 <script type="text/javascript"> var speedX = 3.0; var speedY = 4.0; var locX = parseInt(document.getElementById("ｘ").value); var locY = parseInt(document.getElementById("y").value); //locX,locYを予め指定しておくとその位置からきちんとアニメーションが動くが、上のようにすると動かなくなる var ctx; function anim(){ var canvas = document.getElementById('mycanvas'); if (canvas.getContext){ ctx = canvas.getContext('2d'); setInterval(draw, 60); } } function draw(){ ctx.globalCompositeOperation = "source-over"; var r = parseInt(Math.random() * 255); var g = parseInt(Math.random() * 255); var b = parseInt(Math.random() * 255); var alpha = Math.random(); var rgba = "rgba("+r+", "+g+", "+b+", "+alpha+")"; ctx.fillStyle = rgba; ctx.fill(); ctx.globalCompositeOperation = "lighter"; locX += speedX; locY += speedY; if(locX < 0 || locX > 800){ speedX *= -1; } if(locY < 0 || locY > 600){ speedY *= -1; } ctx.beginPath(); ctx.fillStyle = rgba; ctx.arc(locX, locY, 5, 0, Math.PI*2.0, true); ctx.fill(); } </script> </head> <body> <p><label>X </label><input id="x"> <label>Y </label><input id="y"> <button type=button onclick="anim();">start</button></p>
- ベストアンサー
- JavaScript
- JavaScript/HTML5での図形の描写
canvasを使って図形の描写をするコードを書いています。 javascript初心者なりに考え、調べたのですがどうしてもわからなかったのでどなたか教えてください。 「入力された値を半径とした円をcanvas内のランダムな位置に、ランダムな色で複数描写する」という風にしたいのです。値は好きなだけ入れれるようにしてあります。現段階でランダムな位置に描写することはできるのですが、黒縁の白い円しか描写できません。「ランダムに彩色する」部分をどのように記述したらよいのかご教授願います。 【以下書いたコード】 function draw() { var canvas = document.getElementById('mycanvas'); var ctx = canvas.getContext('2d'); var r = parseInt(document.getElementById("radius").value); ctx.beginPath(); var drawPointX = Math.floor( Math.random() * 1200 ) + 1; var drawPointY = Math.floor( Math.random() * 600 ) + 1; ctx.arc( drawPointX, drawPointY, r, 0, Math.PI*2, true ); //ランダムな色を生成・彩色する var r = parseInt(Math.random() * 255); var g = parseInt(Math.random() * 255); var b = parseInt(Math.random() * 255); var alpha = Math.random(); var rgba = "rgba("+r+", "+g+", "+b+", "+alpha+")"; ctx.fillStyle=rgba; ctx.stroke(); }
- ベストアンサー
- JavaScript
- JavaScript 用 Canvas の使用法
先日JQuery について質問させていただいたものです。 Canvas を使ってブラウザ画面にグラフィックを描く練習を始めましたが、IEではグラフィックが描けません。 ネットで見つけたthinkit というサイトの説明にしたがって最初のサンプルコードを書いてみましたが、firefox ではグラフィックが描けるのにIEでは何も起こりません。 説明によるとIEには excanvas.js というライブラリーを用意しなくてはならないということで、これもちゃんとダウンロードして解凍済みですし、HTML コードのコメントとしてIEを使っているならこのファイルをインクルードする旨も書いてあります。 下にプログラムのソースコードを載せます。 どなたか問題解決のヒントを教えていただけないでしょうか？ HTML ファイル <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>canvas with JavaScript</title> <!-- [if IE]> <script type="text/javascript" src="excanvas.js"> </script><![endif]--> <script type="text/javascript" src="draw2.js"></script> </head> <body > A canvas appears here.</br> <canvas id="sample" width="300" height="200"></canvas> </body> </html> JavaScript を記述したファイル //canvas program with javascript // draw2.js window.onload=function() { var canvas=document.getElementById('sample'); var ctx=canvas.getContext('2d'); ctx.beginPath(); ctx.moveTo(15,15); ctx.lineTo(60,70); ctx.stroke(); }; ちなみに私が見つけたサイトのアドレスは次のとおりです。 http://thinkit.co.jp/article/60/1/
- ベストアンサー
- JavaScript
- JavaScriptについて
本を読みながら勉強しているのですが解説が乗っていなくてわからない部分があるので教えてください <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,user-scalable=yes,initial-scale=1.0,maximum-scale=3.0"> <script src="plugins/plugin-loader.js"></script> <link rel="stylesheet" href="plugins/plugin-loader.css"> </head> <body> <canvas id="canvas" width="300" height="300"></canvas> <script> var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); //ランダムに５０個多角形の表示 for (var i = 0; i < 50; i++) { randomDraw(); } //指定範囲のランダムな整数を返す関数 function randomI(nFrom,nTo) { var f = nTo - nFrom + 1; return Math.floor(Math.random() * f) + nFrom; } //ランダムに多角形を描画する関数 function randomDraw() { //パス指定 ctx.beginPath(); //点をランダムに決定 var n = randomI(2,7); ctx.moveTo(randomI(0,canvas.width),randomI(0,canvas.hright)); for (var i = 0; i < n; i++) { ctx.lineTo(randomI(0,canvas.width),randomI(0,canvas.height)); } ctx.closePath(); //描画 ctx.fillStyle = "#" + randomI(0,0xFFFFFF).toString(16); ctx.fill(); } </script> </body> </html> というコードでランダムに50個多角形を描画するというものです function randomI(nFrom,nTo) { var f = nTo - nFrom + 1; return Math.floor(Math.random() * f) + nFrom; ここのrandomIとnToとnFromというのは変数名ですか？これはいったい何者ですか？ var n = randomI(2,7); ここの数字を変更すると何かが変わるのですがうまく言葉にできません 何がどう変わるのか教えてください
- ベストアンサー
- JavaScript
- javascriptで困ってます
下記のスクリプトでcanvas上で四角を動かすアニメーションをさせたのですが、andoroidに標準のブラウザで見ると、最初の位置に四角が残ってしまいます。この残ってしまう四角を消したたいのですが、どのようにしたらよいのでしょうか、教えてください。よろしくお願いします。 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>canvasアニメーション</title> <script type="text/javascript"> // <![CDATA[ window.onload = function(){ var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.fillStyle = "#ffffff"; var point = {x:0,y:0}; var par = {x:3,y:3}; var timer; var delay = 100; function draw(x,y){ ctx.clearRect(0,0,600,600); ctx.fillRect(x,y,50,50); } var loop = function(){ point.x = point.x + par.x; point.y = point.y + par.y; draw(point.x,point.y); clearTimeout(timer); timer = setTimeout(loop,delay); } loop(); } // ]]> </script> <style type="text/css" media="screen"> /* <![CDATA[ */ body{ background-color:#000000; } /* ]]> */ </style> </head> <body> <canvas id="canvas" width="600" height="600"></canvas> </body> </html>
- 締切済み
- JavaScript
