原文地址：http://www.cnblogs.com/picaso/archive/2012/11/26/2789077.html

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

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

1、使用Canvas绘制直线：

<!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(20,30);//第一个起点

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

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

            cans.lineWidth=;

            cans.strokeStyle = 'red';

            cans.stroke();

        }

    </script>

    <body onload="pageLoad();">

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

    </body>

</html>

这里用到的两个API方法，moveTo和lineTo分别是线段的起点和终点坐标，变量为（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,);

        }

    </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,);

        }

    </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,);

        }

    </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');


												


											
使用Canvas绘制图形的基本教程的更多相关文章
	

    
								
  1. HTML5之Canvas绘图——使用Canvas绘制图形的基本教程
		
    原文转自:http://www.cnblogs.com/picaso/archive/2012/11/26/2789077.html HTML5火的正热,最近有个想法也是要用到HTML的相关功能,所以 ...
    
		
    2. 
						
  2. html5 Canvas绘制图形入门详解
		
    html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome. ...
    
		
    3. 
						
  3. HTML5—canvas绘制图形（1）
		
    1.canvas基础知识 canvas元素是HTML5中新增的一个重要的元素,专门用来绘制图形,不过canvas本身不具备画图的能力,在页面中放置了canvas元素,就相当于在页面中放置了一块矩形的“ ...
    
		
    4. 
						
  4. canvas 绘制图形
		
    canvas 绘制图形: 注意: canvas 的宽高设置在行内,否则会使画布(canvas)产生扭曲,绘图变形: <!DOCTYPE html> <html lang=" ...
    
		
    5. 
						
  5. Canvas绘制图形
		
    1.Canvas绘制一个蓝色的矩形 <!DOCTYPE html> <html> <head lang="en"> <meta chars ...
    
		
    6. 
						
  6. [Selenium] 操作 HTML5 中的 Canvas 绘制图形
		
    测试 http://literallycanvas.com/ 以 Chrome Driver 为例阐述,通过 Actions 在 Canvas 上绘制一个封闭图形.对于 Canvas 上的操作,推荐  ...
    
		
    7. 
						
  7. HTML5 canvas绘制图形
		
    demo.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
    
		
    8. 
						
  8. HTML5使用Canvas来绘制图形
		
    一.Canvas标签: 1.HTML5<canvas>元素用于图形的绘制,通过脚本(通常是javascript)来完成. 2.<canvas>标签只是图形容器,必须使用脚本来绘 ...
    
		
    9. 
						
  9. 使用html5 canvas绘制图片
		
    注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 多图上传 - Web Uploader
			
    http://fex.baidu.com/webuploader/   官方DEMO,我都不想说了,各种问题.参考ShuaiBi文章   http://www.cnblogs.com/ismars/p ...
    
			
    2. 
						
  2. Bootstrap 排版 笔记
			
    Bootstrap 使用 Helvetica Neue. Helvetica. Arial 和 sans-serif 作为其默认的字体栈. 使用 Bootstrap 的排版特性,您可以创建标题.段落. ...
    
			
    3. 
						
  3. 【PHP绘图技术&&验证码绘制】
			
    PHP绘图是比较简单的事情,基本绘图如直线.圆.矩形.弧线.填充矩形.填充扇形.非中文字的打印.中文文字的打印在在下面的代码中会纤细讲解. 需要支持中文的字体,可以到windows自带的字体库中找,并 ...
    
			
    4. 
						
  4. VC++中字符串编码的转换
			
    在以前VC++6.0中默认的字符集是多字节字符集(MBCS:Multi-Byte Character Set),而VS2005及以后默认的字符集是Unicode,这样导致以前在VC6.0中非常简单实用 ...
    
			
    5. 
						
  5. phpcms v9最常用的22个调用代码
			
    新源网络工作室友情总结phpcms v9最常用的22个调用代码: 调用最新文章,带所在版块{pc:get sql="SELECT a.title, a.catid, b.catid, b.c ...
    
			
    6. 
						
  6. 几个国内速度最快的centos yum(更新源)
			
    转自:http://blog.itpub.net/15711267/viewspace-1068862/ 中国科技大学源 cd /etc/yum.repos.d mv CentOS-Base.repo ...
    
			
    7. 
						
  7. win7-32 系统 + VS2010 配置 glew
			
    网上下载的程序,运行时报错:  C1083: 无法打开包括文件:“gl\glew.h”: No such file or directory. 百度一下,发现需要配置 glew 库. 方法如下: 下载 ...
    
			
    8. 
						
  8. 使用 json_in_java
			
    // */ // ]]> java_in_json Table of Contents 1. Java 使用 Json 1.1. 下载地址: 1.2. 构造 json 字符串 1.3. 解析 j ...
    
			
    9. 
						
  9. .htaccess是什么？.htaccess几个简单应用
			
    .htaccess是什么? .htaccess叫分布式配置文件,它提供了针对目录改变配置的方法——在一个特定的文档目录中放置一个包含一个或多个指令的文件, 以作用于此目录及其所有子目录.并且子目录中的 ...
    
			
    10. 
						
  10. 苹果推送(APNs)ios push小结
			
    把app删除后就推送不成功了,可以看出deviceToken应该是设备+app来一起识别的,重新安装后仍然为同一个 简介 推送服务APNs(Apple Push Notification servic ...
    
			
    11.