Question

我创建了svg，我想将svg转换为canvas。我做了以下事情：

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var p = new Path2D("M10 10 h 80 v 80 h -80 Z");
ctx.fillStyle = '#cb1a2f';
ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
ctx.shadowBlur = 24;
ctx.fill(p);

但我想在广场内制作阴影。我有一个完全不同的数字SVG。这个SVG纯粹是一个例子。

Answer 1

阴影在画布API的形状内外都是：

＆＃13;

Option

＆＃13;

var canvas = document.querySelector("canvas");
var ctx = canvas.getContext("2d");
ctx.strokeStyle = 'white';
ctx.shadowColor = "black";
ctx.shadowBlur = 10;
ctx.strokeRect(20,20,50,50);

＆＃13;

但是填充和描边会在这个阴影上呈现。

所以你可以做的是首先填充你的形状，然后将上下文的globalCompositeOperation属性设置为<canvas></canvas>，这样新的图纸只保留在我们已经画出的东西的地方，最后称之为你的道路。

＆＃13;

source-atop

＆＃13;

var canvas = document.querySelector("canvas");
var ctx = canvas.getContext("2d");
var p = new Path2D("M10 10 h 80 v 80 h -80 Z");
ctx.fillStyle = ctx.strokeStyle = 'red';
// fill a first time
ctx.fill(p);
// change the gCO
ctx.globalCompositeOperation = "source-atop";
ctx.shadowColor = "green";
ctx.shadowBlur = 14;
// now stroke to get the inner shadow
ctx.stroke(p);

// reset the gCO to its default
ctx.globalCompositeOperation = "source-over";

＆＃13;

Canvas Path2d内部阴影

1 个答案: