HTML5火的正热，最近有个想法也是要用到HTML的相关功能，所以也要好好学习一把。

好好看了一下Canvas的功能，感觉HTML5在客户端交互的功能性越来越强了，今天看了一下Canvas绘图，下边是几个实例，记下以备后用。

1、使用Canvas绘制直线：

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

<canvas style=" border: 1px solid #333333; margin:0 auto;display: block" id="canvas"></canvas>

<script>

    function $$(id){

        return document.getElementById(id);

    }

    window.onload = function(){

        var can = $$('canvas');

        var cans = can.getContext('2d');

        canvas.width=500;

        canvas.height=300;

        cans.moveTo(20,30);//第一个起点

        cans.lineTo(120,90);//第二个点

        cans.lineTo(220,60);//第三个点（以第二个点为起点）

        cans.lineWidth=3;

        cans.strokeStyle = 'red';

        cans.stroke();

    }

</script>

</body>

</html>
这里用到的两个API方法，moveTo和lineTo分别是线段的起点和终点坐标，lineWidth为路径线段的宽度，变量为（X坐标,Y坐标）,strokeStyle、stroke分别路径绘制样式和绘制路径。

2、绘制渐变线条

渐变线条就是颜色有渐变的效果，当然渐变的样式可以遵循路径的方向也可以不遵循路径的方向：

<!doctype html>

