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知识点为入口,由浅入深的引入实例, 让大家一步一步的体会" ...

随机推荐

【转】浅谈truncate的使用
delete 操作不会改变表的高水标记,因此如果我们对一个表插入1000万条数据,然后再回滚(对insert操作做回滚相当于相应地做delete操作),会使表的高水标记增长得很高,这时虽然我们操作的表 ...
unity 利用ugui 制作技能冷却效果
using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.UI; ...
文件处理命令：sed
使用:sed [-nefr] actionaction:-i直接修改读取的档案内容,而不是由屏幕输出,-r表示支持延伸型正则表达式的语法.动作说明:[n1[,n2]] function n1,n2表示 ...
Data对象
var myDate = new Date(); Date()返回当日的日期例如今天是2016/8/19 getFullYear()返回当前日期的年 myDate.getFullYear() 201 ...
AppDomain 详解（转）
AppDomain是CLR的运行单元,它可以加载Assembly.创建对象以及执行程序. AppDomain是CLR实现代码隔离的基本机制. 每一个AppDomain可以单独运行.停止:每个AppDo ...
tomcat在linux下自启动
Linux下设置tomcat开机自启动一.以root用户登录系统: 二.进入init.d文件夹 cd /etc/init.d/ 三.创建并打开tomcat文件 vi tomcat 四.tomcat ...
Nginx反向代理和负载均衡
一.Nginx反向代理设置从80端口转向其他端口反向代理(Reverse Proxy)方式是指以代理服务器来接受internet上的连接请求,然后将请求转发给内部网络上的服务器,并将从服务器上得到的 ...
Storm 中什么是-acker，acker工作流程介绍
概述我们知道storm一个很重要的特性是它能够保证你发出的每条消息都会被完整处理, 完整处理的意思是指: 一个tuple被完全处理的意思是: 这个tuple以及由这个tuple所导致的所有的tupl ...
iOS tableview自定义cell上添加按钮实现删除功能
在删除的时候,先删除数据源,再删除cell 但是,会发现一直崩: numberOfRowsInSection 解决方案:
Python之路【第五篇】python基础之初识函数（一）和文件管理
转载请注明出处http://www.cnblogs.com/wupeiqi/articles/5453708.html 函数一.背景 ...

HTML5系列：HTML5绘图

1. canvas元素基础

1.1 页面添加canvas元素

1.2 绘制矩形

2. 使用路径

2.1 moveTo与lineTo的用法

2.2 绘制圆形

3. 绘制渐变图形

3.1 绘制线性渐变

3.2 绘制径向渐变

HTML5系列：HTML5绘图的更多相关文章

随机推荐

热门专题