来自：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. WSGI及gunicorn指北（一）

    作为一个Python Web 开发工程师,pyg0每天都喜滋滋的写着基于各种web框架的业务代码. 突然有一天,技术老大过来跟pyg0说,嘿,我们要新上线一个服务,你来帮我部署一下吧.不用太复杂.用g ...

  2. Gradle 1.12用户指南翻译——第四十五章. 应用程序插件

    本文由CSDN博客貌似掉线翻译,其他章节的翻译请参见: http://blog.csdn.net/column/details/gradle-translation.html 翻译项目请关注Githu ...

  3. Docker学习笔记4: Docker-Compose—简化复杂容器应用的利器

    本文转载自http://www.tuicool.com/articles/AnIVJn. 因Python语言,个人也没学过,不是太熟悉,这篇文章的代码格式排版不准确爆了很多错,让我走了好多坑,不过还是 ...

  4. Hadoop的RPC通信原理

    RPC调用: RPC(remote procedure call)远程过程调用: 不同java进程间的对象方法的调用. 一方称作服务端(server),一方称为客户端(client): server端 ...

  5. Effective Python 中文版

    如题,博主正在翻译一本Python相关的书. 图为Python作者. [美]Brett Slatkin的名作. Effective Python: 59 Specific Ways to Write ...

  6. ROS机器人程序设计（原书第2版）补充资料 （零） 源代码、资料和印刷错误修订等 2017年01月01日更新

    ROS机器人程序设计(原书第2版)补充资料 (零) 源代码等 ROS官网 版)部分内容修订 页:第1行,删去$ 页:第6行,float64 y 前面加一个空格 页:中间创建主题:下面程序不用换行,(& ...

  7. BI Publisher（rtf）模板开发语法大全

    Rtf模板开发例如背景,纹理分栏等等功能都能用word工具实现不再具体总结大家可以参考word教程.....   一.组 定义一个组的目的是告诉XMLPublisher对重复的数据行进行循环显示,也就 ...

  8. EBS技术开发之VPD策略

    VPD (虚拟专用数据库的简称),主要作用是根据运行环境的上下文,隐式的添加条 件. 好处是在数据库层解决细粒度的角色权限访问,避免在中间层写大量代码:坏处 是数据屏蔽的逻辑太隐蔽了,对于分析查找问题 ...

  9. iOS开发之自己封装的提示框（警告框）样式BHAlertView

    最近需要使用到提示框(警告框)进行信息的展示和提醒,所以进行了一个类的封装,想用Swift调用此OC文件,但是发现有些困难,所以暂时先把OC代码进行展示,随后再好好研究一下在Swift中的使用. 对于 ...

  10. Android View框架总结（二）View焦点

    请尊重分享成果,转载请注明出处: http://blog.csdn.net/hejjunlin/article/details/52263256 前言:View框架写到第六篇,发现前面第二篇竟然没有, ...