プログラミング canvas

9

取得したデータからチャート上のすべてのポイントを表示したいのですが、それらのすべてのラベルを表示したくありません。チャートが読みにくいためです。ドキュメントで探していましたが、これを制限するパラメータが見つかりませんでした。たとえば、グラフも3つのポイントに制限されているため、ラベルを3つだけ取りたくありません。出来ますか？私は今そのようなものを持っています： 3/4のレーベルを残すだけでいいのであれば、それは素晴らしいことです。しかし、ラベルオプションについてはまったく何も見つかりませんでした。

93 javascript css canvas charts chart.js

18

@ font-faceを使用してテキストを<canvas>に描画すると、最初は機能しません

@ font-faceを介して読み込まれた書体でキャンバスにテキストを描画すると、テキストが正しく表示されません。まったく表示されない（Chrome 13およびFirefox 5の場合）か、書体が間違っています（Opera 11）。このタイプの予期しない動作は、書体を使用した最初の図面でのみ発生します。その後、すべてが正常に動作します。それは標準的な動作か何かですか？ありがとうございました。 PS：以下はテストケースのソースコードです <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>@font-face and &lt;canvas&gt;</title> <style id="css"> @font-face { font-family: 'Press Start 2P'; src: url('fonts/PressStart2P.ttf'); } </style> <style> canvas, pre { border: 1px solid black; padding: 0 1em; } </style> </head> <body> <h1>@font-face and &lt;canvas&gt;</h1> <p> Description: click …

93 html canvas font-face

10

SVGとHTML5 Canvasの違いは何ですか？

SVGとHTML5 Canvasの違いは何ですか？どちらも私には同じことをしているようです。基本的に、どちらも座標点を使用してベクターアートワークを描画します。何が欠けていますか？SVGとHTML5 Canvasの主な違いは何ですか？なぜどちらを選ぶべきなのですか？

92 html canvas svg

5

キャンバス全体を特定の色で塗りつぶす方法

HTML5全体を埋める方法 <canvas>を1つの色で。私はこのようないくつかの解決策を見ましたCSSを使用して背景色を変更するが、キャンバスが透明なままであるため、これは適切な解決策ではありません。変更されるのは、占有するスペースの色だけです。もう1つは、キャンバス内の色で何かを作成することです。たとえば、長方形（ここを参照）ですが、それでもキャンバス全体が色で塗りつぶされません（キャンバスが作成した形状よりも大きい場合）。キャンバス全体を特定の色で塗りつぶす解決策はありますか？

92 javascript html canvas

10

canvas.toDataURL（）がセキュリティ例外をスローするのはなぜですか？

