Html5学习---------canvas阴影效果的显示

最新推荐文章于 2022-11-23 13:48:38 发布
最新推荐文章于 2022-11-23 13:48:38 发布
阅读量3.3k 收藏
点赞数
分类专栏： HTML5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bzbb321/article/details/8130630
版权 
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript">
function drawShadow(e) {
	var shadowCanvasElt = document.getElementById("shadowCanvas");
	if (shadowCanvasElt && shadowCanvasElt.getContext) {
		var shadowCanvasCtx = shadowCanvasElt.getContext("2d");
		//基本阴影属性设定
		shadowCanvasCtx.shadowColor = "#000000";
		//在X轴上偏移10(右)
		shadowCanvasCtx.shadowOffsetX = 10;
		//在Y轴上偏移10(右)
		shadowCanvasCtx.shadowOffsetY = 10;
		//高斯模糊
		shadowCanvasCtx.shadowBlur = 10;
		//画一个简单的矩形
		shadowCanvasCtx.fillStyle = "red";
		shadowCanvasCtx.fillRect(75, 20, 200, 100);
		//文字渲染
		var theString = "在canvas上绘制文字";
		//设置一下font
		shadowCanvasCtx.font = "25pt 微软雅黑";
		//将阴影减弱一些
		shadowCanvasCtx.fillStyle = "green";
		shadowCanvasCtx.shadowColor = "rgba(0,100,100,0.5)";
		//在X轴上偏移5(左)
		shadowCanvasCtx.shadowOffsetX = -5;
		//在Y轴上偏移5(左)
		shadowCanvasCtx.shadowOffsetY = -5;
		//高斯模糊
		shadowCanvasCtx.shadowBlur = 5;
		shadowCanvasCtx.fillText(theString, 50, 200);
	}
	else{
		alert("您的浏览器不支持canvas，请更换！");
	}
}
window.addEventListener("load", drawShadow, false);
</script>
</head>
<body>
<canvas id="shadowCanvas" width="400px" height="300px" style="border:1px dotted">
</canvas>
</body>
</html>


效果图：


如果喜欢请关注本博客：冰镇宝贝的家http://blog.csdn.net/bkq421511585

