Html5 Canvas初探学习笔记(8) -阴影

原创 2012年03月29日 21:39:24

小满(bill man)个人原创,欢迎转载,转载请注明地址,小满(bill man)的专栏地址http://blog.csdn.net/bill_man

本篇继续介绍html5的一些状态值,html5的绘制上下文提供了丰富的效果,本篇介绍阴影的效果,阴影有四个状态值控制,分别是shadowBlurshadowOffsetXshadowOffsetYshadowColor。其中shadowBlur为阴影的像素模糊值,shadowOffsetXshadowOffsetY为阴影在x轴和y轴上的偏移值,shadowColor为阴影颜色值,其中默认的值是前三个值都为0,最后一个值设置为透明黑色。只需修改其中的两个值就可以显现出来阴影效果,如下面的例子所示,同时下面的例子也证明了他是一个状态值,也可以使用save保存和restore弹出。


绘制的代码如下

context.fillStyle = "red";

context.save();

context.shadowBlur = 20;

context.shadowColor = "rgb(255,0,0)";

context.fillRect(50,50,100,100);

context.restore();

context.fillRect(200,50,100,100);

这里只是把阴影颜色设置为红色,由于xy的偏移值都没有设置,所以默认的就是这样的阴影包围状态,shadowColor 设置为全不透的红色,也可以通过argb值来设置透明度,但是对应阴影的区别不大:

修改为如下的代码,效果如下:


绘制的代码如下:

context.fillStyle = "red";

context.save();

context.shadowBlur = 20;

context.shadowColor = "rgb(255,0,0)";

context.fillRect(50,50,100,100);

context.shadowColor = "argb(255,0,0,0.5)";

context.fillRect(200,50,100,100);

阴影在x轴和y轴上的偏移值,顾名思义,就是让阴影发生偏移,分别在x轴和在y轴上偏移相应的距离。效果如下:


context.fillStyle = "red";

context.shadowBlur = 20;

context.shadowColor = "rgb(255,0,0)";

context.shadowOffsetX = 15;

context.shadowOffsetY = 15;

context.fillRect(50,50,100,100);

阴影不止适用于正方形,其他图形也可以:


context.fillStyle = "red";

context.shadowBlur = 20;

context.shadowColor = "rgb(255,0,0)";

context.shadowOffsetX = 15;

context.shadowOffsetY = 15;

context.beginPath();//开始路径

context.arc(100,100,60,Math.PI / 6,Math.PI,true);

context.closePath();

context.fill();//填充

context.beginPath();//开始路径

context.moveTo(200,50);//设置路径,参数为原点

context.lineTo(360,50);//设置路径直到本线段的终点

context.lineTo(360,150);//设置路径直到本线段的终点

context.closePath();//结束路径

context.fill();//正式绘制

如有错误,希望大家多多指正

下一篇继续研究绘制的高级功能


版权声明:本文为博主原创文章,未经博主允许不得转载。

HTML5 Canvas如何设置阴影

本人为原创作品:e良师益友 ,转载是并且注明 e良师益友网导读:HTML5 Canvas如何设置阴影,在网页设计中适当的加入一些特效,能让网页看上去更加的美观,带给客户更好的用户体验,在...
  • u011126789
  • u011126789
  • 2014年03月14日 10:34
  • 729

HTML5之7 __Canvas: 缩放、旋转、创建阴影

canvas API 的scale() 函数用于缩放.  scale() 带有两个参数,分别代表在x, y 两个维度的值, 每个参数在 canvas 显示图像的时候, 向其传递在本方向轴上图像要放...
  • aduovip
  • aduovip
  • 2015年05月09日 18:50
  • 2275

HTML5 Canvas阴影用法演示

演示Canvas中shadow属性的设置应用与技巧。实现文字的边缘模糊效果,阴影效果3D拉影效果等...
  • jia20003
  • jia20003
  • 2013年07月16日 14:43
  • 8804

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

function drawShadow(e) { var shadowCanvasElt = document.getElementById("shadowCanvas"); if (shadow...
  • bkq421511585
  • bkq421511585
  • 2012年10月30日 23:04
  • 2996

HTML5 Canvas进阶(二):模式,组合,阴影,状态,变形

模式 前面在介绍strokeStyle和fillStyle属性的时候曾说过它们的取值可以是CSS颜色值、渐变对象或者模式对象。在上一篇中已经介绍过渐变对象了,那么这篇的开始就介绍模式对象。 模式对...
  • sadfishsc
  • sadfishsc
  • 2011年10月21日 19:12
  • 3767

canvas内的字体实现阴影效果

api介绍 可以通过几种全局context属性来控制阴影。 shadowColor任何CSS中的颜色值。可以使用透明度(alpha) ShadowOffsetX像素值。值为正数,向右移动阴影;值...
  • qq_30100043
  • qq_30100043
  • 2018年01月12日 16:52
  • 133

android canvas的阴影绘制Shader

android Shader阴影绘制类的使用方法及说明http://blog.csdn.net/dinko321/article/details/6715290 这是我在网上找到的,某位前辈写的,我...
  • w366549434
  • w366549434
  • 2017年02月13日 16:12
  • 2027

使用canvas为图片添加阴影效果

使用canvas为图片添加阴影效果
  • u010384444
  • u010384444
  • 2016年07月12日 22:37
  • 286

Android中使用canvas定制控件(控件周围阴影)

首先上一张效果图: 基本的思路是: 1.绘制圆角矩形。 2.四周添加阴影。   开始绘制 在onDraw中,首先初始化画笔: 1 Paint pain...
  • zjd934784273
  • zjd934784273
  • 2017年12月05日 17:27
  • 60

HTML5 canvas绘制太阳系各行星(包括月球的公转)

canvas绘制太阳系  看了好多canvas绘制太阳系行星,他们都忽略了月亮,虽然月亮不是行星,但是绘图少了月亮也就没有挑战性了,今天我就计算了一下月亮的轨迹,然后按照公转的比例画了上去,首先看一下...
  • flyingpig2016
  • flyingpig2016
  • 2017年01月04日 17:01
  • 1436
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Html5 Canvas初探学习笔记(8) -阴影
举报原因:
原因补充:

(最多只允许输入30个字)