渐变

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. Range锁（也即范围锁）

    浅析SQL Server在可序列化隔离级别下,防止幻读的范围锁的锁定问题 本文出处:http://www.cnblogs.com/wy123/p/7501261.html (保留出处并非什么原创作品权 ...

  2. arm Linux 如何自动检测并mount SD卡，以及如何得知已经mount

    一.土八路做法: SD 卡一旦插入系统,内核会自动在/dev/下创建设备文件:sdcard. 但有时可能时用户在拨出卡前并没有umount的话,第二次插卡进去后系统创建的就不是sdcard设备文件了, ...

  3. Kinect 骨骼映射---Let me dance for U!

    本文章由cartzhang编写,转载请注明出处. 所有权利保留. 文章链接: http://blog.csdn.net/cartzhang/article/details/45583443 作者:ca ...

  4. 使用Verdi理解RTL design

    使用Verdi理解RTL design 接触到一些RTL代码,在阅读与深入理解的过程中的一些思考记录 协议与设计框图 认真反复阅读理解相关协议与设计框图,一个design的设计文档中,设计框图展示了这 ...

  5. 一个神奇的控件——Android CoordinatorLayout与Behavior使用指南

    CoordinatorLayout是support.design包中的控件,它可以说是Design库中最重要的控件. 本文通过模仿知乎介绍了自定义Behavior,通过模仿百度地图介绍了BottomS ...

  6. 学习Numpy

    1.什么是numpy NumPy系统是Python的一种开源的数值计算扩展.这种工具可用来存储和处理大型矩阵,比Python自身的嵌套列表(nested list structure)结构要高效的多( ...

  7. Oracle 12C R2 on Linux 7.X 单实例静默安装文档

    禁用防火墙systemctl stop firewalld.servicesystemctl disable firewalld.service 禁用SELinuxcat /etc/selinux/c ...

  8. 深度理解IIS下部署ASP.NET Core2.1 Web应用拓扑图

    原文:深度理解IIS下部署ASP.NET Core2.1 Web应用拓扑图 IIS部署ASP.NET Core2.1 应用拓扑图 我们看到相比Asp.Net, 出现了3个新的组件:ASP.NET Co ...

  9. [JS Compose] 6. Semigroup examples

    Let's we want to combine two account accidently have the same name. , friends: ['Franklin'] } , frie ...

  10. Java基本数据类型的取值范围

    版权声明:本文为博主原创文章,未经博主允许不得转载. 先看一段代码public class Hello{    public static void main(String[] args){      ...