HTML5画布(阴影)
案例1:
- <!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
function draw(){
var c=document.getElementById("myCanvas");
var cxt= c.getContext("2d");
cxt.fillStyle="#eeeeff";
cxt.fillRect(0,0,400,320);- cxt.shadowOffsetX=10;
cxt.shadowOffsetY=10;
cxt.shadowColor='rgba(100,100,100,0.5)';
cxt.shadowBlur=7.5;- cxt.translate(60,60);
for( var i=0;i<6;i++)
{
cxt.translate(50,50);
cxt.scale(0.8,0.8);
cxt.rotate(Math.PI/10);
createStar(cxt);
cxt.fill();
}- function createStar(cxt){
var n=0;
var dx=0;
var dy=0;
var s=50;
cxt.beginPath();
cxt.fillStyle='rgba(255,0,0,0.5)';
var x=Math.sin(0);
var y=Math.cos(0);
var dig=Math.PI/5*4;
for(var i=0;i<5;i++)
{
var x=Math.sin(i*dig);
var y=Math.cos(i*dig);
cxt.lineTo(dx+x*s,dy+y*s);
}
cxt.closePath();
}- }
</script>
</head>
<body onload="draw()">
<canvas id="myCanvas" width="450" height="350" style="border: 1px solid #dddddd">您的浏览器不支持
</canvas>- </body>
</html>- 效果图:
- 注释:
(1)shadowOffsetX--阴影的横向位移量,即图形横向方向移动的距离;
shadowOffsetY--阴影的纵向位移量,即纵向方向移动的距离;
shadowColor--阴影的颜色;
shadowBlur--阴影的模糊范围,该属性是可选的。如果不希望阴影的边缘太清晰,需要将阴影的边缘模糊化时可以使用该属性。属性值一般设定在0-10之间;
HTML5画布(阴影)的更多相关文章
- 使用HTML5画布(canvas)生成阴影效果
来源:GBin1.com 使用HTML5的画布特性,我们可以创建图形,在这片文章中,我们将创建图形的阴影. var canvas = document.getElementById('shadowca ...
- HTML5 Canvas阴影用法演示
HTML5 Canvas阴影用法演示 HTML5 Canvas中提供了设置阴影的四个属性值分别为: context.shadowColor = “red” 表示设置阴影颜色为红色 context.sh ...
- HTML5画布(CANVAS)速查简表
HTML5画布(CANVAS)速查简表 http://www.webhek.com/misc/html5-canvas-cheat-sheet/
- HTML5画布生成的3D飞船舰队效果
在线演示 本地下载 使用HTML5画布2D来模拟3D的空间效果,生成舰队飞行效果,了解如何开发,请阅读下面代码相关“轻视频”: HTML5画布模拟生成3D的舰队飞行效果
- 06. Web大前端时代之:HTML5+CSS3入门系列~HTML5 画布
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 我们先看看画布的魅力: 初始画布 canvas默认是宽3 ...
- html5画布基础
canvas 元素用于在网页上绘制图形. 什么是canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canva ...
- HTML5 画布参考
描述 HTML5 <canvas> 标签用于绘制图像(通过脚本,通常是 JavaScript). 不过,<canvas> 元素本身并没有绘制能力(它仅仅是图形的容器) - 您必 ...
- HTML5画布实现方法:
我们可以在HTML中使用属性width和height来定义Canvas.但是实现Canvas的相关功能主要还依赖于Javascript实现,即HTML5 Canvas API.我们使用javascri ...
- HTML5 画布canvas元素
HTML5的canvas元素以及随其而来的编程接口Canvas API应用前景极为广泛.简单地说,canvas元素能够在网页中创建一块矩形区域,这块矩形区域可以成为画布,这其中可以绘制各种图形.可别小 ...
随机推荐
- eclipse 新建servlet
在mac下的eclipse新建servlet报错: 解决一: --------------------------------- 解决二: 在右键项目名称中,打开 Properties->jav ...
- salt-grains
自定义grains 的方法 1: 在minion 的配置文件夹 /etc/salt/minion.d 下面包含的配置文件 grains.conf 2: 在salt的安装目录中建立grains 文件 ...
- Git的思想和基本工作原理
Git的思想和基本工作原理 Chapter: 开始了解Git 1. 先谈谈版本控制的一些事 2. Git诞生背后的一些故事 3. 版本控制:集中式VS分布式 4. Git的思想和基本工作原理 5. G ...
- Android 获取网络链接类型
/** * 获取当前网络类型 * @return 0:没有网络 1:WIFI网络 2:WAP网络 3:NET网络 */ public int getNetworkType() { int netTyp ...
- TimeZone 时区 (JS .NET JSON MYSQL)
来源参考 : http://www.cnblogs.com/qiuyi21/archive/2008/03/04/1089456.html 来源参考 : http://walkingice.blogs ...
- Android TextView背景颜色与背景图片设置
Android TextView 背景颜色与背景图片设置,android textview 控件,android textview 背景, android textview 图片,android te ...
- Windows服务器Pyton辅助运维--03.安装Visual Studio 的 Python 开发插件 PTVS
PTVS (Python Tools for Visual Studio) http://pytools.codeplex.com/ 当前版本:2.1 RC PTVS (Python Tools fo ...
- Android ListView特别属性用法
由于这两天在做listView的东西,所以整理出来一些比较特别(不常用)的属性,通过设置这样的属性可以做出更加美观的列表 1.stackFromBottom属性,这只该属性之后你做好的列表就会显示你列 ...
- MySQL 分区表原理及使用详解
今天统计数据的时候发现一张表使用了表分区,借此机会记录一下. 1. 什么是表分区? 表分区,是指根据一定规则,将数据库中的一张表分解成多个更小的,容易管理的部分.从逻辑上看,只有一张表,但是底层却是由 ...
- 自定义枚举类型的常用操作-附源码(xjl456852原创)
自定义枚举类型中,假如我们有name和desc这样的属性,并在这个基础上定义了多个对象. 那么就可能用到通过name获取desc,或者通过desc获取name.通过name或者desc获取对应的枚举对 ...