Chromeで文字コード(UTF-8)の設定
- 文字コードを常時、"utf-8"に設定する方法
- HTML5のコードで<meta charset="utf-8">を使用すると、文字化けがなくなる
- PCの方の認識を"s-jis"から"utf-8"に替えるためにはどうすればよいか
- ベストアンサー
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); }
- dradra33
- お礼率92% (346/376)
- HTML
- 回答数4
- ありがとう数1
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
保存時の文字コードを選択する方法は、どのようにしてファイルを編集されているかが問題です。 パソコンのOSとブラウザ名は書かれていますが、ホームページ作成ソフト名が書かれていません。 エディタで作成されている場合は、「文字コードを選択して保存」という項目がたいていついています。 新規保存時にも「文字コード」や「改行コード」の選択があるはずです。
その他の回答 (3)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
Shift-JISじゃなくて、Shift_JISです。ましてやs-jisでは、ありません。大文字小文字は区別しませんが、-と_は違います。 単に文字コードがShift_JISで保存されているだけじゃないかと。
補足
ORUKA1951さま ご回答ありがとうございます。 またお礼が遅くなり恐れ入ります。 保存するときにどうすれば、文字コードをUTF-8に切り替えられるか？ どうやら保存時に、Shift_JISという設定になっているので、 その設定をUTF-8に替えたいです。 何かご存知の方法がございましたら、 ご教示願います。よろしくお願い申し上げます。
- outbrave
- ベストアンサー率60% (231/380)
文字コードは mata で指定しますが、ファイル自体の文字コードはファイルを保存する時に指定しなければなりません。 meta で utf-8 を指定しても、ファイルを保存する時に Shift_JIS になっていれば文字化けします。
補足
outbraveさま ご回答ありがとうございます。 またお礼が遅くなり恐れ入ります。 >meta で utf-8 を指定しても、 ファイルを保存する時に Shift_JIS になっていれば文字化けします。 保存するときにどうすれば、文字コードをUTF-8に 切り替えられるでしょうか？ どうやら保存時に、Shift_JISという設定になっているので、 私の希望はその設定をUTF-8に替えたいです。 何かご存知の方法がございましたら、 ご教示願います。よろしくお願い申し上げます。
- t_ohta
- ベストアンサー率38% (5081/13278)
metaタグでUTF-8と指定しているけど、実際のHTMLファイルの中身がSHIFT-JISって事はないですか？
補足
t_ohtaさま ご回答ありがとうございます。 またお礼が遅くなり恐れ入ります。 >実際のHTMLファイルの中身がSHIFT-JISって事はないですか？ おっしゃるとおりです。 保存するときにどうすれば、文字コードをUTF-8に切り替えられでしょうか？ どうやら保存時に、Shift_JISという設定になっているので、 その設定をUTF-8に替えたいです。 何かご存知の方法がございましたら、 ご教示願います。よろしくお願い申し上げます。
関連する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上で四角を動かすアニメーションをさせたのですが、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 配列について
HTML5のcanvasにjsで描画する場合、 下記のように複数の図形を描く場合、 配列を用いて表記するにはどのようにすればよろしいでしょうか。 なお、図形の数は決まっていない、また、x,y,width,heightに規則性はないものとします。 ctx.fillStyle = "rgba(0,0,0,1)"; ctx.fillRect(20,10,10,10); ctx.fillStyle = "rgba(0,0,0,1)"; ctx.fillRect(30,10,10,10); ctx.fillStyle = "rgba(64,64,64,1)"; ctx.fillRect(10,20,10,10); ctx.fillStyle = "rgba(64,64,64,1)"; ctx.fillRect(40,20,10,10); … 以上、ご教授いただきたく何卒よろしくお願い致します。
- ベストアンサー
- 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
- 【html5】canvasでの文字の形の透明くりぬ
html5でcanvasを使用した場合に赤い背景に文字の形に透明くり抜きを行いたいです。 ctx.fillStyle = "rgb(200, 0, 0)"; ctx.fillRect(0, 0, 100, 100); ctx.clearRect(20, 30, 60, 40); ★ここがRectでなく文字の切り抜きにしたい。 イメージ的にはclearText()というのがあればいいのになぁ、という感じです。 パスをmoveToで文字の形にうごかして、clipしなさーい という回答はご勘弁を(^^;)
- ベストアンサー
- HTML
- 文字コードってUTF-8が主流に？
文字コードについては、UTF-8が主流になりつつあるってネットで観ました。 文字コードを検索すると次のような説明があります。 （UTF-8のエンコード） UTF-8は、UnicodeとASCIIコードを混在させるための規格です。 （シフトJISコード） シフトJISコードは、SJISとも呼び、Microsoft社が決めたコードでWindows95やMS-DOSやMacなどで使用されています。 その上で質問です。 １、 UTF-8が主流になるってことは、Windows、MacがUTF-8に方向転換するってことでしょうか？ ２、 仮にUTF-8が主流になっても、サイトに <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> と記述していれば文字化けなく表示されるのでしょうか？ 今の時点では判断できない質問なのでしょうか・・
- ベストアンサー
- その他([技術者向] コンピューター)
- 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
- 文字コードsjisをUTF8に書き換えたい
CGIの勉強中の者です。 文字コードはSJISで保存しているCGIをUTF8コードに換えるには何が必要でしょうか？ HTMLならmeta内をSJISからUTF8に変更し、TeraPadなどのテキストエディタでUTF8に保存すればオッケーなんですが。 CGIの場合はHTMLと違って、換えるには複雑なのでしょうか？ CGIプログラムの中では以下の「sjis」を「UTF8」に書き換えし、UTF8で保存しましたけど、文字化けが出てます。 <meta http-equiv="Content-Type" content="text/html;charset=shift_jis"> &jcode'h2z_sjis(*contenido) &jcode'convert(*subject,'sjis'); &jcode'convert(*infor,'sjis'); &jcode'convert(*contenido,'jis'); &jcode'convert(*res_msg,'jis'); print "Content-type: text/html;charset=shift_jis\n\n"; 宜しくお願いします。
- 締切済み
- CGI
お礼
outbraveさま たびたびのご回答ありがとうございます。 エディタで「テラパッド」を使用しております 文字/改行コードを指定して保存から、 文字コードを指定してUTF-8にできました。 助かりました！ 助かりました。