【canvas】canvas基础使用(六):图形阴影

简言

学习使用canvas的阴影属性。

阴影

shadowBlur 阴影模糊

CanvasRenderingContext2D.shadowBlur 是 Canvas 2D API 描述模糊效果程度的属性;它既不对应像素值也不受当前转换矩阵的影响。默认值是 0。
语法:
ctx.shadowBlur = level;
选项值:

  • level
    描述模糊效果程度的,float 类型的值。默认值是 0。负数、 Infinity 或者 NaN 都会被忽略。

使用 shadowblur 属性设置模糊阴影。注意:只有设置 shadowColor 属性值为不透明,阴影才会被绘制。

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");// Shadow
ctx.shadowColor = "red";
ctx.shadowBlur = 15;// Rectangle
ctx.fillStyle = "blue";
ctx.fillRect(20, 20, 150, 100);

在这里插入图片描述

shadowColor 阴影颜色

CanvasRenderingContext2D.shadowColor 是 Canvas 2D API 描述阴影颜色的属性。
语法:
ctx.shadowColor = color;
选项值

  • color
    可以转换成 CSS <color> 值的DOMString 字符串。默认值是 fully-transparent black.

注意:shadowColor 属性设置成不透明的,并且 shadowBlur、 shadowOffsetX 或者 shadowOffsetY 属性不为 0,阴影才会被绘制。

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");// Shadow
ctx.shadowColor = "red";
ctx.shadowOffsetX = 10;
ctx.shadowOffsetY = 10;// Filled rectangle
ctx.fillRect(20, 20, 100, 100);// Stroked rectangle
ctx.lineWidth = 6;
ctx.strokeRect(170, 20, 100, 100);

在这里插入图片描述

shadowOffsetX 阴影水平偏移距离

CanvasRenderingContext2D.shadowOffsetX 是 Canvas 2D API 描述阴影水平偏移距离的属性。
语法:
ctx.shadowOffsetX = offset;
选项值:

  • offset
    阴影水平偏移距离的 float 类型的值。默认值是 0。 Infinity 或者NaN都会被忽略。
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");// Shadow
ctx.shadowColor = "red";
ctx.shadowOffsetX = 25;
ctx.shadowBlur = 10;// Rectangle
ctx.fillStyle = "blue";
ctx.fillRect(20, 20, 150, 100);

在这里插入图片描述

shadowOffsetY

CanvasRenderingContext2D.shadowOffsetY 是 Canvas 2D API 描述阴影垂直偏移距离的属性。
语法:
ctx.shadowOffsetY = offset;
选项值:

  • offset
    阴影垂直偏移距离的 float 类型的值。默认值是 0。 Infinity 或者NaN 都会被忽略。
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");// Shadow
ctx.shadowColor = "red";
ctx.shadowOffsetY = 25;
ctx.shadowBlur = 10;// Rectangle
ctx.fillStyle = "blue";
ctx.fillRect(20, 20, 150, 80);

在这里插入图片描述

结语

阴影一般不使用。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/808758.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Python中的错误处理 - 使用try、except、else和finally进行解释,并附带代码示例

最近&#xff0c;我的经理委派我创建一个自动报告。我设计的报告非常简单。它包括一些来自数据库的数字和一些基本的数学运算。我很兴奋最终可以向公司展示我的惊人的Python技能。 我完成并交付了产品。一切都很顺利。至少&#xff0c;直到大约两周后。我的报告由于除以零错误…

Linux使用C语言实现Socket编程

Socket编程 这一个课程的笔记 相关文章 协议 Socket编程 高并发服务器实现 线程池 网络套接字 socket: &#xff08;电源&#xff09;插座&#xff08;电器上的&#xff09;插口&#xff0c;插孔&#xff0c;管座 在通信过程中, 套接字是成对存在的, 一个客户端的套接字, 一个…

深入探索DBServer:构建高效、可扩展的数据库服务

引言 在当今的数字时代&#xff0c;数据是一切业务和技术解决方案的核心。随着数据量的日益增长&#xff0c;企业和开发者不断寻求高效、可扩展、同时又能保证数据安全性和完整性的数据库管理解决方案。这正是DBServer发挥作用的领域。本文将深入探讨DBServer的概念、特点、如…

重载运算与类型转换

基本概念&#xff1a; 运算符的重载是具有特殊名字的函数&#xff1b;他们的名字由关键字operator和其后要定义的运算符号共同组成。和其他函数一样&#xff0c;重载的匀速阿福也含有返回类型、参数列表以及函数体。重载运算符函数的参数数量和该运算符作用的运算对象数量一样…

PUBG绝地求生更新后无法启动/更新后卡顿?3个解决方法分享

在绝地求生中&#xff0c;团队协作也是非常重要的一点。咱们可以运用strong标签来着重“团队协作”。与队友紧密配合、彼此援助&#xff0c;一起拟定战术和战略&#xff0c;将会大大提高在游戏中获得成功的几率。在绝地求生中获得成功并不简单&#xff0c;但只需咱们把握了一些…

linux的io的知识大全

C语言的io操作 写文件 #include<stdio.h> #include<string.h>#define FILE_NAME "log.txt" int main() {FILE * fp fopen(FILE_NAME, "w");if(fpNULL){printf("fopen error!\n");}const char* msg "hello zk\n";int c…

JS rgb,hex颜色值转换

