• ベストアンサー
※ ChatGPTを利用し、要約された質問です（原文：JavaScript 用 Canvas の使用法）

JavaScript 用 Canvas の使用法

dscriptyの回答

  • ベストアンサー
  • dscripty
  • ベストアンサー率51% (166/325)
回答No.1

質問の HTML ソースコードがコピー＆ペーストならこれかも。 × <!-- [if IE]…… ○ <!--[if IE]…… http://msdn.microsoft.com/en-us/library/ms537512%28VS.85%29.aspx

papashiroSooke
質問者

お礼

早速のご回答ありがとうございます。 問題解決いたしました。 スペースひとつのあるなしで、大きな違いになるのですね。 参考にしたサイトからはコピー＆ペーストは無理だったので自分でキーをたたいて入力したものでしたが、そのときに間違ったかもしれません。

この回答がついた質問に戻る
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • ２つの図を重ねて表示したい

    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
  • ＰＨＰとＪａｖａｓｃｒｉｐｔの連携について

    ＰＨＰ・Ｊａｖａｓｃｒｉｐｔの初心者です。 ＰＨＰで設定された、配列のデータをＪａｖａｓｃｒｉｐｔで作成した関数の渡したいのですが どうすればいいのでしょうか？ 以下にサンプルを作成したのですが ＰＨＰで設定した、配列　$name　が Ｊａｖａｓｃｒｉｐｔに渡せません。 何が悪いのですか？ 教えてください。 よろしくお願いします。 -sample.php- <!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" /> <!-- CSS: implied media="all" --> <link type="text/css" rel="stylesheet" href="css/websyslogin.css" /> <!-- JavaScript loading --> <script src="js/websysdebug.js"></script> <script type="text/javascript"> function sysdebug( ss ){ alert( "Login -> "+ss ); } </script> <!-- タイトル --> <title>Vware Web System(PHP) </title> </head> <body> <?php $name = array(); $name[0] = "ABC"; $name[1] = "BCA"; ?> <input type="button" value="TEST" name="debug" id="debug" onclick="sysdebug(' <?php print $name[0]; ?> ');" /> <script type="text/javascript"> for( i=0;i< 2;i++ ) { ss = ' <?php print $name['+i+']; ?> '; alert( ss ); } </script> </body> </html>

    • ベストアンサー
    • PHP
  • firefox+xhtml+javascript

    お世話になっております。 divをweb上でドラッグできるスクリプトを組みました。 Opera9.6,IE6では動いているのですが、Firefoxでは、ある条件下でしか動きません。 ある条件とは、DOCTYPEの宣言がされていないことで、XHTMLにしようとDOCTYPEを宣言すると、動作しなくなってしまいます。 <?xml version='1.0' encoding='UTF-8'?> <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.1//EN' 'http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd'> <html xmlns='http://www.w3.org/1999/xhtml' xml:lang='ja'> <head> <meta http-equiv='Content-Type' content='text/html; charset=UTF-8' /> <meta http-equiv='Content-Script-Type' content='text/javascript' /> <title>test</title> <script type='text/javascript' src='FILENAME.js'></script> -------- <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.1//EN' 'http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd'> を消せば動きます。 仮に、DOCTYPEをHTML4.1などにしても動きません。 クオートをシングルからダブルにしても同じです。 動かない状態でも、JS自体は読んで、onload関数の中は見に行っているようです（alertを埋め込んだらでたので） 可能性として、 外部ファイルのJSの書き方に問題があるのでしょうか？ それとも、HTML側に問題があるのでしょうか？ ソースを見なくても何か考えられることがあれば、教えてください。 よろしくお願いします。

  • js 引用符

    <!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>サンプル</title> </head> <body> <div id="a"></div> <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.2/moment.min.js"></script> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script type="text/javascript" src="moment.js"></script> <script src="fastclick.js"></script> <script> $(function(){ var retinaSwitch = window.<span class="searchword">devicePixelRatio</span>; if(retinaSwitch == 1) { $('#container').html('Retinaディスプレイではありません'); } else if(retinaSwitch == 2) { $('#container').html('Retinaディスプレイです'); } }); </script> </body> </html> javascriptのコードなのですがWebサイトからコピペした文章が上手く反映されません。引用符関係のイージーミスだとは思うのですが、ちょっとドツボに嵌っているので、ご指摘頂ければと思います。

  • 音量スライダーのJavaScriptが効かない？

    質問させていただきます。 動画を流すサイト作りに携わっています。 私はデザインとコーディングまでが仕事なのですが（動画の実装は他社担当） 音量を調節するスライダーをJavaScriptで付けてくれと 依頼され、あまり詳しくないものでつまづいてます。 下記のように実装してほしいという担当者からの リクエストがあったのでやってみたのですが、IEではスライダーがちゃんと横に動かせるのですが、 FirefoxやMacのsafariなどではダメでした。 http://www.hajimeteno.ne.jp/dhtml/dist/js64.html 調べたところ、上のサンプルと実際にコーディングしているhtmlの文書型宣言が違うことが 原因のようなのです。<!DOCTYPE ～を削除すると意図した通りに動きます…。 上記サンプルでは<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">で、 これならFirefoxでも問題なく動いてます。 コーディング中のhtmlは <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">です。 JavaScriptではそういうことがあるのでしょうか？ このJavaScriptを諦めて、他のものを探したほうがいいでしょうか？ どなたか、お力をお貸しください！ よろしくお願いします。

  • cssがIE6で適用されない理由は

    教則本を見てcss/xhtmlでサイトを作ったのですが、 （教則本がIE7以降対応だった為） safari firefoxd IE7では表示がうまくいくのですが、 IE6では全くcssが適用されないです。 少し調べたところこの辺の記述に問題があるのかなと思っています。 誰か教えて下さい。 ............................................................................... <!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="jap" lang="jap" dir="ltr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Script-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> ....................................................................

    • ベストアンサー
    • HTML
  • 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の円が描画されるはずなのですが、何も表示されませんでした。 どこかコードに誤りがあるのでしょうか？ よろしくお願いします。

  • 文字エンコーディングについて

    <?xml version="1.0" encoding="euc-jp"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="ja" dir="ltr" xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=EUC-JP" /> これは、私が使っているブログテンプレートのソースの最初の部分です。 このテンプレートに、 <script type="text/javascript" src="http://mcnv.net/bp/js/hitomojibp.js#tag_id=3270" charset="UTF-8"></script> のブログパーツって使えますか？ プラグインにソースを貼ってみたんですけど表示されません。 原因は何なのでしょうか。 原因がわからないので、文字エンコーディングがおかしいのかな？ と思っただけなので、違ったら指摘お願いします。

  • document.locationで変数使用したい

    document.locationに変数の値を使用しようとしたのですが、どうすればできるかわからなかったので、アドバイスいただける方がいらっしゃいましたら、ご教示の程、よろしくお願いします。 なお、下記がサンプルソースとなりますが、js_urlにPHPで取得した値は入っております(alertで確認しました)。 その為、本件はPHPとJavaScriptの連携の問題ではなく、document.location内で変数を使用する際の書き方に問題があると思います(ブラウザ上で確認した所、「'document.location = "http://oshiete.goo.ne.jp/"'」と出力されていれば動作するのではと思いますが、「'document.location = js_url'」と出力されており、変数の中身が展開されていませんでした(シングルクォーテーションで囲まれている為、変数と認識していないと思われますが、どう記述変更すればよいか分かりませんでした))。 【ソースコード】 <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Sample</title> <?php $php_url = "http://oshiete.goo.ne.jp/"; ?> <script type="text/javascript"> window.onload = function() { // setTimeout('document.location = "http://oshiete.goo.ne.jp/"', 2000); var js_url = "<?php echo $php_url; ?>"; alert(js_url); setTimeout('document.location = js_url', 2000); } </script> </head> <body> <p>Sample</p> </body> </html> 以上、よろしくお願いします。

  • ｊｓ　プロトタイプ

    javascriptソースコード <!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>サンプル</title> </head> <body> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script src="fastclick.js"></script> <script> function print(str){ document.write(str + "<br />"); } function Car(manufact, name){ this.manufact = manufact; this.name = name; } Car.prototype.info = function(){return this.manufact + " " + this.name;}; document.write("<p>"); var car1 = new Car("Toyota", "PRIUS"); print(car1.info()); var car2 = new Car("Honda", "INSIGHT"); print(car2.info()); document.write("</p>"); </script> </body> </html> 23行目なのですが「 Car.prototype.info 」とありますがｊｓにおいてプロトタイプはオブジェクトだという事は認識しておりますがプロトタイプを宣言する意味は何があるのでしょうか？ 参考urlです。 http://www.ajaxtower.jp/js/function_class/index3.html

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する
質問する