HTML5画布（线条、渐变）
绘制直线时，一般会用到moveTo与lineTo两种方法。
案例1：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
function draw(){
var c=document.getElementById("myCanvas");
var cxt= c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(250,100);
cxt.lineTo(10,100);
cxt.stroke();
}
</script>
</head>
<body onload="draw()">
<canvas id="myCanvas" width="300" height="160" style="border: 1px solid #dddddd">您的浏览器不支持</canvas> </body>
</html>
效果图：
注释：
（1）moveTo( x , y );
该方法的作用是将光标移动到指定坐标点，绘制直线的时候以这个坐标点为起点；
（2）lineTo( x , y );
该方法在moveTo方法中指定的直线起点与此参数中指定的直线终点之间绘制一条直线；
绘制线性渐变
案例1：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
function draw(){
var c=document.getElementById("myCanvas");
var cxt= c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#ff0000");
grd.addColorStop(1,"#00ff00");
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50);
}
</script>
</head>
<body onload="draw()">
<canvas id="myCanvas" width="300" height="100" style="border: 1px solid #dddddd">您的浏览器不支持</canvas> </body>
</html> 效果图：
注释：
（1）cxt.createLinearGradient( xStart , yStart , xEnd , yEnd );
xStart为渐变起始地点的横坐标，yStart为渐变起始地点的纵坐标；xEnd为渐变结束地点的横坐标；yEnd为渐变结束地点的纵坐标。
（2）cxt.addColorStop( offset , color );
该方法可以追加渐变的颜色，因为是渐变，所以至少需要使用两次addColorStop方法以追加两个颜色（开始颜色与结束颜色），可以追加多个颜色，例如“从蓝色渐变到白色，然后渐变到绿色”。蓝色起始点坐标到白色终点坐标之间的距离与白色起始点到绿色终点坐标之间的距离相等，这时蓝色的位移量为0，白色的位移量为0.5，绿色的位移量为1。
offset为所设定的颜色离开渐变起始点的偏移量，参数值是一个范围在0到1之间的浮点值，渐变起始点的偏移量为0，渐变结束点的偏移量为1；color为绘制时使用的颜色；
绘制径向渐变
案例1：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
function draw(){
var c=document.getElementById("myCanvas");
var cxt= c.getContext("2d");
var grd=cxt.createRadialGradient(150,150,0,150,150,100);
grd.addColorStop(0.1,"#ff0000");
grd.addColorStop(1,"#00ff00");
cxt.fillStyle=grd;
cxt.fillRect(0,0,400,300);
}
</script>
</head>
<body onload="draw()">
<canvas id="myCanvas" width="320" height="320" style="border: 1px solid #dddddd">您的浏览器不支持</canvas> </body>
</html> 效果图：注释：
（1）cxt.createRadialGradient( xStart , yStart , radiusStart , xEnd , yEnd , radiusEnd );
该方法使用六个参数，xStart为渐变开始圆的圆心横坐标；yStart为渐变开始圆的圆心纵坐标，radiusStart为开始圆的半径，xEnd为渐变结束圆的圆心横坐标，yEnd为渐变结束圆的圆心纵坐标，radiusEnd为结束圆的半径。
在这个方法中，分别指定了两个圆的大小与位置。从第一个圆的圆心处向外进行扩散渐变，一直扩散到第二个圆的外轮廓处。
（2）在设定颜色时，与线性渐变相同，使用addColorStop方法进行设定即可。同样也需要设定0-1之间的浮点数来作为渐变转折点的偏移量。
HTML5画布（线条、渐变）的更多相关文章
- HTML5的渐变色 渐变的两种类型 createLinearGradient 和createRadialGradient
今天又再看了html5的颜色渐变API,发现没有第一次看那么复杂. 不过我对这个颜色渐变存在着一个疑惑就是两种色带之间,那段是属于两种颜色混合的,有点模糊. 比如从红色变成黄色,在红与黄之间的那个地方 ...
- 关于HTML5画布canvas的功能
一.画布的使用 1.首先创建一个画布(canvas) <canvas id=”myCanvas” width=”200” height=”100” style=”border:1px solid ...
- HTML5画布(CANVAS)速查简表
HTML5画布(CANVAS)速查简表 http://www.webhek.com/misc/html5-canvas-cheat-sheet/
- HTML5画布生成的3D飞船舰队效果
在线演示 本地下载 使用HTML5画布2D来模拟3D的空间效果,生成舰队飞行效果,了解如何开发,请阅读下面代码相关“轻视频”: HTML5画布模拟生成3D的舰队飞行效果
- 使用HTML5画布（canvas）生成阴影效果
来源:GBin1.com 使用HTML5的画布特性,我们可以创建图形,在这片文章中,我们将创建图形的阴影. var canvas = document.getElementById('shadowca ...
- 06. Web大前端时代之：HTML5+CSS3入门系列~HTML5 画布
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 我们先看看画布的魅力: 初始画布 canvas默认是宽3 ...
- HTML5 画布参考
描述 HTML5 <canvas> 标签用于绘制图像(通过脚本,通常是 JavaScript). 不过,<canvas> 元素本身并没有绘制能力(它仅仅是图形的容器) - 您必 ...
- html5画布基础
canvas 元素用于在网页上绘制图形. 什么是canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canva ...
- HTML5画布Canvas
一.Canvas概念介绍 1.概念 Canvas : 画布 2.作用 : HTML5 Canvas 元素用于图形的绘制, 通过脚本(通常是JavaScript)来完成.它本身只是个图形容器,必须使用脚 ...
随机推荐
- Ubuntu与Ubuntu系统之间的mount挂载
1.被挂载机 1>安装Ubuntu nfs apt-get install nfs-kernel-server 2>配置/etc/exports Ubuntu nfs允许挂载的目录及权限在 ...
- C++第三课(2013.10.03 )
函数的默认参数: 1.函数的默认参数必须放在形参的右边而且在默认形参的右边不能出现没有无默认参数的形参 2.如果函数的声明给出了默认的参数,那么函数的实现就不能定义默认参 3.声明成员函数时没有给出默 ...
- Android用gif做启动页
公司的一个app的启动页想改为gif图,之前没有在android中加入过gif,所以赶紧饿补! 前言 我们都知道ImageView是不能完美加载Gif格式的图片,如果我们在ImageView中src指 ...
- oracle 主键应用序列和触发器实现自动增长
oracle 主键自动增长 这几天搞Oracle,想让表的主键实现自动增长,查网络实现如下: create table simon_example ( id number(4) not null pr ...
- HTTP缓存机制梳理
一般只对GET类型请求做缓存,对POST不做缓存 缓存协商 指浏览器和Web服务器之间对于是否使用浏览器端缓存的协商.对于较小的文件内容,由于缓存协商仍需要发送请求,所以吞吐率提高不大:但没有正文传输 ...
- TVS＿压敏电阻等保护类器件的布局问题
世上本没有垃圾,垃圾都是放错了位置的资源. 对于电路来说,保护器件就是其保护作用的关键资源,但如果放错了位置,它就是垃圾:甚至不仅是垃圾,而还可能成为祸害. 由最近承接的几起电路原理图审核项目来看,触 ...
- Android String 转 MD5
/** * 将字符串转成16 位MD5值 * * @param string * @return */ public static String MD5(String string) { byte[ ...
- NOI2015 小园丁与老司机
http://uoj.ac/problem/132 这道题前2行的输出比较容易,就是简单的动态规划,然后第3行就是比较少见的有上下界的最小流. 前2行比较容易,我们讨论一下第3行的解法吧. 比如第1个 ...
- Delphi TcxTreelist 设置scrollbars 不起作用的原因
最近设置TcxTreelist的滚动条,发现水平的不起作用, 即使设置 sboth也不起作用. 查找,发现设置的一些属性导致了这个原因, 建立备忘,如下图: 1.属性, 这个页面,设置的表格,怎么也看 ...
- JAVA车票管理系统(简单GUI)
一． 需求分析 1.设计题目:车票管理系统 用JAVA语言和数据结构知识设计设计车票管理系统.要求如下所述: 一车站每天有n个发车班次,每个班次都有一个班次号(1.2.3…n),固定的发车时间, ...