html5 之 canvas 相关知识(三)API-strokeStyle-shadow相关
strokeStyle定义和用法
strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式。
context.strokeStyle=color|gradient|pattern;//指示绘图填充色的CSS颜色值|用于填充绘图的渐变对象线性或放射性|用于填充绘图的 pattern 对象
实例 1 绘制一个矩形。使用渐变笔触:
<canvas id="canvas" width=300 height=150></canvas>
<script>
var c=document.getElementById("canvas");
var ctx=c.getContext("2d");
var gradient=ctx.createLinearGradient(100,0,200,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// 用渐变进行填充
ctx.strokeStyle=gradient;
ctx.lineWidth=10;
ctx.strokeRect(100,25,100,100);
</script>
定义的矩形尺寸100*100,边框宽度为10,实际画出的尺寸是110*110,即总宽= 宽度+边框宽,而非平常盒模型理解的 总宽= 宽度+边框宽*2
实例 2 用一个渐变笔触来写文本 "canvas example"
<canvas id="canvas" width=300 height=150></canvas>
<script>
var c=document.getElementById("canvas");
var ctx=c.getContext("2d");
ctx.font="30px arial";
var gradient=ctx.createLinearGradient(0,0,c.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// 用渐变进行填充
ctx.strokeStyle=gradient;
ctx.strokeText("canvas example",40,80);
</script>
shadowColor、shadowBlur 、shadowOffsetX 、shadowOffsetY
设置阴影的颜色、模糊级别、水平及垂直距离。
context.shadowColor=color;
context.shadowBlur=number;
context.shadowOffsetX=number;
context.shadowOffsetY=number;
实例 1 绘制一个红色矩形红色阴影,模糊级别30
<canvas id="canvas" width=300 height=150></canvas>
<script>
var myCanvas = document.getElementById("canvas");
var cc = myCanvas.getContext("2d");
cc.fillStyle = "#ff0000";
cc.shadowBlur=30;
cc.shadowColor="#ff0000";
cc.fillRect(100,25,100,100);//四个参数分别对应:x,y,w,h
</script>
在没有定义X\Y的阴影偏移时,四边正向放射
在原来 基础上设置X Y 阴影偏移
<canvas id="canvas" width=300 height=150></canvas>
<script>
var myCanvas = document.getElementById("canvas");
var cc = myCanvas.getContext("2d");
cc.fillStyle = "#ff0000";
cc.shadowBlur=30;
cc.shadowOffsetX=15;
cc.shadowOffsetY=15;
cc.shadowColor="#ff0000";
cc.fillRect(100,25,100,100);//四个参数分别对应:x,y,w,h
</script>
shadowOffsetX=0 指示阴影位于形状的正下方。
shadowOffsetX=20 指示阴影位于形状 left 位置右侧的 20 像素处。
shadowOffsetX=-20 指示阴影位于形状 left 位置左侧的 20 像素处。
shadowOffsetY=0 指示阴影位于形状的正下方。
shadowOffsetY=20 指示阴影位于形状 top 位置下方的 20 像素处。
shadowOffsetY=-20 指示阴影位于形状 top 位置上方的 20 像素处。
html5 之 canvas 相关知识(三)API-strokeStyle-shadow相关的更多相关文章
- html5 之 canvas 相关知识(一)概念及定义
什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...
- HTML5新增Canvas标签及对应属性、API详解(基础一)
知识说明: HTML5新增的canvas标签,通过创建画布,在画布上创建任何想要的形状,下面将canvas的API以及属性做一个整理,并且附上时钟的示例,便于后期复习学习!Fighting! 一.标签 ...
- canvas API ,通俗的canvas基础知识(一)
在没学canvas的时候,觉得canvas是这么的神秘,这么的绚丽,这么的高深,用canvas做出来的效果是如此的炫酷,能做的事情如此的宽广,简直让我心生敬畏之心,时常感叹:我要是得此技能,必定要上天 ...
- python实现单例模式的三种方式及相关知识解释
python实现单例模式的三种方式及相关知识解释 模块模式 装饰器模式 父类重写new继承 单例模式作为最常用的设计模式,在面试中很可能遇到要求手写.从最近的学习python的经验而言,singlet ...
- Canvas学习:封装Canvas绘制基本图形API
Canvas学习:封装Canvas绘制基本图形API Canvas Canvas学习 从前面的文章中我们了解到,通过Canvas中的CanvasRenderingContext2D对象中的属性和方 ...
- 【转载】前端面试“http全过程”将所有HTTP相关知识抛出来了...
原文:前端面试“http全过程”将所有HTTP相关知识抛出来了... 来一篇串通,一个http全过程的问题,把所有HTTP相关知识点都带过一遍 http全过程 输入域名(url)-->DNS映射 ...
- 浅尝HTML5之canvas
转自:http://segmentfault.com/a/1190000000661407/ HTML5新标签 HTML5新引入header,footer,article,section,aside和 ...
- 【Python五篇慢慢弹(5)】类的继承案例解析,python相关知识延伸
类的继承案例解析,python相关知识延伸 作者:白宁超 2016年10月10日22:36:57 摘要:继<快速上手学python>一文之后,笔者又将python官方文档认真学习下.官方给 ...
- listener监听器的相关知识
从别人的博客上我学习了listener的相关知识现在分享给大家 1.概念: 监听器就是一个实现特定接口的普通java程序,这个程序专门用于监听另一个java对象的方法调用或属性改变,当被监听对象发生上 ...
随机推荐
- C++库研究笔记——操作符重载实现类型转换&这样做的意义
目标: 已知这个接口: std::vector<double> add_vec(double *d1, double *d2) { ..... return result; } 我们自定义 ...
- jq倒计时
var referTime = 5; setInterval("refer('#show')", 1000); function refer(obj){ if(referTime ...
- C#学习笔记(八):扩展方法
还记得第一次使用DOTween时,发现缓动方法竟然是可以直接用Transform对象中调用到,当时就被震撼到了(那是还是C#小白一只).好了不多说了,今天来学习一下C#的这个特性——扩展方法. 扩展方 ...
- 如何将mysql表结构导出成Excel格式的(并带备注)
http://www.liangchan.net/liangchan/4561.html 1.使用一个mysql管理工具:SQLyog,点击菜单栏“数据库”下拉的最后一项: 导出的格式如下: 2.要想 ...
- angularjs入门学习【应用剖析中篇】
在上一节讲完了关于应用开发中如数据绑定,加入样式一类的基础操作后,接下来,将在应用中,与控制其有关的一些事件... 一.UI和控制器的分离 我们须要明白控制器在应用中的三个作用: [1]在应用模型中设 ...
- [AngularJS] ngCloak
The ngCloak directive is used to prevent the Angular html template from being briefly displayed by t ...
- 和Timesten有个约会--Timesten技术专栏系列(一)
作者: 三十而立 时间:2009年10月03日 12:08:42 本文出自 “inthirties(三十而立)”博客,转载请务必注明作者和保留出处http://blog.csdn.net/inthir ...
- HTTP协议报文、工作原理及Java中的HTTP通信技术详解
一.web及网络基础 1.HTTP的历史 1.1.HTTP的概念: HTTP(Hyper Text Transfer Protocol ...
- SQL SERVER 中identity用法
在数据库中, 常用的一个流水编号通常会使用 identity 栏位来进行设置, 这种编号的好处是一定不会重覆, 而且一定是唯一的, 这对table中的唯一值特性很重要, 通常用来做客户编号, 订单编号 ...
- Google搜索语法
原文:http://www.jianshu.com/p/37fe4f1381ef 前言 之前听过一个笑话,有人打开浏览器,输入www.baidu.com, 然后搜索框输入Google,查询google ...