渐变

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 2014 Flow Layout 模拟

    http://poj.org/problem?id=2014 嘻嘻2014要到啦,于是去做Prob.ID 为2014的题~~~~祝大家新年快乐~~ 题目大意: 给你一个最大宽度的矩形,要求把小矩形排放 ...

  2. [React] Use React.cloneElement to Modify and Add Additional Properties to React Children

    In this lesson we'll show how to use React.cloneElement to add additional properties to the children ...

  3. thinkphp5 tp5 七牛云 上传图片

    七牛sdk地址https://files.cnblogs.com/files/zonglonglong/qiniu-php-sdk-7.2.2.rar 首先下载php的sdk将文件夹放到vendor ...

  4. IfSpeed 带宽计算

    http://www.360doc.com/content/11/0304/22/2614615_98214710.shtml http://www.cisco.com/support/zh/477/ ...

  5. session了解及超时处理

    Session了解 Session是什么 引言     在web开发中,session是个非常重要的概念.在许多动态网站的开发者看来,session就是一个变量,而且其表现像个黑洞,他只需要将东西在合 ...

  6. 小强的HTML5移动开发之路（45）——汇率计算器【1】

    这两天看了<PhoneGap实战>上面有一个汇率计算器的例子,个人觉得比较好,就拿出来和大家分享一下,在接下来的几篇文章中我们来一起完成这个PhoneGap + Jquery mobile ...

  7. 项目中使用了个quartz包，启动时提示Quartz version update check failed

    <span style="font-family: Arial, Helvetica, sans-serif;">2015-09-13 00:12:02 Abstrac ...

  8. 微信公众号开发之怎样将本机IP映射成外网域名

    近期一个项目须要用到微信公众号的网页授权登录,在研究这个公众号的时候遇到各种困难,现将自己的一些心得总结一下. 我想进行微信公众号开发遇到的第一个困难就是微信公众号必须输入一个外网能够訪问的域名,在网 ...

  9. [React] displayName for stateless component

    We can use 'displayName' on component to change its component tag in dev tool: import React from 're ...

  10. gdal库对ENVI文件的一点支持不好

    作者:朱金灿 来源:http://blog.csdn.net/clever101 使用GDALOpen函数打开ENVI的img文件,如果使用更新的方式即GA_Update会改写对应的hdr文件.改写h ...