美文网首页
canvas-阴影及透明度

canvas-阴影及透明度

作者: 我只会吃饭 | 来源:发表于2019-06-12 13:35 被阅读0次

一、 阴影

ctx.shadowColor = ‘color’; // 阴影颜色
ctx.shadowOffsetX = ''; // 阴影的偏移量
ctx.shadowOffsetY = ''; // 阴影的偏移量
ctx.shadowBlur = ''; //模糊度

// 提前保存一下当前状态
ctx.save();

// 设置阴影颜色
ctx.shadowColor = 'red';
// 偏移量X
ctx.shadowOffsetX = 0;
// 偏移量Y
ctx.shadowOffsetY = 0;
// 模糊度
ctx.shadowBlur = 100;
//
ctx.fillRect(150, 150, 100, 100);

// 返回上一次状态
ctx.restore()
image.png

二、全局的透明度

globalAlpha = 1 // 全局透明度

// 提前保存一下当前状态
ctx.save();

// 全局透明度
ctx.globalAlpha = .3;

ctx.beginPath();
ctx.font = '20px bold';
ctx.fillText('透明度: .3', 50, 40)
ctx.arc(100, 100, 30, 0, 2 * Math.PI);
ctx.fill();

ctx.fillRect(50, 200, 100, 100);

// 返回上一次状态
ctx.restore()

// 未设置透明
ctx.beginPath();
ctx.font = '20px bold';
ctx.fillText('透明度: 1', 250, 40)
ctx.arc(300, 100, 30, 0, 2 * Math.PI);
ctx.fill();

ctx.fillRect(250, 200, 100, 100);

image.png

相关文章

  • canvas-阴影及透明度

    一、 阴影 ctx.shadowColor = ‘color’; // 阴影颜色ctx.shadowOffsetX...

  • canvas基础知识总结

    一、Canvas-绘制文字 1、属性 二、canvas-设置阴影 三、canvas-创建路径-绘制矩形和圆形 1、...

  • iOS如何在storyboard和xib中设置UIView的图层

    UIView图层常用属性: 边角半径 阴影色及偏移 阴影透明度 边框粗细和颜色 扩展UIView

  • CSS深度操作(3)

    一、IE的兼容 二、过度动画 在transition中写入多个 三、圆角and阴影and透明度 圆角 阴影 透明度...

  • CALayer

    主要属性 1.设置阴影 shadowColor 阴影颜色 shadowOpacity 阴影的不透明度 shadow...

  • iOS阴影设置详解

    UIView的阴影设置主要通过UIView的layer的相关属性来设置 阴影的颜色 阴影的透明度 阴影的圆角 阴影...

  • UIView加阴影

    UIView的阴影设置主要通过UIView的layer的相关属性来设置 阴影的颜色 阴影的透明度 阴影的圆角 阴影...

  • 阴影_透明度物体阴影

  • Swift-圆角与阴影

    iOS中圆角实现非常容易,对比而言,设置阴影则需要设置颜色,偏移位置,阴影透明度,阴影半径: ` /* T...

  • Tailwind Effects

    Tailwind特效 阴影shadow 不透明度opacity 阴影shadow 这里的阴影特指CSS3中新增的b...

网友评论

      本文标题:canvas-阴影及透明度

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