美文网首页
canvas 绘制带四周阴影效果的圆角图片

canvas 绘制带四周阴影效果的圆角图片

作者: Vissioon | 来源:发表于2018-07-25 11:52 被阅读19次

绘制带四周阴影效果的圆角图片

  • 想要绘制圆角图片一可以先绘制出圆角矩形,然后对画布进行剪切clip,这样在剪切过的画布上绘制图片自然就表现为画布的形状。但是此时对图片绘制阴影是无效的,因为阴影必然在剪切的画布之外。

    image.png
  • 另一种办法是对图片创建模式createPattern,然后将模式填充到绘制好的圆角矩形区域。此时阴影有效,但是无法控制图片缩放。

    image.png
  • 我想到的解决办法是先用任意颜色填充圆角矩形绘制出阴影,然后再用第一种方法覆盖绘制,这样就得到了理想的效果

this.roundRect(ctx, PX, PY, PW, PH, PR) //绘制圆角矩形方法
ctx.setFillStyle('pink')
ctx.setShadow(0, 0, 4, 'rgba(0, 0, 0, 1)')
ctx.fill()
//覆盖绘制
ctx.save()
this.roundRect(ctx, PX, PY, PW, PH, PR)
ctx.clip()
ctx.drawImage(path, PX, PY, PW, PH);
ctx.restore()
image.png

相关文章

  • canvas 绘制带四周阴影效果的圆角图片

    绘制带四周阴影效果的圆角图片 想要绘制圆角图片一可以先绘制出圆角矩形,然后对画布进行剪切clip,这样在剪切过的画...

  • Image

    直接圆角图片 设置圆角图片度数 设置圆角图片带灰色圆角边框 设置圆角图片带灰色圆角边框带阴影

  • Masonry给ScrollView添加约束/UIImageVi

    ImageView四周加阴影效果 UIView局部角切圆角 属性字符串加点击事件 属性字符串拼接图片

  • 2018-08-02 Android中实现阴影和图片圆角效果

    Android中实现阴影和图片圆角效果 这里要讲的是两个github上两个开源的轮子 圆角效果的依赖 阴影效果的依...

  • 前端笔记6

    图片的修复 效果: 条件 属性 选择符 过渡动画 圆角、阴影、透明度 效果: 运动曲线 效果: 图片文字遮罩 效果...

  • iOS UI三板斧圆角加阴影

    想必在日常的开发中大家都能遇到UI各种圆角加阴影的设计添加圆角效果: 添加阴影效果: 需要圆角+阴影效果则不能满足...

  • Tailwind Image

    常用图片的效果依靠是圆角和阴影属性,可以产生很多不同的效果,比如圆形图片更多是用于社交人物头像展示。 类型描述圆角...

  • ios image圆角

    通过获取图片的上下文,绘制一个圆角矩形,然后,切割超出部分来获得圆角效果

  • HTML5 Canvas笔记——Canvas绘制矩形(外角矩形和

    Canvas绘制内角矩形 效果如图: Canvas绘制外角矩形 效果如图:

  • Adnroid 自定义View相关API和方法(未完)

    Canvas类相关API 1、绘制圆 drawCircle 2、绘制矩形 RectF,Rect 3、绘制圆角矩形 ...

网友评论

      本文标题:canvas 绘制带四周阴影效果的圆角图片

      本文链接:https://www.haomeiwen.com/subject/bllpmftx.html