34 canvas阴影

最新推荐文章于 2024-04-11 22:55:02 发布

丨Anna丨

最新推荐文章于 2024-04-11 22:55:02 发布

阅读量747

点赞数

分类专栏： # canvas 前端重拾文章标签： canvas

本文链接：https://blog.csdn.net/u014331138/article/details/109361536

版权

前端重拾同时被 2 个专栏收录

42 篇文章 0 订阅

订阅专栏

canvas

14 篇文章 0 订阅

订阅专栏

34 canvas阴影

canvas阴影包括文本阴影和盒模型阴影

语法

shadowOffsetX = float
		shadowOffsetX 和 shadowOffsetY 用来设定阴影在 X 和 Y 轴的延伸距离，
		它们默认都为 0。
	shadowOffsetY = float
		shadowOffsetX 和 shadowOffsetY 用来设定阴影在 X 和 Y 轴的延伸距离，
		它们默认都为 0。
	shadowBlur = float
		shadowBlur 用于设定阴影的模糊程度，其数值并不跟像素数量挂钩，也不受变换矩阵的影响，默认为 0。
	shadowColor = color(必需项)
		shadowColor 是标准的 CSS 颜色值，用于设定阴影颜色效果，默认是全透明的黑色。

示例

	<head>
		<meta charset="UTF-8">
		<title>21_阴影</title>
		<style>
			#test{
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				margin: auto;
				background-color: #BBAAFF;
			}
		</style>
	</head>
	<body>
		<canvas id="test" width="300" height="300">您的浏览器不支持canvas，请升级</canvas>
		<script type="application/javascript">
			var canvas = document.querySelector("#test");
			if(canvas.getContext){
				var ctx = canvas.getContext("2d");
				ctx.fillStyle = "dodgerblue";
				// 设置阴影
				// X轴偏移量
				ctx.shadowOffsetX = 20;
				// Y轴偏移量
				ctx.shadowOffsetY = 10;
				// 阴影颜色
				ctx.shadowColor = "#000";
				// 阴影的模糊程度
				ctx.shadowBlur = 20;
				ctx.fillRect(20,100,200,100);
				
			}
		</script>

效果

丨Anna丨

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
34 canvas阴影

34 canvas阴影canvas阴影包括文本阴影和盒模型阴影语法shadowOffsetX = float shadowOffsetX 和 shadowOffsetY 用来设定阴影在 X 和 Y 轴的延伸距离，它们默认都为 0。 shadowOffsetY = float shadowOffsetX 和 shadowOffsetY 用来设定阴影在 X 和 Y 轴的延伸距离，它们默认都为 0。 shadowBlur = float shadowBlur 用于设定阴影
复制链接

扫一扫