来自：http://blog.csdn.net/dawanganban/article/details/17686039

在前面提到Canvas是HTML5中一个重要特点，canvas功能非常强大,用photoshop可以实现的效果canvas也同样可以实现，下面我们用canvas实现基本图形的绘制。

一、Canvas标签的使用

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. </head>
  6. <body>
  7. <canvas id="1" width="200" height="200" style="border:1px solid red"></canvas>
  8. </body>
  9. </html>


可以看到Canvas就像一块画布，我们可以在这个画布上面绘制我们需要的图形。canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成。

二、画矩形

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. </head>
  6. <body>
  7. <canvas id="1" width="500" height="500" style="border:1px solid red" onmousemove="mousexy(envent)"></canvas>
  8. </body>
  9. <script type="text/javascript">
  10. var c=document.getElementById('1');
  11. var p=c.getContext("2d");
  12. <span style="white-space:pre">  </span>//getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
  13. p.fillStyle="#FF0000";
  14. p.fillRect(0, 0, 300, 300);
  15. p.fillStyle="rgba(0,0,255,0.5)";
  16. p.fillRect(200,200,500,500);
  17. </script>
  18. </html>


三、画线条

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. </head>
  6. <body>
  7. <canvas id="1" width="200" height="200" style="border:1px solid red" onmousemove="mousexy(envent)"></canvas>
  8. </body>
  9. <script type="text/javascript">
  10. var c=document.getElementById('1');
  11. var p=c.getContext("2d");
  12. p.moveTo(10,10);
  13. p.lineTo(150,50);
  14. p.lineTo(10,50);
  15. p.stroke();
  16. </script>
  17. </html>


四、画圆形

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. </head>
  6. <body>
  7. <canvas id="1" width="200" height="200" style="border:1px solid red" onmousemove="mousexy(envent)"></canvas>
  8. </body>
  9. <script type="text/javascript">
  10. var c=document.getElementById('1');
  11. var p=c.getContext("2d");
  12. p.fillStyle="#FF0000";
  13. p.beginPath();
  14. p.arc(80,80,15,0,Math.PI*2,true);
  15. p.closePath();
  16. p.fill();
  17. </script>
  18. </html>



五、渐变

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. </head>
  6. <body>
  7. <canvas id="1" width="200" height="200" style="border:1px solid red" onmousemove="mousexy(envent)"></canvas>
  8. </body>
  9. <script type="text/javascript">
  10. var c=document.getElementById("1");
  11. var cxt=c.getContext("2d");
  12. var grd=cxt.createLinearGradient(0,0,175,50);
  13. grd.addColorStop(0,"#FF0000");
  14. grd.addColorStop(1,"#00FF00");
  15. cxt.fillStyle=grd;
  16. cxt.fillRect(0,0,175,50);
  17. </script>
  18. </html>


六、绘制图片

  1. <!DOCTYPE HTML>
  2. <html>
  3. <body>
  4. <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
  5. Your browser does not support the canvas element.
  6. </canvas>
  7. <script type="text/javascript">
  8. var c=document.getElementById("myCanvas");
  9. var cxt=c.getContext("2d");
  10. var img=new Image()
  11. img.src="/i/eg_flower.png"
  12. cxt.drawImage(img,0,0);
  13. </script>
  14. </body>
  15. </html>


七、多边形

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. </head>
  6. <body>
  7. <canvas id="1" width="200" height="200" style="border:1px solid red" onmousemove="mousexy(envent)"></canvas>
  8. </body>
  9. <script type="text/javascript">
  10. var c=document.getElementById('1');
  11. var p=c.getContext("2d");
  12. p.fillStyle="#FF0000";
  13. p.moveTo(10,10);
  14. p.lineTo(150,50);
  15. p.lineTo(10,50);
  16. p.lineTo(20,30);
  17. p.fill();
  18. </script>
  19. </html>

