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

合成操作を試し、キャンバスに画像を描画した後、画像を削除して合成しようとしています。どうすればよいですか？ 他の画像を再描画するためにキャンバスをクリアする必要があります。これはしばらく続くので、毎回新しい長方形を描くことが最も効率的なオプションになるとは思いません。

1012 javascript  html  canvas  html5-canvas  composite 

Googleの「バグの報告」または「フィードバックツール」を使用すると、ブラウザウィンドウの領域を選択して、バグに関するフィードバックとともに送信されるスクリーンショットを作成できます。 重複質問に投稿されたJason Smallのスクリーンショット。 彼らはこれをどのように行っていますか？GoogleのJavaScriptのフィードバックAPIからロードされ、こことフィードバックモジュールのその概要は、スクリーンショット機能のデモンストレーションを行います。

924 javascript  html  canvas  screenshot 

HTMLキャンバスに表示されているものを画像またはPDFとしてキャプチャまたは印刷することはできますか？ キャンバスを介して画像を生成し、その画像からpngを生成できるようにしたいと考えています。

719 javascript  html  canvas  export  png 

javascriptとcanvas要素を使用してクライアント側でサムネイル画像を作成しようとしていますが、画像を縮小するとひどく見えます。リサンプリングがバイキュービックではなく「ニアレストネイバー」に設定されているため、フォトショップで縮小されたように見えます。このサイトを正しく表示することは可能です。はキャンバスを使用しても問題なく実行できるすることは可能です。「[Source]」リンクに示されているのと同じコードを使用してみましたが、それでもひどいようです。私が見逃しているもの、設定する必要のある設定などはありますか？ 編集： jpgのサイズを変更しようとしています。リンク先のサイトとフォトショップで同じjpgのサイズを変更してみましたが、サイズを小さくすると問題ありません。 関連するコードは次のとおりです。 reader.onloadend = function(e) { var img = new Image(); var ctx = canvas.getContext("2d"); var canvasCopy = document.createElement("canvas"); var copyContext = canvasCopy.getContext("2d"); img.onload = function() { var ratio = 1; if(img.width > maxWidth) ratio = maxWidth / img.width; else if(img.height > maxHeight) ratio = maxHeight / img.height; …

314 javascript  html  canvas  image-resizing 

（canvas要素に対して）クリックのx座標とy座標を返すcanvas要素にクリックイベントハンドラーを追加する最も簡単な方法は何ですか？ レガシーブラウザの互換性は必要ありません。Safari、Opera、Firefoxがサポートします。

276 javascript  canvas 

中心的な単語が1つあるWebページが欲しい。 この単語をアニメーションで描画して、ページが同じように単語を「書き出す」ようにします。つまり、ある時点から始まり、最終的な結果がグリフになるように時間とともに線と曲線を描画します。 これが<canvas>DOMで行われるかどうかは気にせず、JavaScriptとCSSのどちらで行われるかは気にしません。jQueryがないことは良いことですが、必須ではありません。 これどうやってするの？私は運が悪くて徹底的に検索しました。

229 javascript  css  canvas  html5-canvas  css-shapes 

閉まっている。この質問は再現性がないか、タイプミスが原因です。現在、回答を受け付けていません。 この質問を改善してみませんか？Stack Overflowのトピックとなるように質問を更新します。 6年前休業。 この質問を改善する 面白いタイトルを許してください。私は壁とお互いに対して200のボールが跳ねたり衝突したりする小さなグラフィックデモを作成しました。ここに私が現在持っているものを見ることができます：http : //www.exeneva.com/html5/multipleBallsBouncingAndColliding/ 問題は、それらが互いに衝突するたびに、それらが消えることです。理由はわかりません。誰かが見て、私を手伝ってくれる？ 更新：明らかに、balls配列にはNaNの座標を持つボールがあります。以下は、ボールを配列にプッシュするコードです。座標がどのようにNaNを取得しているかは完全にはわかりません。 // Variables var numBalls = 200; // number of balls var maxSize = 15; var minSize = 5; var maxSpeed = maxSize + 5; var balls = new Array(); var tempBall; var tempX; var tempY; var tempSpeed; var tempAngle; var …

202 javascript  canvas  geometry  physics  collision 

HTML5の使用 <canvas>要素、画像ファイル（PNG、JPEGなど）をロードし、キャンバスに完全に透過的に描画してから、フェードインします。画像をロードして描画する方法を理解しました。キャンバスですが、一度描画されたときに不透明度を変更する方法がわかりません。 ここに私がこれまでに持っているコードがあります： var canvas = document.getElementById('myCanvas'); if (canvas.getContext) { var c = canvas.getContext('2d'); c.globalAlpha = 0; var img = new Image(); img.onload = function() { c.drawImage(img, 0, 0); } img.src = 'image.jpg'; } 設定するプロパティや、不透明度を変更するために呼び出す関数など、誰かが私を正しい方向に向けてくれますか？

196 html  canvas  transparency  opacity  alpha 

私は2つのキャンバスを持っています。1つはHTML属性widthを使用heightし、それをサイズ変更するために、もう1つはCSSを使用します。 <canvas id="compteur1" width="300" height="300" onmousedown="compteurClick(this.id);"></canvas> <canvas id="compteur2" style="width: 300px; height: 300px;" onmousedown="compteurClick(this.id);"></canvas> Compteur1は通常どおりに表示されますが、compteur2は表示されません。コンテンツはJavaScriptを使用して300x300のキャンバスに描画されます。 なぜ表示に違いがあるのですか？

194 css  html  canvas  height  width 

HTML5 Canvasには、単一のピクセルを明示的に設定する方法がありません。 非常に短いラインを使用してピクセルを設定することは可能かもしれませんが、アンチアライゼーションとラインキャップが干渉する可能性があります。 別の方法は、小さなImageDataオブジェクトを作成して使用することかもしれません： context.putImageData(data, x, y) それを所定の位置に配置します。 誰かがこれを行う効率的で信頼できる方法を説明できますか？

184 html  canvas  pixel 

HTML5 canvas要素の幅と高さを修正することは可能ですか？ 通常の方法は次のとおりです。 <canvas id="canvas" width="300" height="300"></canvas>

181 html  canvas 

拡張ライブラリがない場合、同じキャンバス要素に複数のレイヤーを含めることはできますか？ それで、トップレイヤーでclearRectを実行しても、ボトムレイヤーは消去されませんか？ ありがとう。

176 html  canvas  layer 

誰でもこれがどのようにできるか知っていますか？canvasオブジェクト、svg、jQueryなどを使用しますか？

165 ipad  html  canvas  svg 

Googleマップでズームするように、HTML 5キャンバスでマウスの下のポイントをズームできるようにしたい。どうすればそれを達成できますか？

156 javascript  html  canvas 

次の作業コードがあります。 ctx = document.getElementById("canvas").getContext('2d'); 使用するように書き直す方法はあります$か？これを行うと失敗します。 ctx = $("#canvas").getContext('2d');

155 javascript  jquery  html  canvas