Как создать эффект блюра на Canvas?
Как создать эффект блюра на Canvas?
1 ответ
@meda.dach
Для создания эффекта блюра на Canvas можно использовать фильтры CSS3 blur(). Например, можно сделать блюр на всем холсте, используя следующий код:
1 2 3 4 5 6 |
var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); ctx.filter = 'blur(10px)'; ctx.drawImage(image, 0, 0, canvas.width, canvas.height); // отрисовываем нужный объект ctx.filter = 'none'; // отключаем фильтр |
В этом коде ctx.filter = 'blur(10px)' устанавливает фильтр блюра на контекст канваса, а затем мы используем функцию drawImage() для отрисовки нужного объекта, который получит эффект блюра. После этого необходимо отключить фильтр, чтобы он не влиял на последующие отрисовки.
Также можно использовать фильтр только на определенной части холста, например, на одном объекте. В этом случае нужно использовать отдельный канвас для объекта и наложить его на главный канвас. Код может выглядеть так:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); var tempCanvas = document.createElement('canvas'); var tempCtx = tempCanvas.getContext('2d'); tempCanvas.width = canvas.width; tempCanvas.height = canvas.height; // отрисовать объект на временном канвасе tempCtx.drawImage(image, 0, 0, canvas.width, canvas.height); // применить фильтр к временному канвасу tempCtx.filter = 'blur(10px)'; tempCtx.drawImage(tempCanvas, 0, 0, canvas.width, canvas.height); // наложить временный канвас на главный канвас с прозрачностью ctx.globalAlpha = 0.5; ctx.drawImage(tempCanvas, 0, 0, canvas.width, canvas.height); ctx.globalAlpha = 1; // сбросить прозрачность |
Здесь мы создаем временный канвас, на котором отрисовываем нужный объект, затем применяем к нему фильтр блюра, используя tempCtx.filter = 'blur(10px)'. Далее мы наложим временный канвас на главный канвас с помощью ctx.drawImage(), используя прозрачность для получения эффекта блюра только на нужном объекте, а не на всем холсте.