颜色、样式和阴影的属性与方法
fillStyle                设置或返回用于填充绘画的颜色、渐变或模式
strokeStyle         设置或返回用于笔触的颜色、渐变或模式
shadowColor        设置或返回用于阴影的颜色
shadowBlur        设置或返回用于阴影的模糊级别
shadowOffsetX        设置或返回阴影距形状的水平距离
shadowOffsetY        设置或返回阴影距形状的垂直距离

createLinearGradient(x0,y0,x1,y1)         创建线性渐变(用在画布内容上)

x0         渐变开始点的 x 坐标
y0         渐变开始点的 y 坐标
x1         渐变结束点的 x 坐标
y1         渐变结束点的 y 坐标

createPattern(img,"repeat|repeat-x|repeat-y|no-repeat")                        在指定的方向上重复指定的元素
image         规定要使用的图片、画布或视频元素。
repeat         默认。该模式在水平和垂直方向重复。
repeat-x         该模式只在水平方向重复。
repeat-y         该模式只在垂直方向重复。
no-repeat         该模式只显示一次(不重复)。

createRadialGradient(x0,y0,r0,x1,y1,r1)                创建放射状/环形的渐变(用在画布内容上)
x0         渐变的开始圆的 x 坐标
y0         渐变的开始圆的 y 坐标
r0         开始圆的半径
x1         渐变的结束圆的 x 坐标
y1         渐变的结束圆的 y 坐标
r1         结束圆的半径

addColorStop(stop,color)                        规定渐变对象中的颜色和停止位置
stop         介于 0.0 与 1.0 之间的值,表示渐变中开始与结束之间的位置。
color         在结束位置显示的 CSS 颜色值

<canvas id="b" width="500" height="450" style="border:1px solid #000"></canvas>
<img src="data:images/deng.png" id="lamp"/>
<script type="text/javascript">
var a=document.getElementById("b");
var ctx=a.getContext("2d");
ctx.fillStyle="green"; //设置或返回用于填充绘画的颜色、渐变或模式
ctx.shadowColor="#000"; //设置或返回用于阴影的颜色
ctx.shadowBlur=25; //设置或返回用于阴影的模糊级别
ctx.shadowOffsetX=10; //设置或返回阴影距形状的水平距离
ctx.shadowOffsetY=10; //设置或返回阴影距形状的垂直距离
ctx.fillRect(20,20,150,100); var grd=ctx.createLinearGradient(200,20,320,20); //创建线性渐变(用在画布内容上)
grd.addColorStop(0,"green"); //规定渐变对象中的颜色和停止位置
grd.addColorStop(0.5,"yellow");
grd.addColorStop(1,"white");
ctx.strokeStyle=grd;
ctx.lineWidth=5;
ctx.strokeRect(200,20,150,100); var grd=ctx.createRadialGradient(85,190,5,110,200,80); //创建放射状/环形的渐变(用在画布内容上)
grd.addColorStop(0,"green"); //规定渐变对象中的颜色和停止位置
grd.addColorStop(0.5,"yellow");
grd.addColorStop(1,"white");
ctx.fillStyle=grd;
ctx.fillRect(20,150,150,100); var img=document.getElementById("lamp")
var pat=ctx.createPattern(img,"repeat"); //在指定的方向上重复指定的元素
ctx.rect(200,150,150,100);
ctx.fillStyle=pat;
ctx.fill();
</script>

