問題タブ [globalcompositeoperation]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票する
1 に答える
3482 参照

javascript - HTML5 の globalCompositeOperation "xor" を Chrome の形状要素とテキスト要素で使用する

Chrome で、globalCompositeOperation を使用してシェイプとテキストをマスク/ブレンドしようとしたときに問題が発生しました (シェイプ マスク/他のシェイプとのブレンドは問題なく動作します) (より具体的には、Chrome 12.0.7 を使用しています)。ここで迷子になった可能性がある場所を提案したり、キャンバス要素内で回避策を提案したりできますか?

ここに私が見ているものを示す画像があります: http://i.stack.imgur.com/wRunv.jpg


これらの結果を再現するコードは次のとおりです。

0 投票する
1 に答える
388 参照

javascript - globalCompositeOperation と setTimeout に関する問題

画像の上の長方形の塗りつぶしを (消しゴムのように) クリアするアニメーションを作成しようとしています。円がアニメーション化されると、それがカバーしていたすべての領域がクリアされます。

globalCompositeOperation を使用してこれを行うことはできますが、アニメーションを遅くしようとしてもうまくいきません。setTimeout 関数を試しています。アニメーションが遅くならない理由はありますか? 私が知っていることはすべて試しましたが、助けや代替案があれば大歓迎です。

また、 setTimeout(func(),time in ms) 関数を使用しようとすると、画像も削除されます。

完全なコード:

キャンバス テスト

0 投票する
1 に答える
405 参照

html5-canvas - html5 Canvasgoogle+フィードバックハイライト機能

google +フィードバックの場合、HTMLページを切り取らずに、黒いオーバーレイ(白い長方形)を「切り取って」フィードバックのハイライト効果を作成するにはどうすればよいですか?この投稿から、Google +フィードバックシステムのスクリーンショット部分はどのように機能しますか?、ハイライトとブラックアウトは<div>タグと<canvas>タグであることを知っています。

このウェブサイトhttp://hertzen.com/experiments/jsfeedback/examples/combination/index.htmlでも同様のフィードバックを見つけました。そのハイライト効果も<div>タグであり、CSSを使用しています。ただし、その白い長方形は、「カット」するのではなく、黒いオーバーレイの上にスタックされます。したがって、ハイライトはグーグルほど明確ではありません。グーグルのフィードバックハイライト機能がどのように機能するかについての洞察はありますか?それはcanvasglobalCompositeOperationを使用することによるものですか?キャンバスglobalCompositeOperation、destination-out操作を使用するようにコードを変更しようとしましたが、黒いオーバーレイとhtmlページをカットします。しかし、JavaScriptがあまり得意ではないので、コーディングを間違えただけかもしれません。どんな助けでも大歓迎です!!

0 投票する
2 に答える
2085 参照

html - globalCompositeOperation "destination-out" を使用した後、新しい形状を囲むアウトラインを取得するにはどうすればよいですか?

青いアウトラインの円弧と、グローバル複合演算子「destination-out」を使用して円弧の一部を覆う円があり、その結果、円弧の一部が取り消されたり切り取られたりしますが、新しい形状の一部は失われませんアウトライン、形状のアウトラインを再確立する簡単な方法はありますか?

実際の例はここにあります: http://jsfiddle.net/NY2up/

アーク

</p>

0 投票する
1 に答える
581 参照

html - コンポジットシェイプをあるキャンバスから別のキャンバスにドラッグアンドドロップできますか

私はこれについての基本しか知らないので、HTML5は初めてです。誰かがこれで私を助けることができれば、それは私にとって素晴らしいことです。

差分形状をデザインし、divからcanvasにドラッグアンドドロップする必要があります。キャンバスでの操作を使用してさまざまな形状を作成しましglobalcompositeた。次に、キャンバスから別のキャンバスにドラッグする必要があります。

誰かが私の主張を理解してくれることを願っています。jsfiddle.net/rGUma/5/#このようなものを、デザインの形を維持するために必要な3つの画像を配置することは可能です。

それは私のjfiddleの例ではありません、私はそのようにしたいですurの応答をありがとう

0 投票する
1 に答える
827 参照

html - Samsung Galaxy s3 4.1.1 & 4.1.2 での Canvas globalCompositeOperation の問題

Android ブラウザー用の小さな描画アプリケーションを作成しようとしています。ただし、globalCompositeOperation = "destination-out" を使用してビットマップを消去しようとすると問題が発生します。Samsung Galaxy S3 では機能しません。

Android 4.1.1 を搭載した HTC ONE X では、まったく同じコードが正常に動作します。

ここで同様の問題を見つけましたhttp://code.google.com/p/android/issues/detail?id=39183しかし解決策はありません。この例は、SGS3 と ONEx で私のコードとまったく同じように動作します

何が間違っている可能性がありますか?SGS3だけの問題ですか?

0 投票する
1 に答える
563 参照

javascript - キャンバス描画オブジェクトのマウスイベント

このプラグインを使用してキャンバスベースのサイトメニューを作成し、「乗算」効果を作成したいと思います。ただし、これとglobalCompositeOperationは、同じキャンバス内のctxオブジェクトで機能しています。(コンテキストブレンダーでは、オフスクリーンキャンバスを使用し、その描画情報を使用します。globalcompoperationは同じctxをブレンドします)。ctxオブジェクトごとにマウスイベント(ホバーとクリック)を作成したいので、ctxごとに異なるURLになります。

これが私のテストです:

ここでjQueryを実装する方法を知っておくと便利です。ありがとう。

0 投票する
2 に答える
338 参照

javascript - jCanvas での globalCompositeOperation

globalCompositeOperation (または「乗算」カラー操作を提供する他のプラグイン) をjCanvas jQuery プラグインに統合するにはどうすればよいですか?

0 投票する
1 に答える
1313 参照

html - 行でglobalCompositeOperationを使用しますか?

HTML5のcanvas要素を使用して時計を作成しようとしています。

私がやろうとしているのは、毎秒行を作成してから、前の行を消去することです。

を使用して別の線を描画して前の線を消去したいのですglobalCompositeOperation='xor';が、機能しません!

コードは次のとおりです。

そして、これが実際の例です:http: //jsfiddle.net/pyerT/1/ 誰かが答えを知っていますか?図形やテキストで正常に機能します。