小强的HTML5移动开发之路(6)——Canvas图形绘制基础
来自:http://blog.csdn.net/dawanganban/article/details/17686039
在前面提到Canvas是HTML5中一个重要特点,canvas功能非常强大,用photoshop可以实现的效果canvas也同样可以实现,下面我们用canvas实现基本图形的绘制。
一、Canvas标签的使用
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- </head>
- <body>
- <canvas id="1" width="200" height="200" style="border:1px solid red"></canvas>
- </body>
- </html>
可以看到Canvas就像一块画布,我们可以在这个画布上面绘制我们需要的图形。canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成。
二、画矩形
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- </head>
- <body>
- <canvas id="1" width="500" height="500" style="border:1px solid red" onmousemove="mousexy(envent)"></canvas>
- </body>
- <script type="text/javascript">
- var c=document.getElementById('1');
- var p=c.getContext("2d");
- <span style="white-space:pre"> </span>//getContext("2d") 对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
- p.fillStyle="#FF0000";
- p.fillRect(0, 0, 300, 300);
- p.fillStyle="rgba(0,0,255,0.5)";
- p.fillRect(200,200,500,500);
- </script>
- </html>
三、画线条
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- </head>
- <body>
- <canvas id="1" width="200" height="200" style="border:1px solid red" onmousemove="mousexy(envent)"></canvas>
- </body>
- <script type="text/javascript">
- var c=document.getElementById('1');
- var p=c.getContext("2d");
- p.moveTo(10,10);
- p.lineTo(150,50);
- p.lineTo(10,50);
- p.stroke();
- </script>
- </html>
四、画圆形
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- </head>
- <body>
- <canvas id="1" width="200" height="200" style="border:1px solid red" onmousemove="mousexy(envent)"></canvas>
- </body>
- <script type="text/javascript">
- var c=document.getElementById('1');
- var p=c.getContext("2d");
- p.fillStyle="#FF0000";
- p.beginPath();
- p.arc(80,80,15,0,Math.PI*2,true);
- p.closePath();
- p.fill();
- </script>
- </html>
五、渐变
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- </head>
- <body>
- <canvas id="1" width="200" height="200" style="border:1px solid red" onmousemove="mousexy(envent)"></canvas>
- </body>
- <script type="text/javascript">
- var c=document.getElementById("1");
- var cxt=c.getContext("2d");
- var grd=cxt.createLinearGradient(0,0,175,50);
- grd.addColorStop(0,"#FF0000");
- grd.addColorStop(1,"#00FF00");
- cxt.fillStyle=grd;
- cxt.fillRect(0,0,175,50);
- </script>
- </html>
六、绘制图片
- <!DOCTYPE HTML>
- <html>
- <body>
- <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
- Your browser does not support the canvas element.
- </canvas>
- <script type="text/javascript">
- var c=document.getElementById("myCanvas");
- var cxt=c.getContext("2d");
- var img=new Image()
- img.src="/i/eg_flower.png"
- cxt.drawImage(img,0,0);
- </script>
- </body>
- </html>
七、多边形
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- </head>
- <body>
- <canvas id="1" width="200" height="200" style="border:1px solid red" onmousemove="mousexy(envent)"></canvas>
- </body>
- <script type="text/javascript">
- var c=document.getElementById('1');
- var p=c.getContext("2d");
- p.fillStyle="#FF0000";
- p.moveTo(10,10);
- p.lineTo(150,50);
- p.lineTo(10,50);
- p.lineTo(20,30);
- p.fill();
- </script>
- </html>
小强的HTML5移动开发之路(6)——Canvas图形绘制基础的更多相关文章
- 小强的HTML5移动开发之路(33)—— jqMobi基础
一.什么是jqMobi jqMobi是由appMobi针对HTML5浏览器和移动设备开发的javascript框架,是个极快速的查询选择库,支持W3C查询. 版本 jqMobi源码最初在2012年1月 ...
- 小强的HTML5移动开发之路(37)——jqMobi快速入门
在<小强的HTML5移动开发之路(33)-- jqMobi基础>中我们了解了什么是jqMobi,并从官方下载了jqMobi开发包,下载后解压目录如下: 拷贝上面的/css目录./plugi ...
- 小强的HTML5移动开发之路(18)——HTML5地理定位
来自:http://blog.csdn.net/dawanganban/article/details/18192091 在前面的<小强的HTML5移动开发之路(2)--HTML5的新特性> ...
- 小强的HTML5移动开发之路(14)——Video标签详解
来自:http://blog.csdn.net/dawanganban/article/details/18180605 在前面的小强的HTML5移动开发之路(5)--制作一个漂亮的视频播放器中制作了 ...
- 小强的HTML5移动开发之路(13)——HTML5中的全局属性
来自:http://blog.csdn.net/dawanganban/article/details/18179483 一.accssskey 快捷键 <!DOCTYPE HTML> ...
- 小强的HTML5移动开发之路(11)——链接,图片,表格,框架
来自:http://blog.csdn.net/dawanganban/article/details/18098193 一.HTML是什么? HTML(hypertext mark-uplangua ...
- 小强的HTML5移动开发之路(42)——HTML4与HTML5文档结构比较
一般来说,人们在书写包括HTML在内的文档时,习惯上按照类似于"章--节--小节"这样的层次结构来进行. 在HTML4中的描述方式: <html> <head&g ...
- 小强的HTML5移动开发之路(12)——从一个多媒体标签说起
来自:http://blog.csdn.net/dawanganban/article/details/18136813 一.视频播放 <html> <head> <ti ...
- 小强的HTML5移动开发之路(3)——HTML5与HTML4比较
来自:http://blog.csdn.net/dawanganban/article/details/17652873 在前面介绍了HTML5的新特性,新标签的使用,智能表单设计,引入多媒体对象,C ...
随机推荐
- SpringMVC总结(SSM)
Day1 1. springMvc:是一个表现层框架: 作用:就是从请求中接收传入的参数, 将处理后的结果数据返回给页面展示2. ssm整合: 1)Dao层 pojo和映射文件以及接口手动编写(或使用 ...
- javaweb异常提示信息统一处理(使用springmvc,附源码)
一.前言 后台出现异常如何友好而又高效地回显到前端呢?直接将一堆的错误信息抛给用户界面,显然不合适. 先不考虑代码实现,我们希望是这样的: (1)如果是页面跳转的请求,出现异常了,我们希望跳转到一个异 ...
- ASP.NET实现在线浏览Word文档另一种解决方案(Word转PDF)
ASP.NET实现在线浏览Word文档另一种解决方案(Word转PDF) 上述博文里提到的在线浏览pdf的方案不错,但word转pdf的那个dll只支持doc不支持docx,附上最新的下载链 ...
- 如何找出Xcode中不同版本Swift的路径
我们知道Xcode中可能包含不知一个Swift的版本,那么我们如何找到它们对应的路径呢? 熟悉unix shell命令的童鞋都知道有一个find指令,在我们已知Xcode路径时,我们可以在其中找到Sw ...
- iOS 滚动视图的复用问题解决方案
LazyScroll是什么 LazyScrollView 继承自ScrollView,目标是解决异构(与TableView的同构对比)滚动视图的复用回收问题.它可以支持跨View层的复用,用易用方式来 ...
- 转:LINUX/UNIX下的回车换行与WINDOWS下的区别
今天,我总算搞清楚“回车”(carriage return)和“换行”(line feed)这两个概念的来历和区别了.在计算机还没有出现之前,有一种叫做电传打字机(Teletype Model 3 ...
- Makefile常用函数总结
在Makefile中可以使用函数来处理变量,从而让我们的命令或是规则更为的灵活和具 有智能.make所支持的函数也不算很多,不过已经足够我们的操作了.函数调用后,函 数的返回值可以当做变量来使用. 一 ...
- 集成JPA+springmvc+spring+EJB中的Java EE应用
EJB是sun的JavaEE服务器端组件模型,设计目标与核心应用是部署分布式应用程序.凭借java跨平台的优势,用EJB技术部署的分布式系统可以不限于特定的平台.EJB (Enterprise Jav ...
- FFmpeg源代码结构图 - 解码
===================================================== FFmpeg的库函数源代码分析文章列表: [架构图] FFmpeg源代码结构图 - 解码 F ...
- 【ShaderToy】基础篇之谈谈点、线的绘制
写在前面 写前面一篇的时候,发现还是不够基础.因此打算增加几篇基础篇,从点线面开始,希望可以更好理解. 其实用Pixel Shader的过程很像在纸上绘画的过程.屏幕上的每一个像素对应了纸上的一个方格 ...