HTML5 Canvas 中的颜色、样式和阴影的属性和方法的更多相关文章

  1. HTML5 canvas 中的线条样式

    线条样式属性 lineCap        设置或返回线条的结束端点样式 butt         默认.向线条的每个末端添加平直的边缘. round         向线条的每个末端添加圆形线帽. ...

  2. [HTML5 Canvas学习]使用颜色和透明度

    在canvas中使用颜色和透明度,通过context的strokeStyle和fillStyle属性设置,strokeStyle和fillStyle的值可以是任意有效的css颜色字串.可以用RGB.R ...

  3. HTML5 Canvas中实现绘制一个像素宽的细线

    正统的HTML5 Canvas中如下代码 ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(10, 100); ctx.lineTo(300,100); c ...

  4. [js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)

    接着上文线条样式[js高手之路] html5 canvas系列教程 - 线条样式(lineWidth,lineCap,lineJoin,setLineDash)继续. canvas提供两种输出文本的方 ...

  5. html5 canvas中CanvasGradient对象用法

    html5 中canvas提供了强大的渲染样式,可以实现一些比较复杂的样式设置,今天学习了CanvasGradient对象可以实现一个颜色的渐变 CanvasGradient对象可以实现两种不同形式的 ...

  6. [js高手之路] html5 canvas系列教程 - 线条样式(lineWidth,lineCap,lineJoin,setLineDash)

    上文,写完弧度与贝塞尔曲线[js高手之路] html5 canvas系列教程 - arcTo(弧度与二次,三次贝塞尔曲线以及在线工具),本文主要是关于线条的样式设置 lineWidth: 设置线条的宽 ...

  7. 在 CSS 中表示颜色的hex code方法和rgb方法

    hexadecimal code(十六进制编码),简写为 hex code. 我们通常使用 decimals,也就是十进制数字,它对每一位数字使用符号0到9来表示.Hexadecimals (或 he ...

  8. JavaScript 中那些关于坐标和距离的属性与方法

    一 前言 在前端开发中总会遇到各种各样需要使用或计算坐标和距离的情况,但是这些属性和方法众多,全部熟练地记下来并非是一件易事,大多只能现查,耗费不少时间精力,于是便有了整理记录的想法,即加深了印象,又 ...

  9. moviepy音视频剪辑:moviepy中的剪辑基类Clip的属性和方法详解

    专栏:Python基础教程目录 专栏:使用PyQt开发图形界面Python应用 专栏:PyQt+moviepy音视频剪辑实战 专栏:PyQt入门学习 老猿Python博文目录 老猿学5G博文目录 一. ...

随机推荐

  1. 用UltraEdit折叠宏定义

    在UltraEdit中通过“高级->配置->导航->编辑器显示->语法高亮->文档的完整目录名称”取得“c_cplusplus.uew”文件存放的目录. 在“c_cplu ...

  2. QT 设置SizePolicy的例子(简单明了)

    http://hi.baidu.com/cybertingred/item/e8eadaad0c7f62f615329be7   QPushButton *left = new QPushButton ...

  3. Bitwise AND of Numbers Range——LeetCode

    Given a range [m, n] where 0 <= m <= n <= 2147483647, return the bitwise AND of all numbers ...

  4. Nodejs in Visual Studio Code 04.Swig模版

    1.开始 设置Node_Global:npm config set prefix "C:\Program Files\nodejs" Express组件:npm install e ...

  5. DLL入门浅析(1)——如何建立DLL

    转载自:http://www.cppblog.com/suiaiguo/archive/2009/07/20/90619.html 初学DLL,结合教程,总结一下自己的所得,希望对DLL初学者们有所帮 ...

  6. AOJ 0121 广度优先搜索

    题意:7数码问题.在2×4的棋盘上,摆有7个棋子,每个棋子上标有1至7的某一数字,不同棋子上标的数字不相同.棋盘上还有一个空格(用0表示),与空格相邻(上下左右)的棋子可以移到空格中,该棋子原先位置成 ...

  7. 修改mysql数据存储的地址

    修改mysql数据存储的地址 修改步骤如下 1,修改前为默认路径/var/lib/mysql/,计划修改为/data/mysql/data mysql> show variables like ...

  8. 用MFC完成一个简单的猜数字游戏: 输入的四位数中,位置和数字都正确为A,数字相同而位置不同的为B。

    最近学习了MFC一些比较基础的知识,所以打算通过做一个简单的数字游戏来理解MFC的流程并进一步熟悉其操作. 在这里,我做了一个猜数字的小游戏.第一步当然是设计主界面,先给大家展示一下游戏界面: 主界面 ...

  9. HDU H204 阿牛的EOF牛肉串

    阿牛的EOF牛肉串 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Sub ...

  10. Android Toast 自定义

    <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&quo ...