渐变

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. 关于Altium Designer的一些设置

    把原理图设置成A4纸张,是为了便于打印机打印出原理图来 原理图一定一定要和pcb图保持一致,这样是为了以后查找错误方便...

  2. PL/SQL精明的调用栈分析

    PL/SQL精明的调用栈分析 原文:http://www.oracle.com/technetwork/issue-archive/2014/14-jan/o14plsql-2045346.html ...

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

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

  4. 如何编辑SDE数据库（转载）

    转自原文 如何编辑SDE数据库(转载) 如何编辑SDE数据(转自ESRI中国社区) (2008-12-15 17:26:41) 很多刚入门的朋友对SDE数据并不太了解,接二连三的在社区里面发问,有时也 ...

  5. [RxJS] Use RxJS mergeMap to map and merge high order observables

    Like RxJS switchMap() is a shortcut for map() and switch(), we will see in this lesson how mergeMap( ...

  6. js进阶正则表达式14验证邮编（input的pattern属性）（正则表达式加起^始$）

    js进阶正则表达式14验证邮编(input的pattern属性)(正则表达式加起^始$) 一.总结 1.input的pattern属性:里面可以直接放正则表达式,<input type=&quo ...

  7. Powerful Bash-style command line editing for cmd.exe

    https://mridgers.github.io/clink/ Clink Powerful Bash-style command line editing for cmd.exe Downloa ...

  8. [Postgres] Update and Delete records in Postgres

    Delete example: DELETE FROM movies ; Update example: UPDATE movies ;

  9. [Ramda] Refactor to Point Free Functions with Ramda using compose and converge

    In this lesson we'll take some existing code and refactor it using some functions from the Ramda lib ...

  10. 每天一个JavaScript实例-检測表单数据

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...