タグ付けされた質問 「canvas」

地図 私は、perlinノイズハイトマップを使用してJavascriptでタイルベースのRPGを作成し、ノイズの高さに基づいてタイルタイプを割り当てています。 マップはこのように見えます（ミニマップビューで）。 画像の各ピクセルからカラー値を抽出し、タイル辞書のタイルに対応する（0〜255）の間の位置に応じて整数（0〜5）に変換するかなり単純なアルゴリズムがあります。次に、この200x200の配列がクライアントに渡されます。 次に、エンジンは配列の値からタイルを決定し、それらをキャンバスに描画します。つまり、山、海など、リアルな外観の特徴を持つ興味深い世界ができあがります。 次に、私がしたかったのは、隣人が同じタイプでない場合にタイルを隣人にシームレスに混ぜ合わせるようなある種のブレンドアルゴリズムを適用することでした。上記のサンプルマップは、プレーヤーがミニマップに表示するものです。画面上に、白い長方形でマークされたセクションのレンダリングバージョンが表示されます。タイルは、単色のピクセルとしてではなく、画像とともにレンダリングされます。 これは、ユーザーがマップに表示するものの例ですが、上記のビューポートが示す場所とは異なります！ この見方で、私は移行を起こしたいと思っています。 アルゴリズム 異なるタイプのタイルの隣にある場合、ビューポート内のマップをトラバースし、各タイルの上部に別の画像をレンダリングする単純なアルゴリズムを思いつきました。（マップは変更しません！いくつかの追加画像をレンダリングするだけです。）このアルゴリズムのアイデアは、現在のタイルの近傍をプロファイルすることでした： これは、エンジンがレンダリングする必要のあるシナリオの例です。現在のタイルはXでマークされたタイルです。 3x3配列が作成され、その周りの値が読み込まれます。この例では、配列は次のようになります。 [ [1,2,2] [1,2,2] [1,1,2] ]; 私のアイデアは、可能なタイル構成の一連のケースを考え出すことでした。非常に単純なレベルで： if(profile[0][1] != profile[1][1]){ //draw a tile which is half sand and half transparent //Over the current tile -> profile[1][1] ... } これはこの結果を与えます： そこから遷移として働く[0][1]の[1][1]ではなく、から[1][1]の[2][1]、どこのハードエッジが残ります。したがって、その場合はコーナータイルを使用する必要があると考えました。私は2つの3x3スプライトシートを作成し、必要なタイルのすべての可能な組み合わせを保持すると考えました。次に、ゲーム内にあるすべてのタイルについてこれを複製しました（白い領域は透明です）。これは、タイルのタイプごとに16タイルになります（各スプライトシートの中央のタイルは使用されません）。 理想的な結果 したがって、これらの新しいタイルと正しいアルゴリズムを使用すると、サンプルセクションは次のようになります。 私が行ったすべての試みは失敗しましたが、アルゴリズムには常にいくつかの欠陥があり、パターンは奇妙になってしまいます。私はすべてのケースを正しくすることができないようで、全体的にそれを行うには悪い方法のようです。 解決策？ したがって、この効果をどのように作成できるか、またはプロファイリングアルゴリズムを作成するための方向性に関する代替ソリューションを誰かが提供できるとしたら、私は非常に感謝します！

153 javascript  html  algorithm  canvas 

ビューポートの幅と高さの100％を占めるキャンバス要素を作成しようとしています。 あなたは私の例で見ることができ、ここでしかし、それはChromeとFirefoxの両方にスクロールバーを追加して、発生しています。余分なスクロールバーを防ぎ、ウィンドウの幅と高さをキャンバスのサイズに正確に指定するにはどうすればよいですか？

151 jquery  html  canvas  viewport 

HTML5でテキストを書くことは可能canvasですか？

150 html  canvas 

私はhtml5キャンバス要素を使用して、ブラウザーで画像のサイズを変更します。品質が非常に低いことが判明しました。私はこれを見つけました：<canvas>のスケーリング時に補間を無効にしますが、品質の向上には役立ちません。 以下は、CSSとJSのコードと、Photoshopで呼び出され、キャンバスAPIで拡大縮小された画像です。 ブラウザで画像を拡大縮小するときに最適な品質を得るにはどうすればよいですか？ 注：大きな画像を小さな画像に縮小し、キャンバスの色を変更して、結果をキャンバスからサーバーに送信します。 CSS： canvas, img { image-rendering: optimizeQuality; image-rendering: -moz-crisp-edges; image-rendering: -webkit-optimize-contrast; image-rendering: optimize-contrast; -ms-interpolation-mode: nearest-neighbor; } JS： var $img = $('<img>'); var $originalCanvas = $('<canvas>'); $img.load(function() { var originalContext = $originalCanvas[0].getContext('2d'); originalContext.imageSmoothingEnabled = false; originalContext.webkitImageSmoothingEnabled = false; originalContext.mozImageSmoothingEnabled = false; originalContext.drawImage(this, 0, 0, 379, 500); }); photoshopでサイズ変更された画像： …

149 javascript  css  html  canvas  html5-canvas 

仕様にはcontext.measureText（text）関数があり、そのテキストを印刷するために必要な幅を教えてくれますが、それがどのくらいの高さであるかを見つける方法が見つかりません。フォントに基づいていることは知っていますが、フォント文字列をテキストの高さに変換する方法がわかりません。

148 javascript  text  canvas 

現在HTML5 Webアプリ/ Phonegapネイティブアプリを構築していますが、キャンバスを画像としてで保存する方法がわかりませんcanvas.toDataURL()。誰かが私を助けてくれますか？ ここにコードがありますが、何が問題になっていますか？ //私のキャンバスの名前は「canvasSignature」 JavaScript： function putImage() { var canvas1 = document.getElementById("canvasSignature"); if (canvas1.getContext) { var ctx = canvas1.getContext("2d"); var myImage = canvas1.toDataURL("image/png"); } var imageElement = document.getElementById("MyPix"); imageElement.src = myImage; } HTML5： <div id="createPNGButton"> <button onclick="putImage()">Save as Image</button> </div>

141 javascript  html  cordova  canvas  save 

塗りつぶすことができるのは四角形だけで、角の丸いものはないことがわかりました。どうすればよいですか？

140 html  canvas 

どうやら requestAnimationFrameは、事実をアニメーション化するための事実上の方法のです。それはほとんどの場合私にとってはうまくいきましたが、今私はいくつかのキャンバスアニメーションを実行しようとしていて、私は疑問に思っていました。私はrAFの目的が一貫してスムーズなアニメーションのためであることを理解しており、アニメーションが途切れる危険を冒す可能性がありますが、今のところ大幅に異なる速度でかなり恣意的に実行されているようです。どういうわけか。 私は使用しますsetIntervalが、rAFが提供する最適化が必要です（特にタブにフォーカスがあると自動的に停止します）。 誰かが私のコードを確認したい場合、それはほとんどです： animateFlash: function() { ctx_fg.clearRect(0,0,canvasWidth,canvasHeight); ctx_fg.fillStyle = 'rgba(177,39,116,1)'; ctx_fg.strokeStyle = 'none'; ctx_fg.beginPath(); for(var i in nodes) { nodes[i].drawFlash(); } ctx_fg.fill(); ctx_fg.closePath(); var instance = this; var rafID = requestAnimationFrame(function(){ instance.animateFlash(); }) var unfinishedNodes = nodes.filter(function(elem){ return elem.timer < timerMax; }); if(unfinishedNodes.length === 0) { console.log("done"); cancelAnimationFrame(rafID); instance.animate(); …

140 javascript  performance  animation  canvas  requestanimationframe 

ブラウザがHTML5 <canvas>タグをサポートしない状況に対処する標準的な方法は、次のようなフォールバックコンテンツを埋め込むことです。 <canvas>Your browser doesn't support "canvas".</canvas> ただし、ページの残りの部分は同じままで、不適切または誤解を招く可能性があります。キャンバスの非サポートを検出して、残りのページを適切に表示できるようにしたいのですが。あなたは何をお勧めします？

139 javascript  html  canvas  progressive-enhancement  graceful-degradation 

描画アプリケーションの場合、マウスの移動座標を配列に保存してから、lineToで描画します。結果の線は滑らかではありません。収集されたすべてのポイント間に単一のカーブを作成するにはどうすればよいですか？ 私はグーグルで検索しましたが、線を引くための3つの関数しか見つかりませんでした。2つのサンプルポイントの場合は、単にを使用しますlineTo。3つのサンプルポイントのquadraticCurveTo場合、4つのサンプルポイントの場合bezierCurveTo。 （bezierCurveTo配列の4つのポイントごとにa を描画しようとしましたが、これにより、連続した滑らかな曲線ではなく、4つのサンプルポイントごとにねじれが発生します。） 5つのサンプルポイント以降で滑らかな曲線を描く関数を作成するにはどうすればよいですか？

133 javascript  canvas  html5-canvas  bezier  spline 

SVGファイルをHTML5キャンバスに描画するデフォルトの方法はありますか？Google ChromeはSVGを画像としてロードすることをサポートしています（そして単にを使用していますdrawImage）が、開発者コンソールはそれを警告していresource interpreted as image but transferred with MIME type image/svg+xmlます。 （この質問のように）SVGをキャンバスコマンドに変換する可能性があることは知っていますが、それが必要ないことを願っています。私は古いブラウザは気にしません（つまり、FireFox 4とIE 9が何かをサポートするなら、それで十分です）。

130 html  canvas  svg 

あるキャンバスのすべてのコンテンツをコピーして、クライアント側で別のキャンバスにすべて転送したい canvas.toDataURL()and context.drawImage()メソッドを使用してこれを実装すると思いますが、いくつかの問題が発生しています。 私の解決策は、これを取得Canvas.toDataURL()してJavaScriptのImageオブジェクトに格納し、context.drawImage()メソッドを使用して元に戻すことです。 ただし、このtoDataURLメソッドは64ビットのエンコードされたタグを"data:image/png;base64,"前に付加して返すと思います。これは有効なタグではないようです（常に一部のRegExを使用してこれを削除できます）が、その64ビットのエンコードされた文字列は、"data:image/png;base64,"サブストリングの後に有効なイメージですか？と言ってimage.src=iVBORw...ASASDAS、これをキャンバスに描画できますか？ 私はいくつかの関連する問題を見てきました： base64を使用してキャンバス画像をあるキャンバスから別のキャンバスに表示します しかし、解決策は正しくないようです。

129 html  canvas 

私は経験豊富なJavaプログラマーですが、JavaScript / HTML5関連のものを約10年ぶりに検討しています。私はこれまでで最も簡単なものであるべきものに完全に困惑しています。 例として、何かを描き、それにイベントハンドラを追加したかっただけです。私は愚かなことをしていると確信していますが、私はすべてを検索しましたが、何も提案されていません（たとえば、この質問への回答： JavaScriptで入力するonclickプロパティを追加）は機能します。Firefox 10.0.1を使用しています。私のコードが続きます。複数のコメント行が表示され、各行の最後に何が起こったか（または何が起こらなかったか）の説明が表示されます。 ここで正しい構文は何ですか？私はおかしくなりそうだ！ <html> <body> <canvas id="myCanvas" width="300" height="150"/> <script language="JavaScript"> var elem = document.getElementById('myCanvas'); // elem.onClick = alert("hello world"); - displays alert without clicking // elem.onClick = alert('hello world'); - displays alert without clicking // elem.onClick = "alert('hello world!')"; - does nothing, even with clicking …

128 javascript  html  canvas  event-handling  onclick 

注：これはどのように関係しているスケールアップ時に既存のcanvas要素がレンダリングされている、いない線やグラフィックスのレンダリング方法を行うにはキャンバスの表面に。つまり、これは、スケーリングされた要素の補間に関するすべてのことであり、キャンバスに描画されるグラフィックのアンチエイリアスとは何の関係もありません。ブラウザがどのように線を引くかについては気にしていません。拡大したときに、ブラウザー要素がキャンバス要素自体をどのようにレンダリングするかを気にします。 <canvas>要素をスケーリングするときに補間を無効にするようにプログラムで変更できるキャンバスプロパティまたはブラウザ設定はありますか？クロスブラウザソリューションは理想的ですが、必須ではありません。Webkitベースのブラウザーが私の主なターゲットです。パフォーマンスは非常に重要です。 この質問は最も類似していますが、問題を十分に説明していません。それが価値があるもののために、私はimage-rendering: -webkit-optimize-contrast無駄にしようとしました。 アプリケーションは、必要なものを明確にするためにHTML5 + JSで書かれた「レトロ」な8ビットスタイルのゲームになります。 説明のために、ここに例を示します。（ライブバージョン） 21x21のキャンバスがあるとしましょう... <canvas id='b' width='21' height='21'></canvas> ... CSSがあり、要素を5倍にします（105x105）： canvas { border: 5px solid #ddd; } canvas#b { width: 105px; height: 105px; } /* 5 * 21 = 105 */ キャンバスに単純な「X」を次のように描画します。 $('canvas').each(function () { var ctx = this.getContext("2d"); ctx.moveTo(0,0); ctx.lineTo(21,21); ctx.moveTo(0,21); ctx.lineTo(21,0); ctx.stroke(); }); …

126 javascript  html  canvas 

キャンバスを透明にするにはどうすればよいですか？必要なのは、2つのキャンバスを重ねて配置するためです。

123 html  canvas