HTML5のcanvasのリセット

前へ 次へ
このQ&Aのポイント
  • HTML5のcanvasを使用したプログラムで、線のリセットについて質問があります。
  • canvasの中で使用するPathを使って描いた線が、reset()関数で正しく消えない問題についてです。
  • 何か良い解決策をご存知の方がいらっしゃいましたら、アドバイスをお願いします。
回答を見る
  • ベストアンサー

HTML5のcanvasのリセット

こんにちは HTML5のcanvasを使用したプログラムを作っています。 ベースの絵を描くコードを関数"base()"とし ベースの絵を消すため、上から白いfillRectを描く関数"reset()"を作りました。 実際にプログラムを実行してみると まず最初にbase()で絵を描き、次にreset()を実行することはできました。 ですが再度base()を実行するとbase()の中のlineToで描いた線が最初より太くなってしまいました。 これはPathを使って描いた線は他のfillRect等で描いた図形とは違いreset()では正しく消せていないということなのでしょうか。一応reset()を実行するとlineToで描いた黒い線が消えているようには見えます。 何か良い解決方をご存知の方いましたらアドバイスお願いします。

  • Qry3
  • お礼率0% (0/73)

質問者が選んだベストアンサー

  • ベストアンサー
  • SAYKA
  • ベストアンサー率34% (944/2776)
回答No.1

canvasのペン設定は不定だから使う度に目的の設定をするように　みたいな記述をどこかで見たことがあるけどどこだったかな・・・ 実際どうなってるか知らないけどfillの後に線の設定をしないままになってるって言うなら　線設定の初期化するものを作ってそれを呼ぶように改造してみたらどうかな

  1. カテゴリ
  2. パソコン・スマートフォン
  3. Windows
  4. Windows 7