颜色值转化 rgb颜色值转换为hex颜色值&#xff08;rgb>hex&#xff09; hex颜色值转换为rgb颜色值&#xff08;hex>rgb&#xff09; 代码&#xff1a; const hex2Rgb (hex) > {return rgb(${parseInt(hex.slice(1, 3), 16)},${parseInt(hex.slice(3, 5), 16)},${p…

北邮通报学生联名举报导师事件,导师PUA学生,学生只有压榨它

诸葛亮为激司马懿出战&#xff0c;派使者送给他女人的衣服&#xff0c;司马懿欣然接受后问使者&#xff1a;“你们家丞相都管些什么呀&#xff1f;” 使者回答道&#xff1a;“我们丞相从行军布阵到饮食起居&#xff0c;无一不亲自过问。” 司马懿听到心中大喜&#xff0c;心想…

【ARM Coresight SOC-600 -- ETF Flushin无法接收到 CTI 发出 triggerout 信号问题分析】

请阅读【嵌入式开发必备专栏 】 文章目录 问题背景波形分析问题背景 在做验证的时候,准备通过 CTI2 给 SOC 上的 ETF 触发一个 flushin 动作,然后stop住 formatter,结果一致发现没有成功,接下来就是分析的过程了。 首先检查了代码,没有发现代码有什么问题(一般自己写的代…

学习大数据,所需要的java(Maven)基础(1)

文章目录 使用Maven的优势第三方jar包添加第三方jar包获取jar包之间的依赖关系jar包之间的冲突处理将项目拆分成多个工程模块 实现项目的分布式部署Maven是什么自动化构建工具构建的概念构建环节自动化构建 Maven如何使用安装Maven核心程序maven联网问题Maven中的settings配置在…

Linux下批量的批量操作

批量删除docker 镜像 docker images | grep ent-form-web |awk ‘{print $3}’ | xargs docker rmi docker images: 列出所有的docker 镜像 docker images | grep ent-form-web : 选取出结果带 ent-form-web的信息 docker images | grep ent-form-web |awk ‘{print $3}’ 选取…

为什么在学校很难真正学好嵌入式?

10几年前,我是读电气工程专业,学了很多东西,结构,电机、绘图,plc等等.. 其实,都没什么鸟用,出来还是像个废物。 后面我自学转了单片机开发,说句难听点,自己买个开发板都比在学校学得深。 可能是这个专业的问题,主攻不是嵌入式方向,老师用汇编点个流水灯,这门课就…

SpringBoot集成JWT

一、 背景 项目需要&#xff0c;自己编写登录和身份校验&#xff0c;于是采用了JWT的方式。 二、实现步骤 2.1 引入JWT组件 <dependency><groupId>io.jsonwebtoken</groupId><artifactId>jjwt</artifactId><version>0.9.1</version&…

CMake学习笔记(三)区分macro与function

目录 共同点--形式类似 macro的形式 function的形式 不同点 1 输入参数的替换阶段不同 macro function 2 输入参数作用域不同 macro function 共同点--形式类似 macro的形式 macro(宏名 输入参数名).... endmacro() function的形式 function(函数名 输入参数名).…

积分学<3>——定积分的详细定义与可积条件

索引 定积分的详细定义与可积条件Riemann可积定义3.1 Riemann和定义3.2 Riemann可积 定积分定义定义3.3 定积分 定积分定义的扩展定义3.4 Darboux上(下)和引理3.1引理3.2定理3.1 Darboux定理定理3.2 定积分的详细定义与可积条件 Riemann可积 定义3.1 Riemann和 若函数 f ( x…

20232831 2023-2024-2 《网络攻防实践》第5次作业

目录 20232831 2023-2024-2 《网络攻防实践》第5次作业1.实验内容&#xff08;1&#xff09;防火墙配置&#xff08;具体IP配置参考自己的IP设置&#xff09;&#xff08;2&#xff09;动手实践&#xff1a;Snort&#xff08;3&#xff09;分析配置规则 2.实验过程3.学习中遇到…

基于小程序实现的校园失物招领系统

作者主页&#xff1a;Java码库 主营内容&#xff1a;SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、安卓app等设计与开发。 收藏点赞不迷路 关注作者有好处 文末获取源码 技术选型 【后端】&#xff1a;Java 【框架】&#xff1a;spring…

渗透测试概述

渗透测试概述 渗透测试&#xff0c;又称入侵测试或黑盒测试&#xff0c;是一种通过模拟黑客攻击行为来评估计算机系统安全性的方法。其目的在于发现系统中的潜在漏洞&#xff0c;并评估这些漏洞可能带来的风险&#xff0c;从而为系统管理员和安全团队提供改进建议。渗透测试通…

第十二天--二维数组的彻底解刨--地址

1.二维数组我们用父子的地址来称呼二维数组的地址 比如arr[3][4] 这里的arr是二维数组的首地址&#xff0c;也是父数组的首地址&#xff0c;也是子数组的首地址 arr1父数组的地址偏移1&#xff0c;实际上是偏移了4*416个字节 arr[0]是子数组的首地址&#xff0c;arr[0]1是子数…

langchain txt 文档加载,分割

stuff 策略 加载 arXiv 论文&#xff0c;让模型总结前 2000 字 这里采用的是 stuff 策略&#xff0c;也就是将一大段文本。按字数分割成 N 个文本块&#xff0c;又合并成一个大的文本块。 对超大规模不友好&#xff0c;没有区分文档重要性&#xff0c;适合文档量较少场景 i…