来源:GBin1.com

使用HTML5的画布特性,我们可以创建图形,在这片文章中,我们将创建图形的阴影。

  var canvas = document.getElementById('shadowcanvas');
var ctx = canvas.getContext('2d'); ctx.save();
ctx.fillStyle = '#EB852A';
ctx.shadowOffsetX = 15; // 阴影Y轴偏移
ctx.shadowOffsetY = 15; // 阴影X轴偏移
ctx.shadowBlur = 14; // 模糊尺寸
ctx.shadowColor = 'rgba(0, 0, 0, 0.5)'; // 颜色 ctx.beginPath();
ctx.arc(150, 150, 75, 0, 2 * Math.PI, false);
ctx.fill();
ctx.restore(); ctx.fillStyle = '#222222';
ctx.beginPath();
ctx.arc(350, 150, 75, 0, 2 * Math.PI, false);
ctx.fill();

这段代码中,我们首先得到画布并取得context,调用方法添加阴影相关属性,包括了偏移,模糊和阴影颜色。最后调用canvas方法生成图形,这里我们为了更好的对比效果,分别生成了2个圆形,一个包含阴影,一个不包含阴影。

注意:以上阴影属性,至少得设置颜色和模糊度。

运行代码:

GBdebug在线调试地址:http://www.gbin1.com/gb/debug/5b6fd9cb-6bdf-4a7f-8f20-4ea73bf9ae76.htm

希望这个小技巧能帮助大家生成更酷的画布效果。

via 极客社区

来源:使用HTML5画布(canvas)生成阴影效果

使用HTML5画布(canvas)生成阴影效果的更多相关文章

  1. HTML5画布(CANVAS)速查简表

    HTML5画布(CANVAS)速查简表 http://www.webhek.com/misc/html5-canvas-cheat-sheet/

  2. HTML5 画布canvas元素

    HTML5的canvas元素以及随其而来的编程接口Canvas API应用前景极为广泛.简单地说,canvas元素能够在网页中创建一块矩形区域,这块矩形区域可以成为画布,这其中可以绘制各种图形.可别小 ...

  3. HTML5画布Canvas

    一.Canvas概念介绍 1.概念 Canvas : 画布 2.作用 : HTML5 Canvas 元素用于图形的绘制, 通过脚本(通常是JavaScript)来完成.它本身只是个图形容器,必须使用脚 ...

  4. 关于HTML5画布canvas的功能

    一.画布的使用 1.首先创建一个画布(canvas) <canvas id=”myCanvas” width=”200” height=”100” style=”border:1px solid ...

  5. HTML5 画布canvas

    SVG的<defs> <symbols> 元素用于预定义一个元素使其能够在SVG图像中重复使用 <svg xmlns="http://www.w3.org/20 ...

  6. 10款面向HTML5 画布(Canvas)的JavaScript库

    https://www-evget-com/article/2014/4/9/20799.html

  7. HTML5画布生成的3D飞船舰队效果

    在线演示 本地下载 使用HTML5画布2D来模拟3D的空间效果,生成舰队飞行效果,了解如何开发,请阅读下面代码相关“轻视频”: HTML5画布模拟生成3D的舰队飞行效果

  8. 面向画布(Canvas)的JavaScript库

    面向画布(Canvas)的JavaScript库 总结 每个库各有特色,根据需求选择   学习要点 面向画布(Canvas)的JavaScript库 EaselJS 是一个封装了 HTML5 画布(C ...

  9. 转载:将画布(canvas)图像保存成本地图片的方法

    之前我曾介绍过如何将HTML5画布(canvas)内容转变成图片形式,方法十分简单.但后来我发现只将canvas内容转变成图片输出还不够,如何能将转变后的图片保存到本地呢? 其实,这个方法也是非常简单 ...

  10. 浅尝HTML5之canvas

    转自:http://segmentfault.com/a/1190000000661407/ HTML5新标签 HTML5新引入header,footer,article,section,aside和 ...

随机推荐

  1. Nmap误报1720端口开放的原因

    在使用Nmap扫描服务器开放端口(全连接扫描)时,一直会发现误报1720端口开放,telnet也有时会连接成功.而实际上服务器并未开启此端口.经过查阅资料,确定原因如下: H.323协议在负载中放入了 ...

  2. Interllij IDEA 使用Git工具

    1.git简介 git是目前流行的分布式版本管理系统.它拥有两套版本库,本地库和远程库,在不进行合并和删除之类的操作时这两套版本库互不影响.也因此其近乎所有的操作都是本地执行,所以在断网的情况下任然可 ...

  3. WCF+Windows2008&&sqlserver2008

    这些在我的文件和云盘当中也可以在csdn中查找

  4. 原生js遍历每一个对象,给每一个对象添加onclick事件

    <script type="text/javascript"> window.onload = function () { var imgs = document.im ...

  5. centos 新增用户, 然后他在主目录添加网站403Forbbiden

    是 /home/zhou  这个文件夹的权限不够 往往看了网站目录并且给了777权限了,还是403,就是因为父目录的权限不够

  6. POJ 1985.Cow Marathon-树的直径-树的直径模板(BFS、DFS(vector存图)、DFS(前向星存图))

    Cow Marathon Time Limit: 2000MS   Memory Limit: 30000K Total Submissions: 7536   Accepted: 3559 Case ...

  7. DBCS 从256开始

    ASCII(American Standard Code for Information Interchange,美国信息互换标准代码)是一套基于拉丁字母的字符编码,共收录了 128 个字符,用一个字 ...

  8. POJ 2484 A Funny Game 博弈论 对称博弈

    http://poj.org/problem?id=2484 1和2时Alice必胜,3时Bob必胜,其他情况下Bob只需要在Alice取过之后取一次将剩下的硬币链平均分为两份,然后Alice怎么取B ...

  9. AGC 016 C - +/- Rectangle

    题面在这里! 结合了贪心的构造真是妙啊2333 一开始推式子发现 权是被多少个w*h矩形覆盖到的时候 带权和 <0 ,权都是1的时候带权和 >0,也就是说被矩形覆盖的多的我们要让它尽量小. ...

  10. BZOJ 3571 [Hnoi2014]画框(最小乘积完美匹配)

    [题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=3571 [题目大意] 给出一张二分图,每条边上有a,b两个值,求完美匹配, 使得suma ...