関連するQ&A

  • canvasについて

    HTML初心者です HTML5を勉強しようとおもっています canvasを扱うときに使うjavascriptはHTML5ができる前からの機能をつかっているのですか？ （元々javascriptにあった機能をつかってcanvasで絵をかけるようにしているのですか？それともHTML5で新たに作られた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); … 以上、ご教授いただきたく何卒よろしくお願い致します。

  • 一定時間たつと、リセットしたい

    C言語であるプログラムを作成中なんですが、一定時間たつとプログラムをリセットしてまた最初からプログラムを実行するような感じにしたいのですが、わからず困っています。 例えば、 if (100秒たったら) { 配列に入ってるデータなどをリセットして、 最初から実行。 } という感じにしたいと思ってます。要するに、プログラムを実行してから、時間を数え、100秒たったらまた1から実行しなおすという風にしたいと考えています。 そういう時間を数える関数などはあるのでしょうか? どなたかご教授おねがいします。

  • リセット動作

    HTML、javaScript とも初心者です。 ベース画像に別の画像を上乗せした後、 その箇所の表示をベース画像だけに戻すためにリセット処理すると、 他の部分の表示が消去されてしまいます。 消去されないようにする方法を教えてください。 実際の処理： <form> <input type="button" value="RESET" onclick="rst"> </form> <script type="text/javascript"> function rst() { document.write("<img src='baseimage.png' style='position:absolute;top:100px;left:150px'>"); } </script> これを実行すると、baseimage の表示だけが残り、他の部分が消去されてしまいます。 消去されないようにする方法を教えてください。 よろしくお願いいたします。

  • めっちゃ綺麗なデジ絵を描く時のキャンバスの大きさ

    ピクシブとかさまよっていると本当に美麗な絵を描いてらっしゃる方が いるんですけど、拡大図などで見てもほとんどが1000ピクセル以内に 収まっているんですよね…。 私のパソコンって結構小さめな感じでペンタブで描いてるんですけど、 どうも綺麗に見える線画ができないのです。 なるべくアンチエイリアス無しで描こうと思って描いても キャンバスが小さいので解像度上げてもやっぱ線がりザカザカに 見えて汚いんですよね…。 そこで質問なんですけど、あの凄い美麗なイラストを描く皆さんは、 描く時、最初は結構大きめなサイズで描いたりしてるんですか？ それでピクシブで投稿できるファイル(jpegなど)に変換するときに レイヤーをひとまとめにして、画像を小さくするんですか？ ご回答よろしくお願いいたします。m(__)m

  • ブログなどでのHTMLへの反映のさせ方？

    こんばんわ。 ブログなどはほとんどの場合、アドレスがパス名までですが、 （例：http://blog.livedoor.jp/hogehoge/） 最終パスの先にindex.htmlを指定しても同じページ内容が表示されるので、トップページは（最後がパス名で終わるアドレスを指定→index.cgiを実行→PerlがHTMLを出力してる　わけじゃなく）HTMLファイルそのものを読み込んでるんですよね？ そうだとすると、記事数の表示とか、閲覧するだけでカレンダーが今月の表示になっていたりとか、動的に変化していくのはどういう仕組みなんでしょう？ 何らかのサーバーサイドプログラムを裏で動かしているのでしょうか？ 記事数の反映はCGIプログラムに記事内容を投稿して、CGIプログラムがindex.htmlを書き換える・・・とおぼろげに想像はつくのですが、これで合ってるでしょうか・・・？

  • PHPからＣプログラムを実行して実行結果をHTML上に表示

    PHP初心者です。PHPからＣプログラムを実行して実行結果をHTML上に表示する方法が分からなく困っています。 Ｃプログラムの中身は、 #include <stdio.h> int main(){ printf("Hello."); } です。 phpの中身は、 <HTML> <HEAD><TITLE>Cプログラム呼び出し</TITLE></HEAD> <BODY> <?php $cmd = "test.exe"; $a = exec($cmd); echo $a; ?> </BODY> </HTML> としており、調べてみるとexec()関数で外部プログラムを実行すると書いてあったのでこのように作成しました。

    • ベストアンサー
    • PHP
  • 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
  • 関数を呼び出すHTMLタグ<body onload="hoge()">について

    ほぼ独学でJavaScriptを学んでいるので、一般的なコード（ＨＴＭＬ含め）の書き方が分かりません。 JavaScriptでは、ボタンや画像をクリックすると動作する、 というものが多いですが、そうではなくて、 （それはonclick等で関数を呼び出せば良いことは分かります） 時計のように、アクセスした瞬間から実行されるプログラムを複数書きたい時は、 どのようにするのが妥当でしょうか。 <body onload="hoge()">では、関数hoge()しか実行されないことになりますよね。 そうではなくて、hoge()以外にもいくつかの関数を実行したい時はどうするのが一般的ですか？ ここでＣ言語のように、hoge()をmain関数（int main(void){}）のような扱い方にすると、 hoge()関数内で呼び出されている関数も呼び出されることになりますが、そのような書き方で良いですか？ アクセスの効率の良さから考えて、他に良いやり方はあるでしょうか。 ・・・前に困ったので<body>タグを２つ付けて２つの関数をonloadアトリビュートで呼び出すという、 奇々怪々なことをやってみて、それでIE7,FireFox3で動いていたので驚いたんですが、 そんなやり方はさすがに御法度ですよね(笑)。 答えにくい質問だと思いますが、アドバイスお願いします。

  • HTMLからのBATファイル実行

    HTMLと画像（ABC.GIF）、プログラム（123.EXE）、BATファイルをCDに記録して配布したいと考えています。 autorun.infでHTMLファイル（index.html）を実行します。 このHTMLファイルには、同じ場所にあるBATファイルへリンクが貼られています。 ◎BATファイルの内容（Windows Vista用） COPY ABC.GIF C:\TEST COPY 123.EXE "%USERPROFILE%\Desktop\" ◎BATファイルの内容（Windows XP用） COPY ABC.GIF C:\TEST COPY 123.EXE "%USERPROFILE%\デスクトップ\" ブラウザで表示して実際にBATファイルを実行したところ「ファイルが見つからない」というエラーが表示されCOPYコマンドは実行されませんでした。 確かに指定したパスにファイルは存在します。 その証拠に、リンクからではなく、直接BATファイルを実行すると希望した結果が得られました。 何か考えられることはございますでしょうか。 解決方法をお教えいただければ幸いです。 宜しくお願いします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する