小强的HTML5移动开发之路（6）——Canvas图形绘制基础的更多相关文章

  1. 小强的HTML5移动开发之路（33）—— jqMobi基础

    一.什么是jqMobi jqMobi是由appMobi针对HTML5浏览器和移动设备开发的javascript框架,是个极快速的查询选择库,支持W3C查询. 版本 jqMobi源码最初在2012年1月 ...

  2. 小强的HTML5移动开发之路（37）——jqMobi快速入门

    在<小强的HTML5移动开发之路(33)-- jqMobi基础>中我们了解了什么是jqMobi,并从官方下载了jqMobi开发包,下载后解压目录如下: 拷贝上面的/css目录./plugi ...

  3. 小强的HTML5移动开发之路（18）——HTML5地理定位

    来自:http://blog.csdn.net/dawanganban/article/details/18192091 在前面的<小强的HTML5移动开发之路(2)--HTML5的新特性> ...

  4. 小强的HTML5移动开发之路（14）——Video标签详解

    来自:http://blog.csdn.net/dawanganban/article/details/18180605 在前面的小强的HTML5移动开发之路(5)--制作一个漂亮的视频播放器中制作了 ...

  5. 小强的HTML5移动开发之路（13）——HTML5中的全局属性

    来自:http://blog.csdn.net/dawanganban/article/details/18179483 一.accssskey  快捷键 <!DOCTYPE HTML> ...

  6. 小强的HTML5移动开发之路（11）——链接，图片，表格，框架

    来自:http://blog.csdn.net/dawanganban/article/details/18098193 一.HTML是什么? HTML(hypertext mark-uplangua ...

  7. 小强的HTML5移动开发之路（42）——HTML4与HTML5文档结构比较

    一般来说,人们在书写包括HTML在内的文档时,习惯上按照类似于"章--节--小节"这样的层次结构来进行. 在HTML4中的描述方式: <html> <head&g ...

  8. 小强的HTML5移动开发之路（12）——从一个多媒体标签说起

    来自:http://blog.csdn.net/dawanganban/article/details/18136813 一.视频播放 <html> <head> <ti ...

  9. 小强的HTML5移动开发之路（3）——HTML5与HTML4比较

    来自:http://blog.csdn.net/dawanganban/article/details/17652873 在前面介绍了HTML5的新特性,新标签的使用,智能表单设计,引入多媒体对象,C ...

随机推荐

  1. python脚本文件传参并通过token登录后爬取数据实例

    from bs4 import BeautifulSoup import requests import sys class Zabbix(object): def __init__(self, he ...

  2. Rails在MacOS上搭建Heroku部署环境

    heroku只是用postgresql,而不能兼容sqlite数据库.所以很重要的一步就是在部署实际产品的时候将数据库类型修改为postgresql,否则你将无法push到heroku上去. hero ...

  3. linux网络编程之一-----多播（组播）编程

    什么是多播 组播(Multicast)是网络一种点对多(one to many)的通信方式,通过报文复制完成网络中一台server对应多台接收者的高效数据传 送.对其形象的比喻就是类似于广播电台和电视 ...

  4. Android studio 中引用jar的其实是Maven？(一)

    由于Studio比eclipse多了一步对工程构建的步骤,即为build.gradle这个文件运行,因此其引入第三方开发jar包与lib工程对比Eclipse已完成不同,引入第三方jar与lib工程显 ...

  5. Android线性布局

    线性布局 LinearLayout 是一个视图组,用于使所有子视图在单个方向(垂直或水平)保持对齐. 您可以使用 android:orientation 属性指定布局方向. LinearLayout ...

  6. Unity UGUI图文混排(七) -- 下划线

    之前更新超链接的时候,忘了搭配实现一个下划线的功能,这篇文章就是来补上这一个功能,时间有点长,一方面没有很好的思路,一方面也没多少时间. 先在网上收集了一下下划线的实现操作,一种是在文本下再创建一个文 ...

  7. openresty 备忘

    The problem with: apt-get --yes install $something is that it will ask for a manual confirmation if ...

  8. Python 一个奇特的引用设定

    def f(x): print 'original' if x > 0: return f(x-1) return 0 g = f def f(x): print 'new' return x ...

  9. 分享一个CUDA的环境配置属性表，从此不用再担心配置不好CUDA环境了

    本文适用: Visual Studio 2008,C++, CUDA版本不限,不过我用的是5.5做的实验. 先贴出属性表的内容: <?xml version="1.0" en ...

  10. git中status指令总是提示内容被修改的解决

    大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请多提意见,如果觉得不错请多多支持点赞.谢谢! hopy ;) 最近在用git提交项目修改时发现一个问题,就是多次 git a ...