shadowOffsetx 阴影X轴的移动

shadowOffsety 阴影的y轴移动

shadowColor 阴影颜色

shadowBlur 模糊范围

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title></title>
<script>
function draw(id){
var canvas = document.getElementById(id);
var context = canvas.getContext("2d");
context.fillStyle = "#eeeeef";
context.fillRect(0,0,500,500);
context.shadowOffsetX = 10;
context.shadowOffsetY = 10;
context.shadowColor = "rgba(100,100,100,0.5)";
context.shadowBlur = 7.5;
context.translate(0,50);
for (var i = 0; i<3; i++) {
context.translate(100,100);
create5Star(context);
context.fill();
}

}
function create5Star(context){
var dx = 100;
var dy = 0;
var s = 50;
context.beginPath();
context.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);
context.lineTo(dx+x*s,dy+y*s);
}
context.closePath();
}
</script>
</head>
<body onload="draw('canvas')">
<canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>

canvas阴影的更多相关文章

  1. HTML5 Canvas阴影用法演示

    HTML5 Canvas阴影用法演示 HTML5 Canvas中提供了设置阴影的四个属性值分别为: context.shadowColor = “red” 表示设置阴影颜色为红色 context.sh ...

  2. 利用canvas阴影功能与双线技巧绘制轨道交通大屏项目效果

    利用canvas阴影功能与双线技巧绘制轨道交通大屏项目效果 前言 近日公司接到一个轨道系统的需求,需要将地铁线路及列车实时位置展示在大屏上.既然是大屏项目,那视觉效果当然是第一重点,咱们可以先来看看项 ...

  3. HTML 5 canvas —— 基本语法

    目录 简述 canvas 基础 2D context API 基本线条 路径 插入图像 像素级操作 文字 阴影 颜色渐变 小节 简述 HTML 5 规范引进了很多新特性,其中最令人期待的之一就是 ca ...

  4. 在HTML5中怎样实现Canvas阴影效果

    该文章是由e良师益友技术部小陈原创作品,转载是请注明来源,谢谢! 今天我给大家介绍一下在HTML5中怎样实现Canvas阴影效果,我们知道现在HTML5的Canvas阴影也经常使用的,这个就是HTML ...

  5. h5 canvas 图片上传操作

    最近写的小 demo,使用的是h5的 canvas来对图片进行放大,移动,剪裁等等这是最原始的代码,比较接近我的思路,后续会再对格式和结构进行优化 html: <pre name="c ...

  6. Canvas游戏计算机图形教程

    TechbrooD   主站 WOW 登录   注册 0首页 1简介 1.1WWW 技术变迁和生态 1.2WWW 学习建议 1.3WWW 互联网基础知识 1.4WWW Web 1.5 WWW Web ...

  7. 大家都能看懂的 canvas基础教程

    原文链接: http://www.shitu91.com/cms/canvasSub/index.html 01.canvas简单的认识 canvas 是html5提供给我们的一个绘图标签 默认大小 ...

  8. HTML5☞canvas

    <canvas>便签用于绘制图像,图表.不过,<canvas> 元素本身并没有绘制能力(它仅仅是图形的容器) - 您必须使用脚本JavaScript来完成实际的绘图任务.既然你 ...

  9. 关于HTML 5 canvas 的基础教程

    HTML 5 规范引进了很多新特性,其中最令人期待的之一就是 canvas 元素.HTML 5 canvas 提供了通过 JavaScript 绘制图形的方法,此方法使用简单但功能强大.每一个canv ...

随机推荐

  1. EasyUI两种动态添加tab Iframe页面的方法

    /** 动态添加tab-----方式一 **/ function addIframeTab(titleTxt,href,icon) { $('#mytabs').tabs('addIframeTab' ...

  2. relay 2015-02-05 21:00 27人阅读 评论(0) 收藏

    scanf函数是以在输入多个数值数据时,若格式控制串中没有非格式字符作输入数据之间的间隔,则可用空格,TAB或回车作间隔. C编译在碰到空格,TAB,回车或非法数据(如对"%d"输 ...

  3. 【POJ 1679 The Unique MST】最小生成树

    无向连通图(无重边),判断最小生成树是否唯一,若唯一求边权和. 分析生成树的生成过程,只有一个圈内出现权值相同的边才会出现权值和相等但“异构”的生成树.(并不一定是最小生成树) 分析贪心策略求最小生成 ...

  4. 搭讪培训班 - 名品试用 - YOKA时尚论坛 - YOKA社区

    搭讪培训班 - 名品试用 - YOKA时尚论坛 - YOKA社区 搭讪培训班 发贴回复 发新话题 发布投票 搭讪培训班   1330 1 阅读 回复 跳转到指定楼层 加为好友 时尚懒洋洋 工作:无业游 ...

  5. swift http请求返回json数据和分析

    1 AppDelegate.swift // // AppDelegate.swift // QQDemo // // Created by 赵超 on 14-6-21. // Copyright ( ...

  6. Shell命令行

    利用wc命令统计文件行,单词数,字符数,利用sort排序和去重,再结合uniq可以进行词频统计. cat file.txt sort hello.c | uniq -c | sort -nr |hea ...

  7. uinavagation 透明代码

    NSShadow *shadow = [[NSShadow alloc] init]; [shadow setShadowOffset:CGSizeMake(1, 1)]; [shadow setSh ...

  8. iOS设计模式解析（二）抽象工厂方法

    抽象工厂方法:提供一个创建一系列相关或相互依赖对象的接口,而无需指定它们具体的类 与工厂方法区别: 抽象工厂通过对象组合创建抽象产品.工厂通过类集成创建抽象产品 抽象工厂创建多系列产品.工厂创建一种产 ...

  9. 享受一下大神的感觉, unity中用C#自己封装dll

    第一次写博客,有什么不对的地方,欢迎大家指出 (1)打开vs(本人用的是vs2013)然后建一个项目,如下图所示,选择.ENT3.5的框架,或者低于3.5的,这是因为Unity里面用的框架可能在3.5 ...

  10. python基础之 re(正则表达式)模块学习

    今天学习了Python中有关正则表达式的知识.关于正则表达式的语法,不作过多解释,网上有许多学习的资料.这里主要介绍Python中常用的正则表达式处理函数. re.match re.match 尝试从 ...