渐变

Context对象能够通过createLinearGradient()和createRadialGradient()两个方法创建渐变对象。这两个方法的原型例如以下：

Object createLinearGradient(x1, y1, x2, y2);

创建一个从(x1, y1)点到(x2, y2)点的线性渐变对象。

Object createRadialGradient(x1, y1, r1, x2, y2, r2);

创建一个从以(x1, y1)点为圆心、r1为半径的圆到以(x2, y2)点为圆心、r2为半径的圆的径向渐变对象。

渐变对象创建完毕之后必须使用它的addColorStop()方法来加入颜色，该方法的原型例如以下：

void addColorStop(position, color);

当中position表示加入颜色的位置。取值范围为[0, 1]，0表示起点，1表示终点；color表示加入的颜色，取值能够是不论什么CSS颜色值。

渐变对象创建并配置完毕之后就能够将其赋予Context对象的strokeStyle属性或者fillStyle属性，然后绘制的图形就具有了所需的渐变效果。

    那咱们一起看一下以下这个样例：

<!DOCTYPE html>


<html>


	<head>


		<meta charset="utf-8">


		<title></title>


		<style type="text/css">


			canvas{


				left: 50%; position:relative; margin-left: -200px; top;


			}


		</style>


	</head>


	<body>


		<canvas id="drawDiagonal" width="400" height="500" style="border: 1px solid #008B8B;"></canvas>


	</body>


	<script type="text/javascript">


		var canvas=document.getElementById('drawDiagonal');


		var cd=canvas.getContext('2d');


		cd.save();


		cd.translate(-10,350);


		cd.beginPath();


		cd.moveTo(0,0);


		cd.quadraticCurveTo(170,-80,260,-190);


		cd.quadraticCurveTo(310,-250,410,-250);


		cd.strokeStyle='#663300';


		cd.lineWidth=50;


		cd.stroke();


		cd.restore();


		


		var lg = cd.createLinearGradient(80,220,240, 200); //能够尝试改变这里的參数。改变不同的效果。     


        lg.addColorStop(0, 'yellow');      


        lg.addColorStop(0.9, '#3CB371'); 


        lg.addColorStop(1,'#2E8B57');


        cd.fillStyle=lg;//把设置好的颜色值附给cd


        


        cd.strokeStyle ='yellowgreen';


		cd.lineWidth=4;


		cd.lineJoin='round'


		cd.beginPath();


		cd.moveTo(200,40);


		cd.lineTo(160,100);


		cd.lineTo(185,100);


		cd.lineTo(145,160);


		cd.lineTo(170,160);


		cd.lineTo(135,220);


		cd.lineTo(180,220);


		cd.lineTo(170,320);


		cd.lineTo(235,320);


		cd.lineTo(220,220)


		cd.lineTo(260,220);


		cd.lineTo(225,160);


		cd.lineTo(250,160);


		cd.lineTo(210,100);


		cd.lineTo(235,100);


		cd.closePath();


		cd.fill();


		cd.stroke();


	</script>


</html>

其效果例如以下图所看到的：

大家试图去尝试一点点！

在没有明确的地方是能够相互沟通.

版权声明：本文博客原创文章，博客，未经同意，不得转载。

