如何将 ColorMatrix 与 Canvas 上下文一起应用
How to apply ColorMatrix along with Canvas Context
我正在研究 canvas 并使用 EaselJS 库一起玩。
使用 EaselJS,我可以使用 Filters
应用 ColorMatrix
const myGraphics = new createjs.Shape();
myGraphics.graphics.bf(img, 'no-repeat')
.drawCircle(x, y, cursorSize);
const colorMatrix = [0.3, 0.3, 0.3, 0, 0, 0.3, 0.3, 0.3, 0, 0, 0.3, 0.3, 0.3, 0, 0, 0, 0, 0, 1, 0];
const blurFilter = new createjs.BlurFilter(5, 5, 1);
myGraphics.filters = [new createjs.ColorMatrixFilter(colorMatrix), blurFilter];
myGraphics.cache(0, 0, 500, 500);
不使用 EaselJS 也可以应用吗?
我有以下代码
const patt = ctx.createPattern(img, 'no-repeat');
ctx.filter = 'blur(5px)';
ctx.fillStyle = patt;
ctx.beginPath();
ctx.arc(x, y, r1, 0, Math.PI * 2);
ctx.fill();
如何将 colorMatrix 滤镜应用于上述 canvas 上下文?
提前致谢
您可以使用带有 css url(#filter_id)
表示法的 svg 滤镜表示 context.filter
属性,对于颜色矩阵,使用 <feColorMatrix>
svg 元素:
const canvas = document.getElementById( 'canvas' );
const ctx = canvas.getContext( '2d' );
const img = new Image();
img.onload = e => {
ctx.fillStyle = ctx.createPattern(img, 'repeat');
ctx.filter = 'url(#matrix)';
ctx.rect( 20, 20, 460, 460 );
ctx.scale( 0.15, 0.15 );
ctx.fill();
};
img.src = "https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png";
<svg width="0" height="0" style="position:absolute;z-index:-1">
<filter id="matrix">
<feColorMatrix type="matrix" values="0.3, 0.3, 0.3, 0, 0, 0.3, 0.3, 0.3, 0, 0, 0.3, 0.3, 0.3, 0, 0, 0, 0, 0, 1, 0"/>
</filter>
</svg>
<canvas id="canvas"> width="500" height="500"></canvas>
我正在研究 canvas 并使用 EaselJS 库一起玩。 使用 EaselJS,我可以使用 Filters
应用 ColorMatrix const myGraphics = new createjs.Shape();
myGraphics.graphics.bf(img, 'no-repeat')
.drawCircle(x, y, cursorSize);
const colorMatrix = [0.3, 0.3, 0.3, 0, 0, 0.3, 0.3, 0.3, 0, 0, 0.3, 0.3, 0.3, 0, 0, 0, 0, 0, 1, 0];
const blurFilter = new createjs.BlurFilter(5, 5, 1);
myGraphics.filters = [new createjs.ColorMatrixFilter(colorMatrix), blurFilter];
myGraphics.cache(0, 0, 500, 500);
不使用 EaselJS 也可以应用吗? 我有以下代码
const patt = ctx.createPattern(img, 'no-repeat');
ctx.filter = 'blur(5px)';
ctx.fillStyle = patt;
ctx.beginPath();
ctx.arc(x, y, r1, 0, Math.PI * 2);
ctx.fill();
如何将 colorMatrix 滤镜应用于上述 canvas 上下文?
提前致谢
您可以使用带有 css url(#filter_id)
表示法的 svg 滤镜表示 context.filter
属性,对于颜色矩阵,使用 <feColorMatrix>
svg 元素:
const canvas = document.getElementById( 'canvas' );
const ctx = canvas.getContext( '2d' );
const img = new Image();
img.onload = e => {
ctx.fillStyle = ctx.createPattern(img, 'repeat');
ctx.filter = 'url(#matrix)';
ctx.rect( 20, 20, 460, 460 );
ctx.scale( 0.15, 0.15 );
ctx.fill();
};
img.src = "https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png";
<svg width="0" height="0" style="position:absolute;z-index:-1">
<filter id="matrix">
<feColorMatrix type="matrix" values="0.3, 0.3, 0.3, 0, 0, 0.3, 0.3, 0.3, 0, 0, 0.3, 0.3, 0.3, 0, 0, 0, 0, 0, 1, 0"/>
</filter>
</svg>
<canvas id="canvas"> width="500" height="500"></canvas>