この記事では、リファレンスのためにアニメーションを消去するキャンバスの実装プロセスで遭遇する実装原則、実装コード、および問題を共有しています。特定のコンテンツは次のとおりです
原則は、モバイルデバイス上の特定の画像を消去し、キャンバスを使用して実装する別の画像を表示することです。
ユーザーが手動で消去する場合は、TouchMove、TouchEnd、その他のイベントを聞き、対応する座標を計算し、CanvasのclearRectまたはrectを使用してアークまたはラインを描画してこれを達成する必要があります。ただし、これによりアンドロッド携帯電話に遅れがあります。
Canvasには、Global CompositeOperationプロパティがあります。このプロパティのデフォルト値はソースオーバーです。つまり、既存のピクセルを描くと重ねられます。ただし、宛先の別の属性があります。つまり、ソース画像の外側にターゲット画像を表示するとき、つまり、既存のピクセルに基づいて描画するときに、描画した領域の既存のピクセルが透明に設定されます。この属性を使用すると、クリップなどの一連の関数を使用する必要がないことを意味します。厚い線やアークを使用することができます。これにより、描画環境APIへの通話が削減され、パフォーマンスが向上し、Androidでよりスムーズに実行されます。
これが私の消去コードです：
requestanimationframe = window.requestanimationframe ||としますwindow.mozrequestanimationframe || window.webkitrequestanimationframe || window.msrequestanimationframe; let cancelanimationframe = window.cancelanimationframe || window.mozcancelanimationframe; let a = 60; let canvascleaner = document.getElementbyId（ 'cas-1'）; canvascleanerbox.clientwidth * 2; canvascleaner.height = canvascleanerbox.clientheight * 2; canvascleaner.style.width = canvascleanerbox.clientwidth + 'px'; canvascleaner.style.heigh 'px'; imgcleaner.src = 'https://gw.alicdn.com/tps/tb1xbyckkvxxxxxxpxxxxxxxxxxxx-x-1080-1920.jpg';imgcleaner.onload =（）= = {let width = parseint（canvascleaner.style.style.style.style.style.style.style.style.style.style.style.style.style.style.style. w = canvascleaner.width*（imgcleaner.height/imgcleaner.width）; ctxcleaner.drawimage（imgcleaner、0、0、canvascleaner.width、w）; ctxcleaner.linecap = 'round'; // linecapプロパティは、行の最後にラインキャップのスタイルを設定または返します。 ctxcleaner.linejoin = 'round'; ctxCleaner.LineWidth = 100; //現在の行の幅を設定または返しますctxCleaner.globalCompositeOperation = 'destination-out';} let drawline =（x1、y1、ctx）=> {ctx.save（）; ctx.beginpath（）; ctx.arc（x1、y1、a、0、2 * math.pi）; ctx.fill（）; // fill（）メソッドは現在の画像（パス）を入力します。デフォルトの色は黒です。 ctx.restore（）;};/* d領域ポイントの座標を消去するために、自分で消去する必要がある形状をシミュレートすることによって得られたデータは、次のように類似しています。 [1,190]、[30,180]、[60,170]、[90,168]、[120,167]、[150,164]、[180,164]、[210,163]、[240,160]、[270,159]、[330,153]、[330,153]、[330,153]、[270,159]、[270,159]、 [390,150]、[420,140]、[450,130]、[480,120]、[510,120]、[540,120]、[570,120]、[600,120]、[630,120]、[660,120]、 [690,120]、[720,120]、[1,190]、[20,189]、[28,186]、[45,185]、[50,185]、[62,184]、[64,182]、[90,180]、[120,180]、 [160,176]、[200,174]、[240,172]; } else {drawline（d [idx] [0]、d [idx] [1]、ctx）; idx ++; RequestAnimationFrame（（）=> {draw（d、ctx）;}）; }}ページに消去アニメーションを直接表示し、ユーザーが自分でそれをワイプする必要がないため、消去領域の座標は自分で計算されます。次に、 RequestAnimationFrameを使用してアニメーションを実装します。 SetIntervalの使用を開始しました。 Setintervalは常にその後めちゃくちゃになることがわかったので、SetIntervalを使用しないことをお勧めします。
この効果を達成する過程で、ページに描画するためにキャンバスを使用すると、画像が非常にぼやけていることがわかりましたか？
ブラウザのウィンドウ変数にDevicePixelRatioプロパティがあるためであり、ブラウザが複数の（通常2）ピクセルポイントを使用してピクセルをレンダリングすることを決定します。つまり、DevicePixelratioの値が2であると仮定すると、100*100ピクセルのサイズの画像が、写真の2ピクセルの幅でレンダリングされます。したがって、画像は実際に網膜画面で200*200ピクセルを占有します。これは、画像が2回拡大されるのと同等であるため、画像はぼやけます。
このようにして、キャンバスに関する問題は簡単に解決されます。キャンバスを画像として扱うことができます。ブラウザがキャンバスをレンダリングすると、2ピクセルの幅を使用してキャンバスをレンダリングするため、ほとんどの網膜デバイスで描画された画像またはテキストがぼやけます。
同様に、CanvasコンテキストにはWebKitbackingStorePixelRatioプロパティ（SafariとChromeのみ）もあります。このプロパティの値は、ブラウザがキャンバスをレンダリングする前にキャンバス情報を保存するために複数のピクセルを使用することを決定します。 iOS6に基づくSafariの値は2です。したがって、100*100の画像がSafariで描画される場合、画像は最初に200*200の画像をメモリに生成し、次にブラウザが100x100の画像としてレンダリングすると、200x200になります。ただし、ChromeおよびiOS7のSafariには歪みがあります。その理由は、ChromeとiOS7のSafariのWebKitbackingStorePixelRatio値が両方であるためです。
解決：
canvas.width = canvasbox.clientwidth * 2; canvas.height = canvasbox.clientheight * 2; canvas.style.width = canvas.clientwidth + 'px'; canvas.style.height = canvas.client * 'px'; w = w = canvas.width*（img.height/img.width）; // console.log（w）; ctx.drawimage（img、0、0、canvas.width、w）;
つまり、実際のサイズの2倍のキャンバスを作成し、CSSスタイルを使用してキャンバスを実際のサイズに制限できます。または、Githubでこのポリフィルを使用しますが、試してみましたが、うまくいかないようです。
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。