HTML5逐步实现的更多相关文章

  1. 使用HTML5开发Kinect体感游戏

    一.简介 我们要做的是怎样一款游戏? 在前不久成都TGC2016展会上,我们开发了一款<火影忍者手游>的体感游戏,主要模拟手游章节<九尾袭来 >,用户化身四代,与九尾进行对决, ...

  2. 读书笔记：《HTML5开发手册》--HTML5新的结构元素

    读书笔记:<HTML5开发手册> (HTML5 Developer's CookBook) 虽然从事前端开发已有很长一段时间,对HTML5标签也有使用,但在语义化上面理解还不够清晰.之前在 ...

  3. HTML5 Boilerplate - 让页面有个好的开始

    最近看到了HTML5 Boilerplate模版,系统的学习与了解了一下.在各种CSS库.JS框架层出不穷的今天,能看到这么好的HTML模版,感觉甚爽.写篇博客,推荐给大家使用.   一:HTML5 ...

  4. 戏说HTML5

    如果有非技术人员问你,HTML5是什么,你会怎么回答? 新的HTML规范... 给浏览器提供了牛逼能力,干以前不能干的事...(确切地说应该是给浏览器规定了许多新的接口标准,要求浏览器实现牛逼的功能. ...

  5. nw.js桌面软件开发系列 第0.1节 HTML5和桌面软件开发的碰撞

    第0.1节 HTML5和桌面软件开发的碰撞 当我们谈论桌面软件开发技术的时候,你会想到什么?如果不对技术本身进行更为深入的探讨,在我的世界里,有这么多技术概念可以被罗列出来(请原谅我本质上是一个Win ...

  6. Web大前端时代之：HTML5+CSS3入门系列

    准备来一波新技术,待续.... Old: 联系源码:https://github.com/dunitian/LoTHTML5 文档下载:https://github.com/dunitian/LoTD ...

  7. 07. Web大前端时代之：HTML5+CSS3入门系列~H5 地理位置

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 源码:https://github.com/duniti ...

  8. HTML5 介绍

    本篇主要介绍HTML5规范的内容和页面上的架构变动. 目录 1. HTML5介绍 1.1 介绍 1.2 内容 1.3 浏览器支持情况 2. 创建HTML5页面 2.1 <!DOCTYPE> ...

  9. HTML5 语义元素(一)页面结构

    本篇主要介绍HTML5增加的语义元素中关于页面结构方面的,包含: <article>.<aside>.<figure>.<figcaption>.< ...

  10. HTML5 input元素新的特性

    在HTML5中,<input>元素增加了许多新的属性.方法及控件.本文章分别对这三方面进行介绍. 目录 1. 属性 2. 方法 3. 新控件 1. 属性 <input>元素在H ...

随机推荐

  1. POJ 3100 Root of the Problem || 1004 Financial Management 洪水！！！

    水两发去建模,晚饭吃跟没吃似的,吃完没感觉啊. ---------------------------分割线"水过....."--------------------------- ...

  2. Spring中@Async用法详解及简单实例

    Spring中@Async用法 引言: 在Java应用中,绝大多数情况下都是通过同步的方式来实现交互处理的:但是在处理与第三方系统交互的时候,容易造成响应迟缓的情况,之前大部分都是使用多线程来完成此类 ...

  3. 编译pano13的一些注意事项

    作者:朱金灿 来源:error C2037: "jmpbuf"的左侧部分指定未定义的结构/联合"png_struct_def"e:\src\Test\libpa ...

  4. HTML标签的权重

    原文 简书原文:https://www.jianshu.com/p/c86d540aec40 大纲 1.HTML权重标签 2.常见的权重标签 3.常见的权重标签的使用 1.HTML权重标签 SEOer ...

  5. docker 在运行 aspnetcore 镜像时提示 命令找不到

    不要讲路径映射到镜像中的应用根文件夹 例如默认的 /app

  6. 【15.07%】【codeforces 625A】Guest From the Past

    time limit per test 1 second memory limit per test 256 megabytes input standard input output standar ...

  7. jquery-ajax、struts2、json数据问题

    jquery代码: $.ajax({ url:url, type:'post', data:{"key1": "value1", "key2" ...

  8. perl对比两个文件的行

    perl对比两个文件的行 对比两个文件的各行,得到A与B相同的行/A与B不相同的行 主要功能 得到相同行 得到A中包含,B不包含的行 得到B中包含,A中不包含的行 具体执行情况 Perl代码 #!/u ...

  9. ORACLE PL/SQL 中序列(sequence)的简易使用方法介绍

    如果我是C罗 原文 ORACLE PL/SQL 中序列(sequence)的简易使用方法介绍 sequence在ORACLE中应用十分广泛,就是序列号的意思,会自动增加指定变数,如逐次增加1或者2或者 ...

  10. Eclipse 快捷键大全 分类： C_OHTERS 2014-06-01 13:05 332人阅读 评论(0) 收藏

      精选常用: 1.  ctrl+shift+r:打开资源 这可能是所有快捷键组合中最省时间的了.这组快捷键可以让你打开你的工作区中任何一个文件,而你只需要按下文件名或mask名中的前几个字母,比如a ...