이 기사에서는 구현 원칙, 구현 코드 및 캔버스가 참조를 위해 애니메이션을 지우는 구현 프로세스에서 발생하는 문제를 공유합니다. 특정 내용은 다음과 같습니다
원칙은 모바일 장치의 특정 이미지를 지우고 캔버스를 사용하여 구현하여 다른 이미지를 표시하는 것입니다.
사용자가 수동으로 지워지면 Touchmove, Touchend 및 기타 이벤트를 듣고 해당 좌표를 계산하고 캔버스의 CLEARERT 또는 RECT를 사용하여 아크 또는 라인을 그려서이를 달성해야합니다. 그러나 이로 인해 Androd 전화가 지연됩니다.
캔버스에는 Global CompositeOperation 속성이 있습니다. 이 속성의 기본값은 소스 오버입니다. 즉, 기존 픽셀을 그리면 겹쳐집니다. 그러나 대상이있는 또 다른 속성이 있습니다. 즉, 소스 이미지 외부에 대상 이미지를 표시 할 때, 즉 기존 픽셀을 기반으로 그리는 경우, 그리기 영역의 기존 픽셀은 투명하게 설정됩니다. 이 속성을 사용하면 클립과 같은 일련의 함수를 사용할 필요가 없음을 의미합니다. 두꺼운 선이나 호를 사용할 수 있습니다. 이렇게하면 드로잉 환경 API에 대한 통화가 줄어들고 성능을 향상 시키며 안드로이드에서 실행됩니다.
다음은 내 지우기 코드 입니다.
requestAnimationFrame = Window.RequestAnimationFrame || Window.MozRequestAnimationFrame || Window.WebKitRequestanimationFrame || window.msrequestanimationFrame; cancelAnimationFrame = Window.CancelAnimationFrame || wind canvascleanerbox.clientWidth * 2; canvascleaner.height = canvascleanerbox.clientHeight * 2; canvascleaner.style.width = canvascleanerbox.clientWidth + 'px'; canvascleaner.style.height = canvascleanerbox. = 'https://gw.alicdn.com/tps/TB1XbyCKVXXXXXEXpXXXXXXXXX-1080-1920.jpg';imgCleaner.onload = ()=> { let width = parseInt(canvasCleaner.style.width); w = canvascleaner.width*(imgcleaner.height/imgcleaner.width); ctxcleaner.DrawImage (imgcleaner, 0, 0, canvascleaner.width, w); ctxcleaner.linecap = 'round'; // linecap 속성은 라인 끝에서 라인 캡의 스타일을 설정하거나 반환합니다. ctxcleaner.linejoin = '라운드'; ctxcleaner.linewidth = 100; // 현재 줄의 너비를 설정하거나 반환하거나 반환하십시오. ctx.beginpath (); ctx.arc (x1, y1, a, 0, 2 * math.pi); ctx.fill (); // fill () 메소드는 현재 이미지 (경로)를 채 웁니다. 기본 색상은 검은 색입니다. ctx.restore ();};/* d 영역 지점의 좌표를 지우려면, 직접 지우는 데 필요한 모양을 시뮬레이션하여 얻은 데이터는 다음과 비슷합니다. d2 = [let d2 = [ [1,190], [30,180], [60,170], [90,168], [120,167], [150,165], [180,164], [210,163], [240,160], [270,159], [300,154], [330,153], [360,152] [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,178], [160,176], [200,174], [240,172];*/let draw = (d, ctx) => {if (idx> = d.length) {cancelAnimationFrame (ts); } else {drawline (d [idx] [0], d [idx] [1], ctx); idx ++; requestAnimationFrame (() => {Draw (d, ctx);}); }}페이지에 지우기 애니메이션을 직접 표시하고 사용자가 직접 닦을 필요가 없으므로 지우기 영역의 좌표는 직접 계산됩니다. 그런 다음 requestAnimationFrame을 사용하여 애니메이션을 구현하십시오. SetInterval을 사용하기 시작했습니다. SetInterval은 항상 나중에 엉망이된다는 것을 알았으므로 SetInterval을 사용하지 않는 것이 좋습니다.
이 효과를 달성하는 과정에서 캔버스를 사용하여 페이지에서 뽑기를 할 때 이미지가 매우 흐릿 해졌다는 것을 알았습니다.
브라우저의 Window 변수에 DevicePixelratio 속성이 있기 때문에 브라우저가 여러 (보통 2) 픽셀 포인트를 사용하여 픽셀을 렌더링하는 것으로 판단 합니다. 즉, devicepixelratio의 값이 2라고 가정하면, 크기가 100*100 픽셀의 크기의 그림은 그림에서 2 픽셀의 너비로 렌더링됩니다. 따라서 그림은 실제로 망막 화면에서 200*200 픽셀을 차지하며, 이미지는 두 번 확대되는 이미지와 동일하므로 그림이 흐려집니다.
이런 식으로 캔버스에 대한 문제는 쉽게 해결 될 것입니다. 우리는 캔버스를 이미지로 취급 할 수 있습니다. 브라우저가 캔버스를 렌더링하면 2 픽셀의 너비를 사용하여 캔버스를 렌더링하므로 대부분의 망막 장치에서 그려진 이미지 또는 텍스트가 흐려집니다.
마찬가지로 캔버스 컨텍스트에는 WebKitbackingStorePixelratio 속성 (Safari 및 Chrome)도 있습니다. 이 속성의 값은 브라우저가 캔버스를 렌더링하기 전에 여러 픽셀을 사용하여 캔버스 정보를 저장한다고 결정합니다. iOS6에 따른 사파리의 값은 2입니다. 따라서 100*100 이미지가 사파리에서 그려지면 이미지가 먼저 메모리에서 200*200 이미지를 생성 한 다음 브라우저가 렌더링하면 100x100 이미지로 렌더링되므로 메모리의 이미지와 정확히 동일한 200x200이되므로 IOS의 Safari에 문제가 없습니다. 그러나 Chrome 및 iOS7의 Safari에는 왜곡이 있습니다. 그 이유는 Chrome 및 iOS7에서 Safari의 WebKitbackingStorePixelratio 값이 모두 1이기 때문입니다.
해결책:
canvas.width = canvasbox.clientwidth * 2; canvas.height = canvasbox.clientheight * 2; canvas.style.width = canvas.clientwidth + 'px'; canvas.style.height = canvas.clientHeight * 'px'; W = canvas.width*(img.height/img.width); // console.log (w); ctx.DrawImage (img, 0, 0, canvas.width, w);
즉, 실제 크기의 두 배인 캔버스를 생성 한 다음 CSS 스타일을 사용하여 캔버스를 실제 크기로 제한 할 수 있습니다. 또는이 polyfill을 Github에서 사용하지만 시도해 보았지만 작동하지 않는 것 같습니다.
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.