html5中阴影,HTML5 Canvas 中的颜色、样式和阴影的属性和方法

颜色、样式和阴影的属性与方法

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 颜色值

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();

HTML5 canvas 中的线条样式

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

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

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

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

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

html5 canvas中CanvasGradient对象用法

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

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

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

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

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

HTML5 Canvas中9宫格的坑

近期小鸟情人游戏上了手机qq空间,一个3岁的游戏来了她的第二春.为了能有更好的表现,我们对其进行了一次改版. 改版当中一项就是对原来的弹出框样式进行改进.将大块木板材质改成纯色(边框为圆角金属材质)样 ...

随机推荐

commandname+commandargument

(一) CommandName:其实可以设置成一种动作,比如Select,Update,Delete,等操作.就是说CommandName是确定他到底引发的是哪一事件,如果CommandName的名字 ...

MenuStrip菜单递归

C# TreeView菜单,MenuStrip菜单递归动态生成例子 http://www.cnblogs.com/ajiaojiao0303/articles/1884772.html http:// ...

解决TableView / ScrollView上的Menu问题(1滑出View区域还可点击2导致点击menu后View不能滑动)

解决TableView / ScrollView上的Menu问题 1划出区域还可点击 重写CCMenu的触摸事件函数 TouchBegin/TouchMove/TouchCancle/TouchEnd ...

jquery+正則表達式验证邮箱格式的样例

js: $("#email").blur(function(){ //获取id相应的元素的值,去掉其左右的空格 var email = $.trim($('#email').val ...

ng-file-upload(在单文件选择，并且通过点击“上传”按钮上传文件的情况下，如何在真正选择文件之前保留上一文件信息？)

文章前面研究ng-file-upload可能涉及指令: You can use ng-model or ngf-change instead of specifying function for ng ...

JavaScript之惰性函数

前不久看到javascript的性能优化的这里,有关惰性函数 假如同一个函数有许多判断来检测函数,而我们每一次调用,都会判断检测函数 例如: function addEvent (type, elem ...

洛谷P4198 楼房重建

题意:给定序列,每次修改一个值,求前缀最大值的个数. 解:线段树经典应用. 每个节点维护最大值和该区间前缀最大值个数. 发现我们不用下传标记,只需要合并区间. 需要实现一个函数int ask([l r ...

怎样修改SQL Server 2005/2008的系统存储过程(转)

我们知道,SQL Server 2005/2008的系统存储过程在正常情况下是无法直接修改的. 尽管本文是介绍怎样修改它的,但在这里,我还是建议大家尽量不要去修改它.(好像有点绕哈...) OK,闲话 ...

微信小程序编写新闻阅读列表

微信小程序编写新闻阅读列表 不忘初心,方得始终:初心易得,始终难守. 本篇学习主要内容 Swiper 组件(轮播图) App.json 里的关于导航栏.标题的配置. Page 页面与应用程序的生命周期 ...