この記事は、キャンバス描画、グラフィックス、およびフロントエンドの視覚化に興味がある読者に適しています。
くさびすべてには原因があります。
最近ではグラフィックを染色するといった機能も製品に求められています。考えてみれば、これは簡単にできることではありません。私はすでにグラフィック染色の技術を勉強しました。そこで、以前に作成した 2 つのアルゴリズムを友人に送り、リファレンスとして実装するよう依頼しました。1 つ目のアルゴリズムはピクセルを操作するもので、2 つ目のアルゴリズムは画像合成を使用します。
特にプログラムを作成する場合、何事にも驚きがつきものです。
それから間もなく、私の友人は、2 番目のアルゴリズムは Firefox では動作しないと言いました。
その理由を探ってくださいバグがあると聞いてびっくりしました。私はそれをテストし、FireFox でもテストしました。そこで Firefox を開いてサンプルを開始してみたところ、問題なく動作していることがわかりました。
しかし、小規模パートナーを製品に統合するには問題があります。 違いは何ですか? 一緒に調査した結果、私のサンプル コードと製品のコードの違いの 1 つは、サンプル コードでは png 画像が使用されているのに対し、製品では svg 画像が使用されていることであることがわかりました。
svg 画像に問題があるのでしょうか? svg 画像を取得してサンプルコードに配置するのは確かに間違っています。結論はすでに明らかです。
FireFoxブラウザでは、Canvas下にSVG画像を描画する場合、globalCompositeOperationの設定が有効になりません。
以下はテスト用のコードです。 ctx.globalCompositeOperation = 'destination-out' は、ソース イメージの形状を使用して宛先イメージをくり抜くことを意味します。
他のブラウザでは、次のコードは有効ですが、空洞になっています。しかし、
FireFox では動作しません:
<html><head> <script> 関数 init() { var Canvas = document.getElementById('c'); var ctx = Canvas.getContext('2d'); var img = new Image(); function () { ctx.drawImage(img, 0, 0, img.width * 2, img.height * 2); ctx.globalCompositeOperation = 'diffuse.png'; } img.src = 'diffuse.png'; svg.src = 新しい画像; ctx.drawImage(svg) 、pointX - svg.width / 4、pointY - svg.height / 4、 svg.width / 2, svg.height / 2); } Canvas.addEventListener('click', function (e) {drawPoint(e.clientX, e.clientY); } </script></ head><body onload=init(); style=background: red> <div> <canvas id=c width=1000 height=1000></canvas> </div></body></html>解決方法問題の原因が判明し、解決策は実は簡単です。
このようなことはよくありますが、多くの場合、問題を解決するよりも問題を見つける方が困難です。
解決策は実際には非常に簡単です
ブラウザが FireFox かどうかを判断する判定をコードに追加します。
その場合は、まず svg イメージを一時キャンバスに描画します。
後続の描画では、一時キャンバスを使用して SVG イメージを置き換えます。
たとえば、上記のコードは次のように改善できます。
関数 init() { var Canvas = document.getElementById('c'); var ctx = Canvas.getContext('2d'); var img = new Image() { ctx.drawImage(img); 、0、0、img.width * 2、img.height * 2); '宛先出力'; } img.src = 'diffuse.png'; var svg = ./d.svg; var tempCanvas = svg; { tempCanvas = document.createElement('canvas'); svg.width; tempCanvas.height = svg.height; var tempCtx = tempCanvas.getContext('2d'); } } 関数drawPoint(pointX, pointY) { ctx.drawImage(tempCanvas, pointX - svg.width / 4, pointY - svg.height / 4, svg.width / 2, svg.height / 2); } Canvas.addEventListener('click', function (e) {drawPoint(e.clientX, e.clientY) ）; }、 間違い）; }以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。