冰镇宝贝321
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
HTML5 canvas基本绘图之绘制阴影效果
09-28
<canvas></canvas>是HTML5中新增的标签，用于绘制图形，这篇文章主要为大家详细介绍了HTML5 canvas基本绘图之绘制阴影方法，感兴趣的小伙伴们可以参考一下
canvas可视化效果之内阴影效果
netcy的专栏
12-22 1772
canvas可视化效果之内阴影效果 楔子 在之前的一个轨道交通可视化项目中，运用到了很多绘制技巧。 可以参考 之前的一篇文章 《利用canvas阴影功能与双线技巧绘制轨道交通大屏项目效果》 效果图中的轨道，就同时存在外发光和内发光效果的效果。 外发光效果 我们知道外发光效果是很容易实现的，直接通过设置阴影效果即可达到。比如我们随便绘制一条线段，加上阴影效果，看起来就是外发光的效果： ctx.clearRect(0,0,canvas.width,canvas.height); ctx
学习Canvas基础-绘制阴影
qq_67983277的博客
11-23 1330
学习Canvas基础-绘制阴影
canvas系列教程04 —— 渐变、阴影、路径、状态、Canvas对象、图形重叠模式
朝阳39的博客
04-24 1618
渐变 线性渐变 在一条直线上进行渐变 调用createLinearGradient()方法创建一个linearGradient对象 var gnt = cxt.createLinearGradient(x1, y1, x2, y2); x1、y1表示渐变色开始点的坐标 x2、y2表示渐变色结束点的坐标 添加渐变（开始） gnt.addColorStop(value1,color1); value1 渐变开始的位置，取值 0~1 color1 渐变开始的颜色 添加渐变（结.
色彩对设计师的重要性
chen801090的博客
07-22 258
色彩的运用对于设计来说至关重要，每种颜色都有自己的意义，而多种颜色的组合也需要理论指导。 人们对颜色的感觉是不同的，因此，为了更好的做设计，我们应该了解色彩的属性。 图片来源于网络 红色： 温暖、瞩目、能量、主导、煽动性、感性、兴奋、活力、跃动、生命、杀人、献血、祭祀、拯救、伤口、口红、诱惑、女性、 爱情、暂停、危险、终止、禁止、敌军、被害…… 图片来源于网络 橙色： 美味、食欲、爽口、年轻、青少年、有趣、久远、自然、土地、年长、安静... 图片来源于网络 黄...
HTML5 Canvas核心技术 图形、动画与游戏开发
09-19
44 第2章　绘制 45 2.1　坐标系统 46 2.2　canvas的绘制模型 47 2.3　矩形的绘制 48 2.4　颜色与透明度 50 2 .5　渐变色与图案 52 2.5.1　渐变色 52 2.5.2　图案 54 2.6　阴影 57 2.7　路径、描边与填充 60 2.7.1　...
WebGL编程指南
04-09
学习和使用WebGL 很简单 5 WebGL 的起源 5 WebGL 程序的结构 6 总结 7 第2 章 WebGL 入门 9 Canvas 是什么？ 10 使用[canvas] 标签 11 DrawRectangle.js 13 最短的WebGL 程序：清空绘图区 16 HTML 文件...
webgl编程指南及源码2/2
05-08
学习和使用WebGL 很简单 5 WebGL 的起源 5 WebGL 程序的结构 6 总结 7 第2 章 WebGL 入门 9 Canvas 是什么？ 10 使用[canvas] 标签 11 DrawRectangle.js 13 最短的WebGL 程序：清空绘图区 16 HTML 文件...
webgl编程指南及源码1/2
05-08
学习和使用WebGL 很简单 5 WebGL 的起源 5 WebGL 程序的结构 6 总结 7 第2 章 WebGL 入门 9 Canvas 是什么？ 10 使用[canvas] 标签 11 DrawRectangle.js 13 最短的WebGL 程序：清空绘图区 16 HTML 文件...
HTML - Canvas 使用画布实现内侧阴影和外侧阴影
牧码的博客
02-09 4847
前言 本方法也使用画布和JavaScript通过浏览器绘制文本和实现特殊效果。通过画布无法直接实现内侧渐变的阴影效果或插图效果，但是，使用stroke方法可以模拟文本中的内侧阴影。 准备工作 本方法会使用前面章节已经使用过的一段代码。可以从Packt Publishing的网站直接下载这段代码，它与2.3节中的代码是一样的。这段代码可以运行在本地电脑中，不需要任何Web服务器。可以从本...
canvas元素的内发光效果
热门推荐
zrzlj的专栏
10-08 1万+
我们知道使用CSS3可以实现阴影效果，box-shadow: 0px 0px 5px 5px black; 可以想象成是一个颜色为"black"的相同大小的阴影块在你要渲染的块的下面。     前面两个0px 0px的意思是阴影块的左上角位置与要渲染的块的偏移，可以为负数，第一个5px表示阴影块的模糊程度，数字越大越模糊，第二个5px表示阴影块往外辐射的距离，如果再后面加上inset, 写成,
使用HTML5画布（canvas）生成阴影效果
weixin_33979363的博客
07-12 145
来源：GBin1.com 使用HTML5的画布特性，我们可以创建图形，在这片文章中，我们将创建图形的阴影。 var canvas = document.getElementById('shadowcanvas'); var ctx = canvas.getContext('2d'); ctx.save(); ctx.fillStyle = '#EB852A';...
Unity 3D-Canvas画布的三种模式
weixin_34378969的博客
04-05 319
Unity开发VR之Vuforia 本文提供全流程，中文翻译。 Chinar 坚持将简单的生活方式，带给世人！（拥有更好的阅读体验 —— 高分辨率用户请根据需求调整网页缩放比例） Chinar —— 心分享、心创新！助力快速理解 Canvas 画布的三...
Canvas 入门1 描边、渐变、图像、阴影、填充
编程圈子-谢厂节的博客
12-04 4959
画布 canvas初始化<canvas id="myCanvas" width="200" height="200" border="1"></canvas><script> var c = document.getElementById("myCanvas"); //c.width=200; //c.height=200; </script>画线 <canvas id="myCanvas"
Canvas阴影绘制
Meskjei的博客
07-04 4401
阴影的绘制主要依赖以下四个属性： shadowOffsetX：阴影x方向的偏移距离 shadowOffsetY：阴影y方向的偏移距离 shadowColor：阴影的颜色 shadowBlur：阴影的模糊半径 const canvas = document.getElementById("canvas"); const ctx = canvas.getContext("2d"); // 阴影的x...
HTML5 Canvas 开发 绘图方法整理 【十一、Canvas图形阴影&&文字阴影效果】
freedomVenly的博客
02-19 1031
关于Canvas 阴影效果 分以下四种属性： ctx.shadowBlur 设置阴影的模糊级别 ctx.shadowOffsetX 设置形状与阴影的水平距离。 ctx.shadowOffsetY 设置形状与阴影的垂直距离。 ctx.shadowColor 设置阴影的颜色 在CSS3 中也有阴影的效果，两种用起来效果基本相同。 阴影效...
HTML5 canvas 阴影
歪脖先生的博客
04-24 2470
阴影 在canvas中进行绘制时，不管是文本、图形、还是图像，也不管是描边还是填充，都可以通过设置上下文对象的相关属性，来为它们设置阴影。这些属性及含义见表 4‑4： 表 4‑4 阴影的属性及含义 属性 含义 shadowColor 阴影的颜色，其默认值为完全透明的黑色。因此，如果没有把该属性设置为不透明，则阴影是不可见的。该属性只能
Unity Canvas组件的三种渲染模式
一直在笑的博客
10-12 3646
        最近，使用Unity在三维场景中显示文本时，发现文本随视角运动而运动，始终显示在视野中央。经过一番实验，终于将文本显示在世界空间内的固定位置。原来文本的显示位置是否随视角移动是由Unity Canvas的渲染模式决定的，并且所有的UI组件都可以通过Canvas来设置渲染模式。 1、 什么是Canvas         Canvas(画布)是承载所有UI元素的区域。所有的UI元素都必须是Canvas的子对象
vue-canvas-draw
最新发布
07-27
<vue-canvas-draw ref="canvas"></vue-canvas-draw> ``` 4. 在组件的方法中使用 Vue Canvas Draw 的 API： ```javascript export default { methods: { drawLine() { const canvas = this.$refs.canvas;...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值