渐变

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. 0、驱动及应用小技巧、uboot指令及环境变量配置、linux常用命令

    (内核make menuconfig之后,通过insmod安装的驱动都应该重新make,可能会出现一些莫名的问题) (nor flash/SDRAM/DM9000都受内存控制器控制,需要配置内存控制器 ...

  2. 解读Java中BigDecimal.ZERO.compareTo()的返回值含义

    Java compareTo() 用法 例如: public static void main(String[] args) {     BigDecimal bnum1, bnum2; bnum1 ...

  3. 数据库中substring的用法 CONVERT(varchar(12) , getdate(), 112 )

    Sqlserver中常常要操作一些时间类型的字段转换,我又不太记得住,所以搜集了下面的一些SqlserverConvertDateTime相关的资料发表在自己的小站里,方便自己以后要用的时候寻找,望对 ...

  4. Setup iOS Development Environment.

    Setup iOS Development Environment Install XCode and check-out source code from SVN XCode Please find ...

  5. Sift算子特征点提取、描述及匹配全流程解析

    Sift之前的江湖 在Sift横空出世之前,特征点检测与匹配江湖上占据霸主地位的是角点检测家族.先来探究一下角点家族不为人知的恩怨情仇. 角点家族的族长是Moravec在1977年提出的Moravec ...

  6. PHP CodeBase: 判断用户是否手机访问

    随着移动设备的普及,网站也会迎来越来越多移动设备的访问.用适应PC的页面,很多时候对手机用户不友好,那么有些时候,我们需要判断用户是否用手机访问,如果是手机的话,就跳转到指定的手机友好页面.这里就介绍 ...

  7. [网络管理]windows server backup

    ERPserver每天备份与每月1号备份数据.备份到本机.从备份安全机制来说这是远远不够的.故是否能定期备份数据文件到另外一台server呢?(异地备份) windows server 提供了serv ...

  8. 【hdu 3951】Coin Game

    Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submission(s) ...

  9. 【t019】window(单调队列)

    Time Limit: 2 second Memory Limit: 256 MB [问题描述] 给你一个长度为N 的数组,一个长为K的滑动的窗体从最左移至最右端,你只能见到窗口的K个数,每次窗体向右 ...

  10. Eclipse离线单独安装hibernate tools成功率低

    原因:单独下载的hibernate tools插件应该缺少部分需要的组件,安装时,边联网,成功率很低 解决方法:下载jboss tools的全插件包,安装时,只选择hibernate tools插件可 ...