HTML 캔버스에 글로우 효과 효과적으로 Convolute 커널/매트릭스 사용

Question

나는 HTML 캔버스에 PNG 이미지를 그리는 중이고 캔버스에 blitted되기 전에 이미지 데이터에 대해 convolute 필터가 실행되도록 필터 시스템을 구현했습니다 .

누구나 convolute 커널/행렬을 사용하여 광선 효과를 만드는 방법을 알고 있습니까? (용어가 무엇인지는 모르겠지만 이것들에 대해 이야기하고 있습니다 : http://www.html5rocks.com/en/tutorials/canvas/imagefilters/) 또는 globalCompositeOperation (https://developer.mozilla.org/samples/canvas-tutorial/6_1_canvas_composite.html)?

낮은 불투명도와 크기 조정 된 이미지로 시작한 다음 불투명도를 높이면서 이미지를 약간 축소 할 수 있다는 것을 알고 있습니다. 이것은 일종의 글로우 효과를 생성하지만 이미지의 가장자리 주위에서만 가능합니다.

이상적인 세계에서는 보조 글로우 텍스처를 사용하여 광선이있는 이미지 영역을 지정할 수 있다는 것이 이상적입니다. 두 시나리오 중 어떤 아이디어? :)

Answer 1

다음 내용은 당신이 찾고있는 라인을 따라 가고 싶습니다. 꽤 잘 나온 것 같아요. 그래서 나는 the article의 필터 라이브러리 코드를 사용했고, 라이브러리를위한 새로운 광선 필터를 만들었습니다. 왜냐하면 그의 코드는 꽤 잘 시작 되었기 때문입니다. 글로우 효과가 나타나는 Live Demo입니다.

이

은 라이브러리

Filters.glow = function(pixels, passes, image, glowPasses){ 
     for(var i=0; i < passes; i++){ 
      pixels = Filters.convolute(pixels, 
       [1/9, 1/9, 1/9, 
       1/9, 1/9, 1/9, 
       1/9, 1/9, 1/9 ]); 
     } 

     var tempCanvas = document.createElement("canvas"), 
      glowCanvas = document.createElement("canvas"), 
      tCtx = tempCanvas.getContext("2d"), 
      gCtx = glowCanvas.getContext("2d"); 

     tempCanvas.width = glowCanvas.width = pixels.width; 
     tempCanvas.height = tempCanvas.height = pixels.height; 

     tCtx.putImageData(pixels, 0, 0); 
     gCtx.drawImage(image, 0, 0); 

     gCtx.globalCompositeOperation = "lighter"; 

     for(i = 0; i < glowPasses; i++){ 
      gCtx.drawImage(tempCanvas,0,0); 
     } 

     return Filters.getPixels(glowCanvas); 
    } 

에 추가 할 필요가 필터 코드 그리고 이것은 위의 필터를 사용하는 것이 방법이다.

var glowImage = document.images[1], 
    glowMask = document.images[0], 
    c = document.getElementById("canvas"), 
    ctx = c.getContext("2d"); 

window.onload = function() { 
    var pData = Filters.filterImage(Filters.glow, glowImage, 5, glowMask, 2); 
    c.width = pData.width; 
    c.height = pData.height; 
    ctx.putImageData(pData, 0, 0); 
} 

이미지를 2 개 제공해야합니다. 첫 번째 이미지는 광선을 나타낼 이미지이고 두 번째 이미지는 이미지에 적용되는 실제 광선 마스크입니다. 그런 다음 수행 할 흐림 패스 수를 지정하여 광선을 더 두드러지게 보이게하고 수행 할 광선 횟수를 지정하여 이미지에 광선을 추가 할 수 있습니다. 저는 알파 블렌드 한 캔버스에 대해 글로벌 구성 인 lighter을 사용합니다.

This article은 글로우 효과를 만드는 데 매우 훌륭한 리소스이며, 그래픽 효과가있는 곳에서도 내 결과를 테스트 할 수 있습니다.