来自：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. ACM Ignatius and the Princess II

    Problem Description Now our hero finds the door to the BEelzebub feng5166. He opens the door and fin ...

  2. ACM 还是畅通工程

    Problem Description 某省调查乡村交通状况,得到的统计表中列出了任意两村庄间的距离.省政府"畅通工程"的目标是使全省任何两个村庄间都可以实现公路交通(但不一定有直 ...

  3. Latex：TexStudio的使用

    http://blog.csdn.net/pipisorry/article/details/54565608 Texsdudio 快捷键 The keyboard shortcuts can be ...

  4. linux下内存的统计和内存泄露类问题的定位

    在产品的开发中,通过对当前系统消耗内存总量的统计,可以对产品所需内存总量进行精确的评估,从而选择合适的内存芯片与大小,降低产品的成本.在遇到内存泄露类问题时,经常会对此束手无策,本文通过对proc下进 ...

  5. 短文本分析----基于python的TF-IDF特征词标签自动化提取

    绪论 最近做课题,需要分析短文本的标签,在短时间内学习了自然语言处理,社会标签推荐等非常时髦的技术.我们的需求非常类似于从大量短文本中获取关键词(融合社会标签和时间属性)进行用户画像.这一切的基础就是 ...

  6. ROS(indigo) 语音工具 科大讯飞 百度 pocketsphinx julius rospeex 16.11.22更新 ROS中文语音

    ROS语音工具汇总,目前先给出链接,只用过一些简单的命令. 中文语音: 参考链接:使用科大讯飞库 1 http://www.ncnynl.com/archives/201611/1069.html 2 ...

  7. cassandra 监控方案评估

    摘要 最开始做cassandra monitor 方案的选型时,主要是从cassandra 本身入手,后来发现cassandra运行在JVM上,所有的metrics都是通过JMX 暴露出来.所以又可以 ...

  8. Unity UGUI图文混排(五) -- 一张图集对应多个Text

    继上一篇说的更新了一张图集对应多个Text的功能,为了节省资源嘛 这里,但是也没有舍弃之前的一个Text一个图集,因为我感觉应该两个都有用,于是我重新写了一个脚本 1.其实大体跟前面的都没变,解析标签 ...

  9. 15 ActionProvider代码例子

    Menu文件夹下代码: <menu xmlns:android="http://schemas.android.com/apk/res/android" > <! ...

  10. Jetty 嵌入式启动官方完整教程

    网上太多了,不如直接看官方的这个全面. http://wiki.eclipse.org/Jetty/Tutorial/Embedding_Jetty 入门地址: http://wiki.eclipse ...