十分な睡眠が取れなかったのですか？この次のコード var frame=document.getElementById("viewer"); frame.width=100; frame.height=100; var ctx=frame.getContext("2d"); var img=new Image(); img.src="http://www.ansearch.com/images/interface/item/small/image.png" img.onload=function() { // draw image ctx.drawImage(img, 0, 0) // Here's where the error happens: window.open(frame.toDataURL("image/png")); } このエラーをスローしています： SECURITY_ERR: DOM Exception 18 これがうまくいかないはずはありません！誰かがこれを説明できますか？

90 javascript html canvas cross-domain

8

javascriptキャンバスで画像のサイズを変更します（スムーズに）

キャンバスでいくつかの画像のサイズを変更しようとしていますが、画像を滑らかにする方法がわかりません。フォトショップやブラウザなどでは、使用するアルゴリズムがいくつかあります（たとえば、バイキュービック、バイリニア）が、これらがキャンバスに組み込まれているかどうかはわかりません。これが私のフィドルです：http：//jsfiddle.net/EWupT/ var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); canvas.width=300 canvas.height=234 ctx.drawImage(img, 0, 0, 300, 234); document.body.appendChild(canvas); 1つ目は通常のサイズ変更された画像タグで、2つ目はキャンバスです。キャンバスがそれほど滑らかではないことに注意してください。どうすれば「滑らかさ」を実現できますか？

90 javascript html image canvas html5-canvas

2

Base64PNGデータからHTML5キャンバスへ

Base64でエンコードされたPNG画像をcanvas要素にロードしたい。私はこのコードを持っています： <html> <head> </head> <body> <canvas id="c"></canvas> <script type="text/javascript"> var canvas = document.getElementById("c"); var ctx = canvas.getContext("2d"); data = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAAAXNSR0IArs4c6QAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oMCRUiMrIBQVkAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAADElEQVQI12NgoC4AAABQAAEiE+h1AAAAAElFTkSuQmCC"; ctx.drawImage(data, 0, 0); </script> </body> </html> Chrome 8では、次のエラーが発生します。 Uncaught TypeError: Type error そしてFirefoxのFirebugではこれ：「オブジェクトのタイプはオブジェクトに関連付けられたパラメータの予想されるタイプと互換性がありません」コード：「17」そのbase64には、GIMPで作成した5x5pxの黒いPNGの正方形があり、GNU / Linuxのプログラムbase64でbase64に変換します。

89 html canvas png base64

12

HTMLの<canvas>要素でアンチエイリアスをオフにできますか？

<canvas>要素をいじったり、線を引いたりしています。対角線がアンチエイリアス処理されていることに気づきました。私がしていることにはギザギザの外観が好きです-この機能をオフにする方法はありますか？

88 javascript html canvas antialiasing

3

ユーザーブラウザで矢印キーのスクロールを無効にする

キャンバスとJavaScriptを使ってゲームを作っています。ページが画面より長い場合（コメントなど）、下矢印を押すとページが下にスクロールし、ゲームをプレイできなくなります。プレーヤーが下に移動したいときにウィンドウがスクロールしないようにするにはどうすればよいですか？ Javaゲームなどでは、ユーザーがゲームをクリックする限り、これは問題ではないと思います。 FFで矢印キーを使用してページスクロールを無効にする方法から解決策を試しましたが、機能させることができませんでした。

87 javascript canvas scroll arrow-keys

13

Chart.jsキャンバスのサイズ変更

（Android WebView HTML5キャンバスエラー）で、Graph.jsライブラリを使用したグラフのプロットに関する質問を投稿しました。私が今抱えている問題は、グラフを複数回プロットする関数を呼び出すと、キャンバスが毎回サイズ変更されることです。グラフが同じキャンバスに再描画されるたびに、そのサイズも変更されます。キャンバスのサイズも設定してみましたが、うまくいきませんでした。理由は何でしょうか？なぜキャンバスは毎回サイズ変更されるのですか？

86 html canvas chart.js

9

mousemoveでキャンバスからピクセルカラーを取得

マウスの下でRGB値のピクセルを取得することは可能ですか？これの完全な例はありますか？これが私がこれまでに持っているものです： function draw() { var ctx = document.getElementById('canvas').getContext('2d'); var img = new Image(); img.src = 'Your URL'; img.onload = function(){ ctx.drawImage(img,0,0); }; canvas.onmousemove = function(e) { var mouseX, mouseY; if(e.offsetX) { mouseX = e.offsetX; mouseY = e.offsetY; } else if(e.layerX) { mouseX = e.layerX; mouseY = e.layerY; } var c …

85 javascript html jquery canvas getimagedata

12

HTML5 / Canvasはダブルバッファリングをサポートしていますか？

私がやりたいのは、グラフィックをバッファに描画し、それをそのままキャンバスにコピーして、アニメーションを実行し、ちらつきを回避できるようにすることです。しかし、私はこのオプションを見つけることができませんでした。誰かが私がこれについてどうやって行くことができるか知っていますか？

83 javascript html canvas double-buffering

4

HTML5キャンバステキストを太字または斜体にスタイル設定するにはどうすればよいですか？

私は非常に簡単な方法でテキストをキャンバスに印刷しています： var ctx = canvas.getContext('2d'); ctx.font = "10pt Courier"; ctx.fillText("Hello World", 100, 100); しかし、テキストを太字、斜体、またはその両方に変更するにはどうすればよいですか？その簡単な例を修正するための提案はありますか？

83 javascript html canvas typography

6

Html5キャンバスdrawImage：アンチエイリアスを適用する方法

次の例をご覧ください。 http://jsfiddle.net/MLGr4/47/ var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); img = new Image(); img.onload = function(){ canvas.width = 400; canvas.height = 150; ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, 400, 150); } img.src = "http://openwalls.com/image/1734/colored_lines_on_blue_background_1920x1200.jpg"; ご覧のとおり、drawImageは自動的にアンチエイリアシングを適用すると言われていますが、画像はアンチエイリアシングされていません。私はさまざまな方法を試しましたが、うまくいかないようです。アンチエイリアス画像を取得する方法を教えてください。ありがとう。

82 html canvas html5-canvas interpolation antialiasing

16

HTML5キャンバスで楕円を描く方法は？

楕円形を描く本来の機能はないようです。また、私は卵形を探していません。 2つのベジェ曲線で楕円を描くことは可能ですか？誰かがそれを経験しましたか？私の目的は、いくつかの目を描き、実際には円弧を使用することです。前もって感謝します。解決したがって、scale（）は、次のすべてのシェイプのスケーリングを変更します。Save（）は前に設定を保存し、restoreを使用して設定を復元し、スケーリングせずに新しい形状を描画します。ジャニに感謝します ctx.save(); ctx.scale(0.75, 1); ctx.beginPath(); ctx.arc(20, 21, 10, 0, Math.PI*2, false); ctx.stroke(); ctx.closePath(); ctx.restore();

81 javascript html canvas

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

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