<html>

    <head>

        <meta charset="UTF-8">

    </head>

    <style type="text/css">

        canvas{border:dashed 2px #CCC}

    </style>

    <script type="text/javascript">

        function $$(id){

            return document.getElementById(id);

        }

        function pageLoad(){

            var can = $$('can');

            var cans = can.getContext('2d');

            cans.moveTo(0,0);

            cans.lineTo(400,300);

            var gnt1 = cans.createLinearGradient(0,0,400,300);//线性渐变的起止坐标

            gnt1.addColorStop(0,'red');//创建渐变的开始颜色，0表示偏移量，个人理解为直线上的相对位置，最大为1，一个渐变中可以写任意个渐变颜色

            gnt1.addColorStop(1,'yellow');

            cans.lineWidth=3;

            cans.strokeStyle = gnt1;

            cans.stroke();

        }

    </script>

    <body onload="pageLoad();">

        <canvas id="can" width="400px" height="300px">4</canvas>

    </body>

</html>

3、绘制矩形或正方形：

这种矩形框如果使用HTML4只能使用后台代码才能生成了，现在HTML5提供的Canvas功能却很容易就能绘制，所以说HTML5的优越性是相当高的。

<!doctype html>

<html>

    <head>

        <meta charset="UTF-8">

    </head>

    <style type="text/css">

        canvas{border:dashed 2px #CCC}

    </style>

    <script type="text/javascript">

        function $$(id){

            return document.getElementById(id);

        }

        function pageLoad(){

            var can = $$('can');

            var cans = can.getContext('2d');

            cans.fillStyle = 'yellow';

            cans.fillRect(30,30,340,240);

        }

    </script>

    <body onload="pageLoad();">

        <canvas id="can" width="400px" height="300px">4</canvas>

    </body>

</html>

这里使用了一个方法——fillRect（）从字面意思也能知道这个就是填充一个矩形，这里的参数值得说明一下fillRect(X,Y,Width,Height)，这个和数学里的坐标是不一样的，具体请看

这里的X，Y是相对Canvas左上角的起点开始的，谨记！！

4、绘制一个简单的矩形框

上例中讲到要绘制一个矩形块，填充了颜色，这个例子只是简单地绘制一个矩形而不实现填充效果。

<!doctype html>

<html>

    <head>

        <meta charset="UTF-8">

    </head>

    <style type="text/css">

        canvas{border:dashed 2px #CCC}

    </style>

    <script type="text/javascript">

        function $$(id){

            return document.getElementById(id);

        }

        function pageLoad(){

            var can = $$('can');

            var cans = can.getContext('2d');

            cans.strokeStyle = 'red';

            cans.strokeRect(30,30,340,240);

        }

    </script>

    <body onload="pageLoad();">

        <canvas id="can" width="400px" height="300px">4</canvas>

    </body>

</html>

这个很简单，和上例一样，就是将fill替换成了stroke，具体详见上例。

5、绘制一个线性渐变的矩形

渐变是填充的一种相当不错的效果，结合实例2和实例3，我们可以创建一个渐变的矩形

<!doctype html>

<html>

    <head>

        <meta charset="UTF-8">

    </head>

    <style type="text/css">

        canvas{border:dashed 2px #CCC}

    </style>

    <script type="text/javascript">

        function $$(id){

            return document.getElementById(id);

        }

        function pageLoad(){

            var can = $$('can');

            var cans = can.getContext('2d');

            var gnt1 = cans.createLinearGradient(10,0,390,0);

            gnt1.addColorStop(0,'red');

            gnt1.addColorStop(0.5,'green');

            gnt1.addColorStop(1,'blue');

            cans.fillStyle = gnt1;

            cans.fillRect(10,10,380,280);

        }

    </script>

    <body onload="pageLoad();">

        <canvas id="can" width="400px" height="300px">4</canvas>

    </body>

</html>

不解释了，记住fillRect（X,Y,Width,Height）就行了。

6、填充一个圆形

圆形的用途很广，当然也包含了椭圆。

<!doctype html>

<html>

    <head>

        <meta charset="UTF-8">

    </head>

    <style type="text/css">

        canvas{border:dashed 2px #CCC}

    </style>

    <script type="text/javascript">

        function $$(id){

            return document.getElementById(id);

        }

        function pageLoad(){

            var can = $$('can');

            var cans = can.getContext('2d');

            cans.beginPath();

            cans.arc(200,150,100,0,Math.PI*2,true);

            cans.closePath();

            cans.fillStyle = 'green';//本来这里最初使用的是red，截图一看，傻眼了，怕上街被爱国者打啊，其实你懂的~~

            cans.fill();

        }

    </script>

    <body onload="pageLoad();">

        <canvas id="can" width="400px" height="300px">4</canvas>

    </body>

</html>

这里的arc方法的用法是 arc(X,Y,Radius,startAngle,endAngle,anticlockwise),意思是（圆心X坐标，圆心Y坐标，半径，开始角度（弧度），结束角度弧度，是否按照顺时针画）；

arc中各参数比较：

a、cans.arc(200,150,100,0,Math.PI,true);



c、cans.arc(200,150,100,0,Math.PI/2,true);




c、cans.arc(200,150,100,0,Math.PI/2,true);




d、cans.arc(200,150,100,0,Math.PI/2,false);




 7、圆形区块








<!doctype html>

<html>

    <head>

        <meta charset="UTF-8">

    </head>

    <style type="text/css">

        canvas{border:dashed 2px #CCC}

    </style>

    <script type="text/javascript">

        function $$(id){

            return document.getElementById(id);

        }

        function pageLoad(){

            var can = $$('can');

            var cans = can.getContext('2d');

            cans.beginPath();

            cans.arc(200,150,100,0,Math.PI*2,false);

            cans.closePath();

            cans.lineWidth = 5;

            cans.strokeStyle = 'red';

            cans.stroke();

        }

    </script>

    <body onload="pageLoad();">

        <canvas id="can" width="400px" height="300px">4</canvas>

    </body>

</html>






这里不解释了，和上边的例子相同，lineWidth是控制线条的宽度的。


8、圆形渐变








<!doctype html>

<html>

    <head>

        <meta charset="UTF-8">

    </head>

    <style type="text/css">

        canvas{border:dashed 2px #CCC}

    </style>

    <script type="text/javascript">

        function $$(id){

            return document.getElementById(id);

        }

        function pageLoad(){

            var can = $$('can');

            var cans = can.getContext('2d');

            var gnt = cans.createRadialGradient(200,300,50,200,200,200);

            gnt.addColorStop(1,'red');

            gnt.addColorStop(0,'green');

            cans.fillStyle = gnt;

            cans.fillRect(0,0,800,600);

        }

    </script>

    <body onload="pageLoad();">

        <canvas id="can" width="800px" height="600px">4</canvas>

    </body>

</html>








这里需要说明的是createRadialGradient方法，参数有（Xstart,Ystart,radiusStart,XEnd,YEnd,radiusEnd），也就是说，它在实行渐变时，使用了两个圆，一个是原始的圆，一个是渐变式圆，其实，这种通过坐标与半径控制的方式可以实现很多样式，比如


立体圆






var gnt = cans.createRadialGradient(200,150,0,200,50,250);

gnt.addColorStop(0,'red');

gnt.addColorStop(1,'#333');


												


											
HTML5之Canvas绘图(一) ——基础篇的更多相关文章
	

    
								
  1. HTML5之Canvas绘图(二) ——应用篇之七巧板
		
    1.canvas绘制七巧板-- <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&g ...
    
		
    2. 
						
  2. HTML5之Canvas绘图——使用Canvas绘制图形的基本教程
		
    原文转自:http://www.cnblogs.com/picaso/archive/2012/11/26/2789077.html HTML5火的正热,最近有个想法也是要用到HTML的相关功能,所以 ...
    
		
    3. 
						
  3. 【HTML5】Canvas绘图详解-1
		
    ----->Canvas绘制基础 1,线条绘制 1-1,线条组成的图形和beginPath 案例:绘制由不同颜色的线条组成的图案 1-2,多边形的填充和closePath 案例:绘制封闭具有填充 ...
    
		
    4. 
						
  4. R 基础绘图体系-基础篇
		
    1.高水平绘图函数 生成数据 #模拟100位同学学号及三科成绩 num = seq(12340001,12340100) # 形成学号 x1 = round(runif(100,min = 80,ma ...
    
		
    5. 
						
  5. HTML5之Canvas绘图实例——饼状图
		
    实现饼状分布画图(如下):调试环境:Firefox
    
		
    6. 
						
  6. HTML5之Canvas绘图实例——曲线图
		
    实现正弦.余弦和正切函数画图(如下图):调试环境:Firefox
    
		
    7. 
						
  7. HTML5七巧板canvas绘图（复习）
		
    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
    
		
    8. 
						
  8. HTML5七巧板canvas绘图
		
    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
    
		
    9. 
						
  9. canvas绘图基础
		
    <canvas>元素是HTML5中的绘图元素,通过定义一个画布区域,然后使用javascript动态地在这个区域里面绘制图形,对于2D和3D图形都可以绘制,我们将其分成2D上下文和WebG ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. JavaScript (JS)基础：DOM 浅析 (含数组Array、字符串String基本方法解析)
			
    ①文本对象document: 例如:document.getElementById()    只获取一个对象          document.getElementsByTagName()   获取 ...
    
			
    2. 
						
  2. 读扇区错误:0柱面0磁头1扇区(硬盘问题，蓝屏等 0x0000007B)
			
    原文发布时间为:2010-05-25 -- 来源于本人的百度文章 [由搬家工具导入] 读扇区错误:0柱面0磁头1扇区(硬盘问题，蓝屏等 0x0000007B) DISKGEN能找到,那就没什么大问题的 ...
    
			
    3. 
						
  3. scrapy实战
			
    采用scrapy实现对股票网站的爬取 功能描述: 技术路线:scrapy 目标:获取上交所和深交所所有股票名称和交易信息并存储 实例编写: 步骤1:建立工程和spider爬虫模板 步骤2:编写spid ...
    
			
    4. 
						
  4. HDU4757 Tree(可持久化Trie)
			
    写过可持久化线段树,但是从来没写过可持久化的Trie,今天补一补. 题目就是典型的给你一个数x,和一个数集,问x和里面的某个数xor起来的最大值是多少. 最原始的是数集是固定的,只需要对数集按照高到低 ...
    
			
    5. 
						
  5. 2014年国内最热门的.NET开源平台
			
    http://developer.51cto.com/art/201501/464292.htm
    
			
    6. 
						
  6. DB2 数据库中字段特定字符替换为空
			
    Update RM_CarInfo set ImportTitle = Replace(ImportTitle,'ZD','') WHERE ImportTitle LIKE'%ZD%';
    
			
    7. 
						
  7. 常用公共DNS服务器地址
			
    DNS,全称Domain Name System,即域名解析系统,帮助用户在互联网上寻找路径,它在互联网的作用是把域名转换成为网络可以识别的IP地址.目前国内电信运营商通过使用DNS劫持和DNS污染的 ...
    
			
    8. 
						
  8. Topcoder SRM 666 DIV 1
			
    WalkOverATree 题意:给你一棵树,有个人在节点0,现在问你,这个人走L步,最多能访问多少个不同的节点,一个节点可以被走多次,但只算一次. 题解:这个问题的关键在于,每个点最多走两次,这是因 ...
    
			
    9. 
						
  9. 查询执行慢的SQL
			
    --执行慢的SQL: SELECT S.SQL_TEXT, S.SQL_FULLTEXT, S.SQL_ID, ROUND(ELAPSED_TIME / 1000000 / (CASE WHEN (E ...
    
			
    10. 
						
  10. hdu1874最短路
			
    裸裸的最短路问题,将while(scanf("%d%d", &N, &M)!=EOF)粗心写为while(scanf("%d%d", & ...
    
			
    11.