В этой статье используется принцип реализации, код реализации и проблемы, возникающие в процессе реализации анимации, стирающей холст для вашей ссылки. Конкретный контент заключается в следующем
Принцип состоит в том, чтобы стереть определенное изображение на мобильном устройстве и отобразить другое изображение, используя Canvas для его реализации.
Если пользователь стирает вручную, вам необходимо прослушать Touchmove, Touchend и другие события, вычислить соответствующие координаты и использовать Canvas 'ClearRect или Rect, чтобы нарисовать дуги или линии для достижения этого. Тем не менее, это вызовет отставание на телефонах Андрода.
Canvas имеет свойство GlobalCompositeOperation. Значение этого свойства по умолчанию является источником, то есть оно будет наложено при рисовании на существующие пиксели. Тем не менее, есть еще один атрибут, который является назначением, то есть при отображении вашего целевого изображения вне исходного изображения, то есть при рисовании на основе существующих пикселей существующие пиксели в области, которую вы рисуете, будут установлены прозрачными. С помощью этого атрибута это означает, что вам не нужно использовать серию функций, таких как CLIP. Вы можете просто использовать толстые линии или дуги. Это уменьшит призывы к API среды рисования, улучшит производительность и работает на Android намного более плавным.
Вот мой код стирания :
let requestAnimationFrame = window.requestanimationFrame || window.mozrequestanimationframe || window.webkitrequestanimationframe || window.msRequestAnimationFrame; let CancelAnimationFrame = window.cancelanimationFrame || window.mozcancelanimationframe; let a = 60; let canvascleaner = document.getElementById ('cas-1'); let ctxcleaner = canvascleaner.getContext ('2d'); let canvascleanerbox = document.queryselector ('. slide-4'); letmccleaner = new-image (); canvascleanerbox.clientwidth * 2; canvascleaner.height = canvascleanerbox.clientHeight * 2; canvascleaner.style.width = canvascleanerbox.clientWidth + 'px'; canvascleaner.style.Height = canvascleanerbox. 'px'; imgcleaner.src = 'https://gw.alicdn.com/tps/tb1xbyckvxxxxxpxxxxxxxxxxx-1080-1920.jpg'smgcleaner.onload = () => {Let Width = parseint (canvascleaner.Style.WidTy.wyle.WIDTHLE.WIDTY.WIDTY.WIDTY.WIDTY.WIDTHLE.WIDTY.WIDTY.WIDTY.WIDTY.WIDTYALE. 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 () Метод заполняет текущее изображение (PATH). Цвет по умолчанию черный. ctx.restore ();};/* d, чтобы стереть координаты точки области, данные, полученные, полученные путем моделирования форм, которые необходимо стерто мной, аналогичны следующему: пусть 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], [270,159], [300,154], [330,153], [270,159], [300,154], [330,153], [270,159], [300,154], [330,153], [270,159], [300,154], [240,160], [270,159], [300,154], [240,160], [270,159], [210,163] [390,150], [420,140], [450,130], [480,120], [510,120], [540,120], [570,120], [600,120], [630,120], [660,120], [600,120], [630,120], [660,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], [64,182], [90,180], [120,178], [64,182], [90,180], [120,178], [64,182], [90,180], [62,184], [64,182], [90,180], [62,184], [64,182] [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.
В процессе достижения этого эффекта я обнаружил, что при использовании холста для рисунков на странице изображение становится очень размытым?
Оказывается, что это связано с тем, что в окне браузера есть свойство DevicePixelRatio, которая определяет, что браузер будет использовать несколько (обычно 2) пиксельных точек для отображения пикселя. То есть, предполагая, что значение DevicePixelRatio составляет 2, изображение с размером 100*100 пикселей будет отображаться с шириной 2 пикселей на картинке. Таким образом, изображение на самом деле будет занимать 200*200 пикселей на экране сетчатки, что эквивалентно увеличению изображения, которое увеличивается, поэтому изображение становится размытым.
Таким образом, проблема о холсте будет легко решена. Мы можем рассматривать холст как образ. Когда браузер отображает холст, он будет использовать ширину 2 пикселей для отображения холста, поэтому нарисованное изображение или текст будут размыты в большинстве устройств сетчатки.
Точно так же в контексте Canvas также есть свойство WebkitbackingStorePixelRatio (только Safari и Chrome). Значение этого свойства определяет, что браузер будет использовать несколько пикселей для хранения информации о холсте перед рендерингом холста. Значение в Safari под iOS6 составляет 2. Следовательно, если изображение 100*100 нарисовано в Safari, изображение сначала генерирует изображение 200*200 в памяти, а затем, когда браузер отдаст его, оно сделает его как изображение 100x100, так что он станет 200x200, что точно так же, как изображение в памяти, поэтому в сафаре не появится проблемы на расторжение. Тем не менее, в Safari есть искажения в Chrome и IOS7. Причина в том, что webkitbackingstorepixelratio значений Safari в Chrome и iOS7 составляет 1.
Решение:
canvas.width = canvasbox.clientwidth * 2; canvas.height = canvasbox.clientheight * 2; canvas.style.width = canvas.clientWidth + 'px'; canvas.style.height = canvas.clientHeight * 'px'; canvas.width*(img.height/img.width); // console.log (w); ctx.drawimage (img, 0, 0, canvas.width, w);
То есть вы можете создать холст, который в два раза превышает фактический размер, а затем использовать стиль CSS, чтобы ограничить холст до фактического размера. Или используйте этот полифилл на GitHub, но я попробовал его, и, похоже, он не работает.
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.