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对象的方法调用或属性改变,当被监听对象发生上 ...
随机推荐
- AVCaptureDevice
转载自:http://blog.csdn.net/andy_jiangbin/article/details/19820717 0.媒体采集的几个东西.这里所需要明白的是,在这个流程中,这里会存在 ...
- 转载C#中堆(heap)和栈(stack)的区别
转载原地址 http://www.cnblogs.com/wangshenhe/archive/2013/02/18/2916275.html [转]C#堆和栈的区别 理解堆与栈对于理解.NET中的 ...
- HDU 5723 Abandoned country (最小生成树+dfs)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5723 n个村庄m条双向路,从中要选一些路重建使得村庄直接或间接相连且花费最少,这个问题就是很明显的求最 ...
- 图文讲解:iOS App提交流程
原文:http://www.toceansoft.com/ios/3287.jhtml 一.证书的导出 1.1.前期工作 首先你需要有一个苹果的开发者帐号,一个Mac系统. 如果没有帐号可以在打开ht ...
- UVA 11134 - Fabled Rooks(贪心+优先队列)
We would like to place n rooks, 1 ≤ n ≤ 5000, on a n×n board subject to the following restrict ...
- MVC神韵---你想在哪解脱!(十四)
修正票价字段的精度 前面我们追加数据的时候遗留下来一个问题,就是在追加数据的时候,票价(Price)字段中输入的是9.99元,但是电影清单显示画面中该数据的票价字段显示为10元,这是为什么?这个问题发 ...
- VBA在Excel中的应用(一):改变符合条件单元格的背景颜色
在使用excel处理数据的时候,为了能更清晰的标示出满足特定条件的单元格,对单元格添加背景色是不错的选择.手工处理的方式简单快捷,但是当遇到大批量数据,就会特别的费时费力,而且不讨好(容易出错).通过 ...
- VLAN设置
A Logical Network is a way of representing networks in your datacenter that have the same connectivi ...
- 修改 SVN 账户密码的方法
记是记不住 的,即便是每天都在用的东西,也有貌似熟悉其实很陌生的时候,或者说根本就是不熟悉.于是需要拿出来经常翻翻,比如我们的SVN账户配置,很简单的一个 case,你可能是svn使用高手,但不一定记 ...
- 用C#调用Matlab图像处理自制QQ游戏2D桌球瞄准器
平时不怎么玩游戏,有时消遣就玩玩QQ里的2D桌球,但是玩的次数少,不能像骨灰级玩家一样百发百中,肿么办呢?于是某天突发奇想,决定自己也来做个“外挂”.说是外挂,其实只是一个瞄准器,毕竟外挂是修改别人的 ...