如何用html绘制阴影图形,HTML5 给图形绘制阴影
在 HTML5 中,我们除了上一节讲过的可以对图形设置平移、旋转、缩放,还可以给图形添加阴影效果。添加阴影的时候只需要利用图形上下文对象的几个关于阴影绘制的属性就可以实现啦。
图形阴影绘制的属性
属性
描述shadowOffsetX
阴影的横向位移量
shadowOffsetY
阴影的纵向位移量
shadowBlur
阴影的模糊范围
shadowColor
阴影的颜色
shadowOffsetX 属性和 shadowOffsetY 属性分别用于设置阴影在 X 轴和 Y 轴的延伸距离,属性值为正值表示向下或向右延伸,负值表示向上或向左延伸。
shadowBlur 属性用于设置阴影的模糊度,当我们不希望图形的阴影太清晰时,可以使用这个属性。属性值为必须为正值,否则无效哟,一般设定在 0到10 之间。
shadowColor 属性值用于设置阴影的颜色,属性值可以为任意标准的 CSS 颜色值,默认颜色为黑色。
给图形绘制阴影
例如给一个粉色的矩形绘制阴影。
示例:
绘制向右偏移 10 像素的阴影:
HTML5学习(9xkd.com)
var can = document.getElementById("mycanvas");
var ctx = can.getContext("2d");
ctx.shadowOffsetX = 10;
ctx.shadowBlur = 10;
ctx.shadowColor="#000";
ctx.fillStyle = "pink"; // 填充颜色
ctx.fillRect(50, 50, 150, 70);
在浏览器中的演示效果:
可以看到上图中,阴影的位置向右偏移,如果想要阴影向左偏移,可以将shadowOffsetX 的值设置为负数。
示例:
如果要绘制向上偏移 20 像素的阴影,则不需要设置 shadowOffsetX,而是设置 shadowOffsetY 属性,正值为向下偏移,负值为向上偏移:
var can = document.getElementById("mycanvas");
var ctx = can.getContext("2d");
ctx.shadowOffsetY = -20;
ctx.shadowBlur = 10;
ctx.shadowColor="rgba(0, 0, 0, 0.7)"; // 设置透明度
ctx.fillStyle = "pink"; // 填充颜色
ctx.fillRect(50, 50, 150, 70);
在浏览器中的演示效果:
可以看到这张截图中,矩形的阴影颜色要比上面示例中淡一点。这是因为我们在给阴影设置颜色时,指定了一个透明度,用到了 rgba() 函数,函数中第四个参数用于设置透明度,值为 0~1 之间的小数,0表示完全透明,1表示不透明。
示例:
给四个边设置阴影:
var can = document.getElementById("mycanvas");
var ctx = can.getContext("2d");
ctx.shadowBlur = 10;
ctx.shadowColor="rgba(0, 0, 0, 0.7)"; // 设置透明度
ctx.fillStyle = "pink"; // 填充颜色
ctx.fillRect(50, 50, 150, 70);
在浏览器中的演示效果:
在实际应用中,其实我们会经常用到阴影,例如给导航栏添加阴影、给按钮添加阴影、给图片添加阴影等,这样看上去就会更立体一些,增加层次感。
来源:oschina
链接:https://my.oschina.net/u/4072026/blog/4375356
如何用html绘制阴影图形,HTML5 给图形绘制阴影相关推荐
- html5绘制矩形动画,HTML5 Canvas中绘制矩形实例
本文翻译自Steve Fulton & Jeff Fulton HTML5 Canvas, Chapter 2, "The Basic Rectangle Shape". ...
- 用html画一个企鹅图案的代码,HTML5 Canvas来绘制图形
1.HTML5元素用于图形的绘制,通过脚本(通常是javascript)来完成. 2.标签只是图形容器,必须使用脚本来绘制图形. 3.可以通过多种方法通过Canvas绘制路径.盒.圆.字符以及添加图像 ...
- html5 绘制图形,HTML5绘制几何图形
绘制几何图形 var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext(" ...
- [Web Chart系列之一(续)]Web端图形绘制SVG,VML, HTML5 Canvas 简单实例
前言 本篇是继 [Web Chart系列之一]Web端图形绘制SVG,VML, HTML5 Canvas 技术比较 的补充和实例说明各种技术的使用方式. VML 的用法和实例 引入命名空间之后,就可以 ...
- [Web Chart系列之一]Web端图形绘制SVG,VML, HTML5 Canvas 技术比较
先介绍一下矢量图的概念: 矢量图使用直线和曲线来描述图形,这些图形的元素是一些点.线.矩形.多边形.圆和弧线等等,它们都是通过数学公式计算获得的.例如一幅花的矢量图形实际上是由线段形成外框轮廓,由外框 ...
- html5 canvas绘制图形,html5 Canvas绘制图形入门详解
html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome. ...
- html5绘制股票图形,股票数据分析(五):绘制股票k线图(js+canvas + Python + json)
本文介绍:利用 js+canvas 绘制股票k线图 HTML5 标签用于绘制图像(通过脚本,通常是 JavaScript). 不过, 元素本身并没有绘制能力(它仅仅是图形的容器) - 您必须使用脚本来 ...
- html绘制图形的关键三步,基于HTML5的绘图——绘制简单图形
绘制矩形 HTML5中实现绘制矩形的效果可以调用上下对象的三个函数fillRect().strokeRect()和clearRect().这些函数的语法格式如下所示: context.fillRect ...
- html5中Canvas、绘制线条模糊、常见绘制工具、绘制基本图形、绘制图片、面向对象的方式绘制图形图片、绘制文本、帧动画绘制
Canvas容器: canvas标签用来定义图像的容器,必须配合脚本来绘制图像,canvas也运用于游戏开发.注意:canvas绘制图时会出现线条模糊情况,这是因为显示屏像素和canvas中定义的一个 ...
最新文章
- js文件引用方式及其同步执行与异步执行
- 在新的标签页中代开编辑文件
- Ubuntu15.04如何添加163源
- 静态链表(代码、分析、汇编)
- LeetCode MySQL 1667. 修复表中的名字
- c语言推箱子源代码及注释,求大神 解析推箱子源代码 要详细
- Hibernate---延迟加载和OpenSessionInView
- 恐龙涂色游戏 - 恐龙画画世界填色游戏
- HFSS初探日志(二)微波滤波器设计实例:微带发夹线滤波器
- uva1391-Astronauts
- 应用计算机最高奖,中国首次问鼎超算应用最高奖
- JS淘宝商品广告效果
- 一份来自28岁老程序员的自白
- [译] 为什么你要学习 Go?
- 四、数据仓库--ORACLE数据库卸数实现
- #今日论文推荐# IJCAI2022 | 求同存异:多行为推荐的自监督图神经网络
- python生成视频_成为视频分析专家:自动生成视频集锦(Python实现)
- 分享5个宝藏小网站,工作学习都能用到
- 联发科技嵌入式_【MTK联发科技嵌入式软件开发工程师面试题目|面试经验】-看准网...
- SAP 采购订单打印之后不能取消审核问题的解决(修改配置)