２つの図を重ねて表示したい
- HTMLとJavaScriptの初心者ですが、*.pngの図とcanvasに描いた図を重ねて表示したいです。しかし、canvasに描いた図が*.pngに隠れて表示されません。
- コーディングの中で直線を引く部分で、figure.pngと重なる部分が表示されません。どのようにすれば表示されるようになるでしょうか。
- figure.pngとcanvasに描かれた図を重ねて表示する方法を教えてください。
- ベストアンサー
２つの図を重ねて表示したい
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 と重なる部分が表示されません。表示されるようにするにはどうすればいいのでしょうか。よろしくお願いいたします。
- kiara007
- お礼率86% (26/30)
- HTML
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
canvasは(Flow content,Phrasing content,Embedded content.Embedded content)で、sectioningやgroupingコンテントではない(HTML4.01で言うところのインライン要素な)ので、必ず<p>などで囲む必要があります。 それはさておき、画像を含むdiv要素(pで良いと思いますが・・)にposition:absoluteが指定されていますから、指定されていないstaticな要素から独立して上に乗ります。 canvasを、sectioningコンテントかgroupingコンテント(p,figure,aside,sectionなど)に入れて、それもabsoluteすると良いでしょう。その際、z-indexを使うならソース上の出現順位には関わらず、上下(前後)を指定できます。 HTML5は、HTML4.01より文書構造をきちんとマークアップすることが求められます。まず、それをしっかり身につけないと、先に勧めませんよ。 <figure class="menue"> <p class="backImage"><img></p> <p class="overCanvas"><canvas></p> </figure> figure.manue{position:absolute;top:20px;left:20px;width:500px;height:500px;margin:0 auto;} figure.manue p.backImage{margin:0;} figure.menue p.overCanvas{position:absolute;top:0;left:0;}
その他の回答 (1)
透過は？
お礼
コメントをお寄せいただきありがとうございました。
関連するQ&A
- 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
- 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
- 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での画像表示について
HTML５を勉強しはじめたばかりの者です。 http://nigohiroki.hatenablog.com/entry/2013/01/04/025502 ここのサイトみながらラインと四角を表示することはできたのですが、 画像を表示することができません。 <!DOCTYPE HTML> <html lang="ja-JP"> <head> <meta charset="UTF-8"> <title>canvasApp</title> </head> <body onload="init()"> <canvas id="first" width="200" height="200"></canvas> <script type="text/javascript"> var canvas = document.getElementById('first'); var ctx = canvas.getContext('2d'); function init(){ var img = new Image(); img.src = "01.jpg"; ctx.drawImage(img, 100, 100, 200, 200); } </script> </body> </html> どこがおかしいのかさっぱりわかりません。 試しに</body>の前に<img src="01.jpg">と入れるとなぜか表示できるのですが、 外すと表示できなくなります。 よろしくお願いします。
- ベストアンサー
- HTML
- 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ピクセルずつ値を増やせるのでしょうか。 間違いがある箇所があれば、ご教授お願いします。 よろしくお願いします。
- 締切済み
- 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
- 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
- Chromeで文字コード(UTF-8)の設定
●質問の主旨 文字コードを常時、"utf-8"に設定したいと考えています。 どのように設定すればよいでしょうか？ ご存知の方ご教示願います ●質問の補足 下記コードにて、ファイルを実行し、 "Canvasの練習"という文字列と、 青色の正方形をはさんだ黄色の正方形2つが、 表示させるつもりです。 しかし、実際に実行すると、 図形は意図通り描画されますが、文字列が文字化けします。 HTML5のコードにおいて、 <meta charset="utf-8">を <meta charset="s-jis"> に変更すると、文字化けもなくなります。 "utf-8"のコードがすでに大量に用意されているので、 PCの方の認識を"s-jis"から"utf-8"に替えるためにはどうすればよいでしょうか？ PCはWindowsVistaで、ブラウザはGoogleChromeです。 ●コード ・HTML5 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Canvasの練習</title> </head> <body> <h1>Canvasの練習</h1> <canvas id="mycanvas" width="400" height="200"> Canvasに対応したブラウザを使ってください。 </canvas> <script src="mycss.js"></script> </body> </html> ・JavaScript // myscript.js window.onload = function() { draw(); } function draw() { var canvas = document.getElementById('mycanvas'); if (!canvas || !canvas.getContext) return false; var ctx = canvas.getContext('2d'); ctx.fillStyle = "yellow"; ctx.save(); ctx.fillRect(0,0,50,50); ctx.fillStyle = "blue"; ctx.fillRect(100,0,50,50); ctx.restore(); ctx.fillRect(200,0,50,50); }
- ベストアンサー
- HTML
- javascriptでのパス指定について
現在、SpringMVCのビュー部分で、JSPからjavascriptを使用するようにして開発を行っています（初心者です）。html5のcanvasを使用してcanvas内に画像を表示したいのですが、画像表示時のパスの指定が悪いせいか表示されません。そこで、javascriptからのパスの指定方法をご教授頂けないでしょうか？ プロジェクト階層とビュー部分のjsp（input.jsp）コード（一部抜粋）は以下になります。 【階層（一部抜粋）】 test <- プロジェクト |--- WebContent |----WEB-INF |----jsp | |---input.jsp |----sample |---abc.png 【input.jsp】 <body> <canvas id="myCanvas" width="400"; height="400" ;> HTML5 Canvasに対応したブラウザーを使用してください。 </canvas> <script type="text/javascript"> var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.strokeRect(300, 10, 200, 200); var img = new Image(); img.src = "../sample/abc.png"; //ここでパスを指定。 /* 画像を描画 */ ctx.drawImage(img, 0, 0); </script> <form:form commandName="example"> <form:input path="message"/> <input type="submit" /> </form:form> </body> </html> 【やりたいこと】 WEBブラウザ上に任意の画像を表示して、ユーザーがその画像をマウスで拡縮を行うようなサービスの作成を検討しており、現在、その実装（技術検討）中です。
- ベストアンサー
- JavaScript
- ひとつのHTMLファイル内にcanvasでグラフを2つ表示したいのです
ひとつのHTMLファイル内にcanvasでグラフを2つ表示したいのですが 表示できなくて困っています。 以下のサイトを参考に、それぞれ1つのファイルに1つのグラフを表示はできました。 http://www.html5.jp/library/index.html また、グラフを上下入れ替えると後に書いたほうが有効になるようです。 どうしたら表示できるようになるか、わかる方アドバイスをお願いします。 以下headタグ以降をそのまま引用です。 <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja"/> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>グラフ</title> <link href="sample_graph.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" src="rendering-mode.js"></script> <!--[if IE]><script type="text/javascript" src="./html5jp/excanvas/excanvas.js"></script><![endif]--> <script type="text/javascript" src="./html5jp/graph/circle.js"></script> <script type="text/javascript" src="./html5jp/graph/radar.js"></script> <script type="text/javascript"> window.onload = function() { var rc = new html5jp.graph.radar("sample_radar"); if( ! rc ) { return; } var items_radar = [ ["商品A", 3, 3, 2, 3, 1] ]; var params_radar = { aCap: ["A", "B","C", "D", "E"], aMax: 3, aMin: 0, legend: false } ; rc.draw(items_radar, params_radar); }; </script> <script type="text/javascript"> window.onload = function(){ var cg = new html5jp.graph.circle("sample_circle"); if( ! cg ) { return; } var items1 = [ ["A", 9, ], ["B", 3, ], ["C", 0,] ]; cg.draw(items1); }; </script> </head> <body> <div><canvas width="300" height="200" id="sample_radar"></canvas></div> <div><canvas width="300" height="200" id="sample_circle"></canvas></div> </body> </html>
- 締切済み
- JavaScript
お礼
懇切なご回答をお寄せいただきありがとうございました。あちこちのサイトや書籍から利用できそうなものを引っ張り出してつぎはぎでやっていて、貴殿のご回答もよく理解できない状態です。理解できるよう頑張ります。質問の件ですが、その後いろいろ利用して何とか所定の目的を果たすことができました。