HTML5系列：HTML5绘图
1. canvas元素基础
canvas元素是HTML5中新增的一个重要元素，专门用来绘制图形。
在页面中使用canvas元素绘制图形需要经过的三个步骤：
步骤一 使用canvas元素创建一个画布区域，并获取该元素。
步骤二 通过获取的canvas元素，取得该图形元素的上下文环境对象。
步骤三 根据取得的上下文环境对象，在页面中绘制图形或动画。
1.1 页面添加canvas元素
<canvas id="cnvMain" width="500" height="300"></canvas>
1.2 绘制矩形
使用canvas元素绘制矩形的步骤：
1> 获取canvas元素
使用document.getElementById()方法获取canvas对象，需要调用这个对象提供的方法来进行图形绘制。
2> 获取上下文（context）
进行图形绘制时，需要使用图形上下文（graphics context），图形上下文是一个封装了绘图功能的对象。使用canvas对象的getContext()来获得图形上下文。在draw函数中，将参数设置为“2d”。
3> 填充与绘制边框
canvas元素绘制图形的两种方式：填充（fill）与绘制边框（stroke），填充是指填满图形内部，绘制边框是绘制图形的边框。canvas元素结合使用这两种方式来绘制图形。
4> 设置绘图样式（style）
在进行绘制图形时，先要设定好绘图的样式，再调用方法进行图形绘制。
设定填充图形样式：fillStyle填充的样式，在该属性中填入填充的颜色值。
设定图形边框的样式：strokeStyle图形边框的样式，在该属性中填入边框的颜色值。
5> 指定线宽
使用图形上下文对象的lineWidth属性设置图形边框的宽度。在绘制图形的时候，任何直线都可以通过lineWidth属性来指定直线的宽度。
6> 指定颜色值
绘图时填充的颜色或边框的颜色分别通过fillStyle属性与strokeStyle属性来指定。颜色值使用CSS中使用的颜色值。
7> 绘制矩形
分别使用fillRect()与strokeRect()来填充矩形和绘制矩形边框。
context.fillRect(x, y, width, height)
其中，x表示矩形起点x轴与左上角(0, 0)之间的距离，y表示矩形起点y轴与左上角(0, 0)之间的距离，width表示矩形的宽度，height表示矩形的高度。
context.strokeRect(x, y, width, height)
其中x,y为矩形起点坐标，width为矩形宽度，height为矩形高度。
context.clearRect(x, y, width, height)
清空图形中指定区域的像素，清空后的区域为透明色。
HTML代码
<!DOCTYPE html> <html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script type="text/javascript">
window.onload = function () {
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.fillStyle = "#EEEEFF";
context.fillRect(0, 0, 500, 300);
context.fillStyle = "red";
context.strokeStyle = "blue";
context.lineWidth = 1;
context.fillRect(50, 50, 100, 100);
context.strokeRect(50, 50, 100, 100);
}
</script>
</head>
<body>
<canvas id="canvas" width="500" height="300"></canvas>
</body>
</html>
效果图
2. 使用路径
在页面的canvas元素中，调用绘画路径的moveTo()及lineTo()方法可以绘制直线，调用arc()方法可以绘制指定位置与大小的圆形。
2.1 moveTo与lineTo的用法
在canvas元素中，如果要绘制直线，通常使用moveTo()与lineTo()两个方法。moveTo()方法用于将画笔移至指定点并以改点为直线的开始点，调用格式：
context.moveTo(x, y)
其中，x为移至起点的横坐标，y为移至起点的纵坐标。调用该方法后，canvas中即设置了一个绘制直线的开始点。如果是绘制直线还需要调用lineTo()方法，该方法将用画笔从指定的起点坐标与传递的终点坐标参数直接绘制一条直线。调用格式：
context.lineTo(x, y)
其中，x为移至的终点横坐标，y为移至终点的纵坐标。该方法可以反复使用，第一次调用后，画笔自动移至终点坐标位置；第二次调用时，又以该坐标位置作为第二次调用时的起点位置，开始绘制直线。当直线路径绘制完成后，调用stroke()方法在canvas中描边直线路径，最终在canvas中展示直线效果，调用格式：
context.stroke()
stroke()方法无参数，用于绘制完路径后对路径进行描边处理。
HTML代码
<!DOCTYPE html> <html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script type="text/javascript">
window.onload = function () {
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.moveTo(200, 30);
context.lineTo(30, 100);
context.lineTo(200, 200);
context.lineWidth = 1;
context.stroke();
}
</script>
</head>
<body>
<canvas id="canvas" width="500" height="300"></canvas>
</body>
</html>
效果图
设置描边颜色：
context.strokeStyle = "red";
2.2 绘制圆形
在canvas中，使用context对象中的arc()方法描绘圆形路径，以及绘制各种形状的圆形图案，调用格式：
context.arc(x, y, radius, startAngle, endAngle, anticlockwise)
其中，x表示绘制圆形的横坐标，y表示绘制圆形的纵坐标，radius表示绘制圆形的半径，单位为像素，startAngle表示绘制圆弧时开始角度，endAngle表示绘制圆弧时结束的角度，anticlockwise是一个布尔值，表示十分按顺时针绘制，如果为“true”表示按顺时针绘制；如果为“false”，表示按逆时针绘制。如果要绘制一个完整的圆形，startAngle的值为0，表示从0弧度开始，参数endAngle的值为Math.PI * 2，表示到360弧度时结束。如果要绘制一个半圆形，startAngle的值为0，endAngle的值为Math.PI * 1，表示到180弧度时结束。
在调用arc()方法绘制圆形路径之前，需要调用context对象中的beginPath()方法，声明开始绘制路径，调用格式：
context.beginPath()
在使用遍历或循环绘制路径时，每次都要调用该方法，beginPath()方法仅对应单次的路径绘制。
绘制圆形路径完成之后，需要调用closePath()方法，将所绘制完成的路径进行关闭，调用格式：
context.closePath()
closePath()是对应单次的路径绘制，在一般情况下，与beginPath()成对使用。
圆形路径绘制完成之后，并没有真正在canvas元素中展示，需要对路径进行描边或填充。
描边调用context对象的stroke()方法，在调用之前，可以设置边框的颜色与宽度。
context.strokeStyle = "#CCCCCC";
context.lineWidth = 1;
context.stroke();
填充调用context对象的fill()方法，在调用之前，可以设置填充的颜色。
context.fillStyle = "#EEEEEE";
context.fill();
示例
<!DOCTYPE html> <html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script type="text/javascript">
window.onload = function () {
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.beginPath();
context.arc(100, 100, 50, 0, Math.PI * 2, true);
context.closePath();
context.strokeStyle = "#666666";
context.lineWidth = 1;
context.stroke();
}
</script>
</head>
<body>
<canvas id="canvas" width="500" height="300"></canvas>
</body>
</html>
效果图
<!DOCTYPE html> <html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script type="text/javascript">
window.onload = function () {
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.beginPath();
context.arc(100, 100, 50, 0, Math.PI * 2, true);
context.closePath();
context.strokeStyle = "#666666";
context.lineWidth = 1;
context.stroke(); context.fillStyle = "#CCCCCC";
context.fill();
}
</script>
</head>
<body>
<canvas id="canvas" width="500" height="300"></canvas>
</body>
</html>
效果图
<!DOCTYPE html> <html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script type="text/javascript">
window.onload = function () {
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.beginPath();
context.arc(100, 100, 50, 0, Math.PI * 2, true);
context.closePath();
context.strokeStyle = "#666666";
context.lineWidth = 1;
context.stroke(); context.fillStyle = "#CCCCCC";
context.fill(); context.beginPath();
context.arc(175, 100, 50, 0, Math.PI * 2, true);
context.closePath();
context.strokeStyle = "#666666";
context.lineWidth = 1;
context.stroke();
}
</script>
</head>
<body>
<canvas id="canvas" width="500" height="300"></canvas>
</body>
</html>
效果图
3. 绘制渐变图形
3.1 绘制线性渐变
渐变是指在填充时从一种颜色慢慢过渡到另一种颜色。线性渐变时需要使用context对象的createLinearGradient()方法，该方法定义：
context.createLinearGradient(xStart, yStart, xEnd, yEnd)
其中，xStart为渐变起始点的横坐标，yStart为渐变起始点的纵坐标，xEnd为渐变结束点的横坐标，yEnd为渐变结束点的纵坐标。
在LinearGradient对象之后，使用addColorStop()方法进行设定，该方法定义：
context.addColorStop(offset, color)
其中，offset为所设定的颜色离开渐变起始点的偏移量，该参数的值是一个范围在0到1之间的浮点值，渐变起始点的偏移量为0，渐变结束点的偏移量为1。color为绘制时使用的颜色。
因为是渐变，所以至少需要使用两次addColorStop()方法以追加两个颜色，可以追加多个颜色。
接着把fillStyle设定为LinearGradient对象，执行fill()方法填充，可以绘制出渐变图形。
示例
<!DOCTYPE html> <html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script type="text/javascript">
window.onload = function () {
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var gl = context.createLinearGradient(0, 0, 0, 300);
gl.addColorStop(0, "blue");
gl.addColorStop(1, "red");
context.fillStyle = gl;
context.fillRect(0, 0, 500, 300);
}
</script>
</head>
<body>
<canvas id="canvas" width="500" height="300"></canvas>
</body>
</html>
<!DOCTYPE html> <html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script type="text/javascript">
window.onload = function () {
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.beginPath();
context.arc(100, 100, 50, 0, Math.PI * 2, true);
context.closePath();
var gl = context.createLinearGradient(0, 0, 0, 150);
gl.addColorStop(0, "blue");
gl.addColorStop(1, "red");
context.fillStyle = gl;
context.fill();
}
</script>
</head>
<body>
<canvas id="canvas" width="500" height="300"></canvas>
</body>
</html>
效果图
3.2 绘制径向渐变
径向渐变是指沿着圆形的半径方向向外进行扩散的渐变方式，使用context对象的createRadialGradient()方法绘制径向渐变，方法定义：
context.createRadialGradient(xStart, yStart, radiusStart, xEnd, yEnd, radiusEnd)
其中，xStart为渐变开始圆的圆心横坐标，yStart为渐变开始圆的圆心纵坐标，radiusStart为开始圆的半径，xEnd为渐变结束圆的圆心横坐标，yEnd为渐变结束圆的圆心纵坐标，radiusEnd为结束圆的半径。
<!DOCTYPE html> <html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script type="text/javascript">
window.onload = function () {
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var gnt = context.createRadialGradient(30, 30, 0, 20, 20, 400);
gnt.addColorStop(0, "#000000");
gnt.addColorStop(0.3, "#EEEEEE");
gnt.addColorStop(1, "#FFFFFF");
context.beginPath();
context.arc(125, 95, 80, 0, Math.PI * 2, true);
context.closePath();
context.fillStyle = gnt;
context.fill(); context.beginPath();
context.arc(125, 95, 80, 0, Math.PI * 2, true);
context.closePath();
context.strokeStyle = "#666666";
context.lineWidth = 1;
context.stroke();
}
</script>
</head>
<body>
<canvas id="canvas" width="500" height="300"></canvas>
</body>
</html>
效果图
HTML5系列：HTML5绘图的更多相关文章
- HTML5系列一（属性概述）
HTML5概述 HTML5於2004年被WHATWG(网页超文本技术工作小组)提出,於2007年被W3C接纳 在2008年1月22日,第一份正式草案已公布.WHATWG表示该规范是目前正在进行的工作, ...
- 初学HTML5系列一：简单介绍
最近很闲,就想着学点东西,然后就瞄中了html5,以前只看过很简单的一些,这次是系统的学下,顺便也记录下.废话不多说,开始正题. 稍微介绍下html5,html5是W3C和WHATWG 合作的结果. ...
- HTML5之一HTML5简介
1.什么是HTML5? HTML5是HTML的新一代标准.以前版本的HTML标准4.01发布于1999. 自1999年以后,web已经有了翻天覆地的变化. 实际上HTML5仍旧是开发中的一个标准.但是 ...
- html5，html5教程
html5,html5教程 1.向后兼容 HTML5是这样被定义的:能向后兼容目前UA处理内容的方式.为了让语言更简单,一些老的元素和Attribute被舍弃.比如一些纯粹用于展现的元素(译注:即非语 ...
- 06. Web大前端时代之：HTML5+CSS3入门系列~HTML5 画布
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 我们先看看画布的魅力: 初始画布 canvas默认是宽3 ...
- 04. Web大前端时代之：HTML5+CSS3入门系列~HTML5 表单
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 一.input新增类型: 1.tel:输入类型用于应该包 ...
- HTML5系列目录
1. HTML5与HTML4的区别 2. HTML5结构 3. HTML5表单 4. HTML5文件 5. HTML5绘图 6. HTML6本地存储
- 大熊君学习html5系列之------Online && Offline（在线状态检测）
一,开篇分析 Hi,大家好,给大家拜个晚年!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例,让大家一步一步的 ...
- 大熊君学习html5系列之------requestAnimationFrame（实现动画的另一种方案）
一,开篇分析 Hi,大家好!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例, 让大家一步一步的体会" ...
随机推荐
- 测试--easymock的使用
使用场景:对于调用其它类中的方法,但是还没有编写完,使用easymock进行单元测试,它提供这些没有编写完的代码期待的默认值. 使用步骤: step1: pom引入: <dependency&g ...
- svn的牛逼操作反向merge
反向merge,轻松回滚.
- JavaScript 中string方法
注意:JavaScript的字符串是不可变的(immutable),String类定义的方法不能改变原来字符串内容,例如String.toUpperCase()这样的方法,返回的是全新的字符串,而不是 ...
- MLlib决策树与集成树
决策树是一种常见的分类与回归机器学习算法,由于其模型表达性好,便于理解,并能取得较好的效果,而受到广泛的应用.下图是一个简单的决策树,决策树每个非叶子节点包含一个条件,对于具有连续值的特征,该条件为一 ...
- Redis 的安装与使用(linux)
官方教程:http://www.redis.io/download 1.下载Redis # wget http://download.redis.io/releases/redis-3.0.4.tar ...
- <十二>JDBC_批量处理
import java.sql.Connection;import java.sql.PreparedStatement;import org.junit.Test;import com.kk.jdb ...
- centos7安装mysql5.7
http://jingyan.baidu.com/album/93f9803f010d8fe0e56f555e.html?picindex=15
- java学习中的一些疑惑解答
一.java中的枚举类型: 在实际编程中,往往存在着这样的"数据集",它们的数值在程序中是稳定的,而且"数据集"中的元素是有限的.例如星期一到星期日七个数据元素 ...
- SqlServer游标简介
游标实例: Declare MyCusror Cursor Scroll For Select * From Master_Goods Order By GoodsID Ope ...
- 在 IIS 7.5 中，应用程序池有两种运行模式：集成模式和经典模式。
应用程序池模式会影响服务器处理托管代码请求的方式. 如果托管应用程序在采用集成模式的应用程序池中运行,服务器将使用 IIS 和 ASP.NET 的集成请求处理管道来处理请求. 如果托管应用程序在采用经 ...