Javascript Canvas Context Filter 적용 대상 : Blur

Question

JavaScript 필터를 자바 스크립트 캔버스의 이미지 데이터에 적용하는 데 관심이 있습니다. 이미 canvas context filter을 찾았습니다. 예를 들어, 흐림 효과가 있습니다.

코드가 아래에 짓 때문에 경우 작동하지 않지만

var canvas = document.getElementById('canvas'); 
 
var ctx = canvas.getContext('2d'); 
 

 
ctx.filter = 'blur(3px)'; 
 
ctx.font = '48px serif'; 
 
ctx.strokeText('Hello world', 50, 100);

<canvas id="canvas"></canvas>

다음 전체 화면이 흰색이 될 것입니다. 보조 노트로, 내가 지금 이것을 언급하지 마십시오, 비 크롬/FF 브라우저 내 응용 프로그램을 사용할 가지고 걱정하지 않는다 또한

var canvas = document.getElementById('canvas'); 
 
var ctx = canvas.getContext('2d'); 
 

 
ctx.filter = 'brightness(1000%)'; 
 
ctx.font = '48px serif'; 
 
ctx.strokeText('Hello world', 50, 100);

<canvas id="canvas"></canvas>

, 당신은 polyfill을위한 경우를 제외하고 그것.

Answer 1

내 질문에 대한 답을 발견 : 당신은 필터를 적용 자체에 캔버스를 그릴 수 있습니다.

var canvas1 = document.getElementById('canvas1'); 
 
var ctx1 = canvas1.getContext('2d'); 
 
var canvas2 = document.getElementById('canvas2'); 
 
var ctx2 = canvas2.getContext('2d'); 
 

 
ctx1.font = '48px serif'; 
 
ctx1.strokeStyle = 'red'; 
 
ctx1.strokeText('Hello world', 50, 50); 
 
ctx1.filter = 'brightness(0%)'; 
 

 
ctx2.font = '48px serif'; 
 
ctx2.strokeStyle = 'red'; 
 
ctx2.strokeText('Hello world', 50, 50); 
 
ctx2.filter = 'brightness(0%)'; 
 
ctx2.drawImage(canvas2, 0, 0);

Before<br /> 
 
<canvas id=1></canvas><br /> 
 
After<br /> 
 
<canvas id=2></canvas>

Answer 2

텍스트가 기본값으로 검은 색이므로 밝기 효과가 표시되지 않습니다.

밝기는 선택한 색상의 농도를 변경하여 검정색과 혼합합니다. 예를 들어, 빨강 색 텍스트 및 밝기 속성이 70 %이면 텍스트의 빨간색은 70 %이고 검정색은 30 %입니다.

그냥 strokeStyle에 색상을 추가 :

var canvas = document.getElementById('canvas'); 
 
var ctx = canvas.getContext('2d'); 
 

 
ctx.filter = 'brightness(70%)'; 
 
ctx.font = '48px serif'; 
 
ctx.strokeStyle = 'red'; 
 
ctx.strokeText('Hello world', 50, 100);

<canvas id="canvas"></canvas>