HTML5画布图像上的插图阴影

pourmesomecode

我之前已经看过这个问题,但是给出的答案是针对通过路径绘制的画布图像,但是,我正在绘制图像。

是否可以创建一个inset-shadow

context.shadowOffsetX = 0;
context.shadowOffsetY = 0;
context.shadowBlur = 10;
context.shadowColor = 'rgba(30,30,30, 0.4)';

var imgOne = new Image();
imgOne.onload = function() {
    context.drawImage(imgOne, 0, 0);
};
imgOne.src = "./public/circle.png";

所以我画了圆圈图片。我现在在圆的外面有一个小阴影,我怎么能inset代替它offset呢?

品牌

画布会在图像从不透明变为透明的地方阴影,因此,正如K3N在他的正确答案中所示,您可以将图像内翻(不透明变成透明,反之亦然),以便将阴影绘制在圆圈内。

如果您知道圆的中心点和半径,则可以使用描边路径创建插入的圆阴影。这是一个例子:

var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

context.beginPath();
context.arc(cw/2,ch/2,75,0,Math.PI*2);
context.fillStyle='lightcyan';
context.fill();

context.globalCompositeOperation='source-atop';

context.shadowOffsetX = 500;
context.shadowOffsetY = 0;
context.shadowBlur = 15;
context.shadowColor = 'rgba(30,30,30,1)';

context.beginPath();
context.arc(cw/2-500,ch/2,75,0,Math.PI*2);
context.stroke();
context.stroke();
context.stroke();

context.globalCompositeOperation='source-over';
<canvas id="canvas" width=300 height=300></canvas>

如果您的路径不规则或很难用数学定义,则还可以使用边缘路径检测算法。一种常见的边缘路径算法是Marching SquaresStackoverflow的K3N已经编写了一个不错的Marching Squares算法

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何下载HTML5画布上的图像?

来自分类Dev

HTML5画布:在单个画布上的范围内旋转裁剪的图像

来自分类Dev

HTML5画布叠加图像

来自分类Dev

HTML5画布图像变色

来自分类Dev

HTML5画布-带边框的图像拼贴

来自分类Dev

缩放HTML5画布图像

来自分类Dev

html5画布绘制多个图像

来自分类Dev

HTML5画布-带边框的图像拼贴

来自分类Dev

HTML5画布图像变色

来自分类Dev

在HTML5画布上擦除图像的一部分?

来自分类Dev

在html5画布上拖动图像并调整其大小

来自分类Dev

在HTML5画布上绘制多个图像有时不起作用

来自分类Dev

如何在具有更好插值的html5画布上缩放图像?

来自分类Dev

如何获取在HTML5画布上绘制的图像的X / Y值?

来自分类Dev

无法在Phonegap中的HTML5画布上绘制图像

来自分类Dev

在HTML5画布上绘制图像

来自分类Dev

如何在HTML5画布上绘制背景图像

来自分类Dev

RXJS在HTML5画布上绘制线条

来自分类Dev

html5画布上的部分楔形

来自分类Dev

在HTML5画布上定位

来自分类Dev

无法在html5画布上绘制

来自分类Dev

HTML5画布上的drawImage的奇怪错误

来自分类Dev

捕捉HTML5画布上的点击

来自分类Dev

禁用html5画布

来自分类Dev

了解HTML5画布

来自分类Dev

禁用html5画布

来自分类Dev

HTML5画布脉动

来自分类Dev

HTML5画布脉动

来自分类Dev

需要帮助JS图像事件侦听器在html5画布上绘制多个图像