Canvas 给图形绘制阴影

/**
 * 图形绘制阴影
 */
function initDemo6() {
    var canvas = document.getElementById("demo6");
    if (!canvas) return;
    var context = canvas.getContext("2d");
    context.fillStyle = "#02c9e5";
    context.shadowOffsetX = 10; // 阴影横向位移
    context.shadowOffsetY = 10; // 阴影纵向位移
    context.shadowColor = 'rgba(100, 100, 100, 0.5)'; // 阴影颜色
    context.shadowBlur = 7.5; // 阴影模糊范围
    context.fillRect(25, 25, 300, 300);
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Canvas 图片绕边旋转的小动画

    /** * 图片绕边旋转的小动画 */ function initDemo10() { var canvas = document.getEleme...

    就只是小茗
  • Canvas 图形组合方式

    /** * 图形组合 */ function initDemo5() { var canvas = document.getElementById(...

    就只是小茗
  • CSS深入理解学习笔记之relative

    1、relative和absolute的相煎关系   限制作用:①限制left/top/right/bottom定位;②限制z-index层级;③限制在over...

    就只是小茗
  • wx-caman——基于 CamanJS 的微信小程序 Canvas 像素级滤镜处理库

    做这个项目的初衷是希望能够开发一款不依赖服务端而纯通过客户端渲染为图片添加滤镜的小程序。但是由于微信小程序中的 canvas 组件与 DOM Canvas 元素...

    逆葵
  • Canvas基础积累

    这代码显示的结果,其实不是我们想的那样,其实还是存在一些问题,因fill()上方的路径状态还是存在有效的,所以为了解决这个问题,引入了beginPath()和c...

    迹_Jason
  • 06. Web大前端时代之:HTML5+CSS3入门系列~HTML5 画布(上)

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 点击原文,查看笔...

    逸鹏
  • ASP.NET Core 2.1 : 十五.图解路由(2.1 or earler)

    本文通过一张图来看一下路由的配置以及请求处理的机制。(ASP.NET Core 系列目录)

    FlyLolo
  • canvas星空的2d绘制示例

    一切尽在注释里: <!DOCTYPE html> <html> <head>     <meta charset="utf-8"></meta>     <t...

    lonelydawn
  • 聊聊maxwell的Recovery

    maxwell-1.25.1/src/main/java/com/zendesk/maxwell/recovery/Recovery.java

    codecraft
  • 聊聊maxwell的Recovery

    maxwell-1.25.1/src/main/java/com/zendesk/maxwell/recovery/Recovery.java

    codecraft

扫码关注云+社区

领取腾讯云代金券