安科网

HTML5 Canvas 画图

ilovedich

ilovedich

2012-05-06

关注 关注

按照官方例子画了几个基本图形,算是对于HTML5 Canvas有所了解，但是感觉这里面数学知识太忘记了，虽然以前数学竞赛出身，但是好多年不用了，有所遗忘。

HTML5的canvas元素只是提供了一个画布，而实际的绘制工作由javascript来完成。

基本HTML不说了， 也就是搭一个架子，放一个<canvas>元素，然后首部引入一些javascript文件，这里面每一个js文件都是一个画图的例子.

  1. <!DOCTYPE html> 
  2. <head> 
  3. <meta charset="UTF-8"> 
  4. <title>HTML5 Canvas DEMO</title> 
  5. <script type="text/javascript" src="js/drawRect.js"></script> 
  6. <script type="text/javascript" src="js/drawPath.js"></script> 
  7. <script type="text/javascript" src="js/drawLine.js"></script> 
  8. <script type="text/javascript" src="js/drawLinearGradient.js"></script> 
  9. <script type="text/javascript" src="js/drawTransformShape.js"></script> 
  10. <script type="text/javascript" src="js/drawAll.js"></script> 
  11. </head> 
  12.  
  13. <body onload="drawAll('canvas')"></body> 
  14. <h2>canvas：放开你的梦想</h2> 
  15. <canvas id="canvas" width="400" height="300"/> 
  16. <br><br> 
例子1：绘制矩形
  1. /** 
  2.  *  This file is confidential by Charles.Wang 
  3.  *  Copyright belongs to Charles.wang 
  4.  *  You can make contact with Charles.Wang ([email protected]) 
  5.  */ 
  6.   
  7.  //这段js代码用于画一个长方形 
  8.  //参数是传进来的画布canvas的id,表明这段代码画在哪里 
  9.  function drawRect(id){ 
  10.      
  11.     //取得canvas对象，也就是我们js代码要画的canvas对象 
  12.     var canvas=document.getElementById('canvas'); 
  13.     if (canvas==null) 
  14.         return false; 
  15.          
  16.     //从canvas取得图形上下文，这个图形上下文context封装了许多绘画方法，这是一个内置的html5对象 
  17.     var context=canvas.getContext('2d'); 
  18.     //设定好当前图形上下文的样式，夜就是当前使用颜色来绘制图形，此外还有一些其他的样式 
  19.     context.fillStyle="#0044FF"; 
  20.     //fillXXX用来填充图形的内部，这里fillRect，表明用当前颜色填充图形内部，4个参数分别为起点横坐标/起点纵坐标/宽度/高度 
  21.     context.fillRect(0,0,400,300); 
  22.     //颜色值既可以用十六进制命名，也可以使用颜色名 
  23.     context.fillStyle="red"; 
  24.     context.strokeStyle="blue"; 
  25.     //用于设置图形边框的宽度 
  26.     context.lineWidth=1; 
  27.     context.fillRect(50,50,100,100); 
  28.     //strokeXXX用来描述图形的边框(stroke),这里strokeRect，表明用来绘制刚才矩形的边框 
  29.     context.strokeRect(50,50,100,100); 
  30.  } 
画出来的结果是：
HTML5 Canvas 画图
例子2：用Path来绘制一组圆形：
  1. /** 
  2.  *  This file is confidential by Charles.Wang 
  3.  *  Copyright belongs to Charles.wang 
  4.  *  You can make contact with Charles.Wang ([email protected]) 
  5.  */ 
  6.   
  7.  function drawPath(id){ 
  8.      
  9.     var canvas=document.getElementById(id); 
  10.     if(canvas == null) 
  11.         return false; 
  12.      
  13.     //依旧先拿到canvas对象和上下文对象 
  14.     var context = canvas.getContext("2d"); 
  15.     //先绘制画布的底图 
  16.     context.fillStyle="#EEEEEF"; 
  17.     context.fillRect(0,0,400,300); 
  18.      
  19.     //用循环绘制10个圆形 
  20.     var n = 0; 
  21.     for(var i=0 ;i<10;i++){ 
  22.         //开始创建路径，因为要画圆，圆本质上也是一个路径，这里向canvas说明，我要开始画了，这是起点 
  23.         context.beginPath(); 
  24.         //画一个拱形(arcade)，因为圆是一种特殊的拱形 
  25.         //6个参数分别是 起点横坐标，起点纵坐标，圆的半径，起始弧度，结束弧度（2PI刚好是360度），是否顺时针 
  26.         context.arc(i*25,i*25,i*10,0,Math.PI*2,true); 
  27.         //关闭路径 
  28.         context.closePath(); 
  29.         context.fillStyle="rgba(255,0,0,0.25)"; 
  30.         //填充刚才所画的圆形 
  31.         context.fill(); 
  32.     } 
  33.  } 
 画出来的结果是：
HTML5 Canvas 画图
 
  
 
  html5  canvas  
 
 
 
 
 
  ilovedich  
 
 
  ilovedich  
 
  0 关注   0 粉丝   0 动态  
 
 
   关注    关注   
 
 
 
 
 
 
 相关推荐 
  
 
 
  Canvas  
 
 
 
   Canvas是HTML5新增的一个双标签，目的在页面设置一个画布，可以进行画任何的线、图形、填充等一系列的操作，操作画图的是js。另外Canvas不仅仅提供简单的二维矢量绘图，也提供了三维的绘图，以及图片处理等一系列的api支持。<canvas wi     
 
 
  nercon    2020-03-06  
 
  
 
 
  基于 HTML5 Canvas 的 3D 热力云图效果  
 
 
 
   数据蕴藏价值，但数据的价值需要用IT技术去发现、探索，可视化可以帮助人更好的去分析数据，信息的质量很大程度上依赖于其呈现方式。在数据分析上，热力图无疑是一种很好的方式。在很多行业中都有着广泛的应用。最近刚好项目中需要用到3D热力图的效果展示。大楼内的人员分     
 
 
  zsh    2020-03-01  
 
  
 
 
  一篇文章带你了解HTML5 MathML  
 
 
 
   HTML5 可以在文档中使用 MathML 元素，对应的标签是 ... 。MathML 是数学标记语言，是一种基于XML的标准，用来在互联网上书写数学符号和公式的置标语言。大部分浏览器都支持 MathML 标签，如果你的浏览器不支持该标签，可以使用最新版的     
 
 
  wusiye    2020-10-23  
 
  
 
 
  HTML5标签2  
 
 
 
   表格的现在还是较为常用的一种标签，但不是用来布局，常见处理、显示表格式数据。在HTML网页中，要想创建表格，就需要使用表格相关的标签。<table> <tr>  <td>单元格内的文字</td>   ...      
 
 
  gufudhn    2020-08-09  
 
  
 
 
  HTML 5 &lt;input&gt; 标签  
 
 
 
   <input> 标签规定用户可输入数据的输入字段。根据不同的 type 属性，输入字段有多种形态。输入字段可以是文本字段、复选框、密码字段、单选按钮、按钮等等。在 HTML 4.01 中，"align" 属性已被废弃，HTM     
 
 
  nercon    2020-08-01  
 
  
 
 
  HTML5的新语义和新结构元素  
 
 
 
   自1999年以后HTML 4.01 已经改变了很多,今天，在HTML 4.01中的几个已经被废弃，这些元素在HTML5中已经被删除或重新定义。为了更好地处理今天的互联网应用，HTML5添加了很多新元素及功能，比如: 图形的绘制，多媒体内容，更好的页面结构，     
 
 
  swiftwwj    2020-07-21  
 
  
 
 
  HTML5中修改表单验证默认提示语句  
 
 
 
   HTML5中针对表单新增的验证属性如required、pattern以及一些特定input类型，当验证不通过时，都有默认的提示语句，但实践中发现并不怎么友好，因此，需要自定义提示语句，使用setCustomValidity()。在此之前，需要介绍一下表单的     
 
 
  nercon    2020-07-16  
 
  
 
 
  indexedDB 数据库_html5中Web离线数据库的使用  
 
 
 
   在html5 的本地存储中，有一种叫 indexedDB 的数据库，该数据库是一种存储在客户端本地的 NoSQL数据库，它可以存储大量的数据。web Storage可以方便灵活的在本地存取简单数据，但是对于大量结构化存储，indexedDB 的优势就更加明     
 
 
  饮马天涯    2020-07-05  
 
  
 
 
  [Javascript] HTML5 DOM project  
 
 
 
   <p>You have <span class="todos-count"></span> items</p>. <button type="button" cl     
 
 
  Lophole    2020-06-28  
 
  
 
 
  Html5—— &lt;input&gt; autocomplete 属性  
 
 
 
   autocomplete 属性是 HTML5 中的新属性。autocomplete 属性规定输入字段是否应该启用自动完成功能。当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。即，当你输入过一次，提交后，下次再点击输入框时，会     
 
 
  gufudhn    2020-06-12  
 
  
 
 
  疯狂HTML5 CSS 3 JavaScript讲义 (李刚) 高清PDF扫描版 279M完整版下载  
 
 
 
   《疯狂html 5/css 3/javascript讲义》的定位是一本前端开发的“实战性”图书，因此在介绍各知识点时并不是简单地停留在知识点层面阐述，而是结合了大量实例来让读者对照练习、学以致用。该游戏综合运用了html 5的绘图支持、客户端存储等技术，具     
 
 
  csstpeixun    2020-06-11  
 
  
 
 
  Vue.Js（html5） + Java实现文件分片上传  
 
 
 
   代码从项目中剥离修改，未经测试，仅提供思路。let bufferLength = 1024 * 1024 * 5;需要注意的是，Blob.slice,文件块包含start指向的字节，而不包含end指向的字节，在使用时要注意Blob的边界。使用ByteBuf     
 
 
  huzijia    2020-06-09  
 
  
 
 
  [JavaScript] HTML5 播放hls流媒体视频流  
 
 
 
   PC端chrome，IE，Firefox以及集成以上内核的各种浏览器，以及旧版的Android SDK的webview 不能播放     
 
 
  WebVincent    2020-06-06  
 
  
 
 
  html5 video视频，本地环境好的，线上环境，不能播放  
 
 
 
   本地环境ok，发布到线上不能播放。之前看这个视频，把video放在public文件夹下的。     
 
 
  niehanmin    2020-06-03  
 
  
 
 
  HTML5  
 
 
 
   万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言的第五次重大修改，作为新HTML语言，具有新的元素、属性和行为。<source src="./media/snow.ogg" type="audio.mpeg&     
 
 
  行吟阁    2020-05-30  
 
  
 
 
  HTML5中History.back()页面后退刷新页面  
 
 
 
   在开发中经常会遇到在一个页面操作完返回上一个页面，此时要求上个页面展示最新数据的需求。　　返回了A1页面同时A1页面进行了刷新！     
 
 
  qsdnet我想学编程    2020-05-26  
 
  
 
 
  分享一些酷酷的特效，希望你也能够喜欢  
 
 
 
   id=ha200bcjbb畜牧资讯官方app页面模板。新闻资讯手机模板html下载。id=ha202bhcib简单的手机绑定银行卡页面，手机添加银行卡信息列页面模板 。id=ha2bh01a2jcss3 Animation属性制作夜晚的景色搭配悬浮发光圆点     
 
 
  gufudhn    2020-05-25  
 
  
 
 
  这些例子很炫，感兴趣的童鞋可以了解一下  
 
 
 
   id=kja1abajb黑色通用的网络品牌设计公司介绍html5单页模板，广告品牌设计公司网站单页模板。echarts中国地图城市区块选择代码点击》echarts中国地图城市区块选择代码html5基于echarts.js地图插件制作中国地图点击选择城市弹出     
 
 
  qsdnet我想学编程    2020-05-19  
 
  
 
 
  HTML5 Web SQL 数据库  
 
 
 
   Web SQL 数据库 API 并不是 HTML5 规范的一部分，但是它是一个独立的规范，引入了一组使用 SQL 操作客户端数据库的 APIs。如果你是一个 Web 后端程序员，应该很容易理解 SQL 的操作。你也可以参考我们的 SQL 教程，了解更多数据     
 
 
  suixinsuoyu    2020-05-15  
 
  
 
 
  HTML5 服务器发送事件(Server-Sent Events)  
 
 
 
   HTML5 服务器发送事件允许网页获得来自服务器的更新。以前也可能做到这一点，前提是网页不得不询问是否有可用的更新。所有主流浏览器均支持服务器发送事件，除了 Internet Explorer。创建一个新的 EventSource 对象，然后规定发送更新的     
 
 
  HSdiana    2020-05-15  
 
  
 
 
 
 
 
 
 
  ilovedich  
 
 
  ilovedich  
  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 W3CSchool教程 
 
 HTML 教程 
 
 CSS 教程 
 
 Bootstrap 教程 
 
 Javascript 教程 
 
 jQuery 教程 
 
 
 
 后端教程 
 
 C 教程 
 
 Java 教程 
 
 PHP 教程 
 
 Python 教程 
 
 Go 教程 
 
 
 
 移动开发 
 
 Android 教程 
 
 Swift 教程 
 
 Kotlin 教程 
 
 jQuery Mobile 教程 
 
 ionic 教程 
 
 
 
 关于我们 
 
 新闻动态 
 
 联系方式 
 
 招聘英才 
 
 安科实验室 
 
 帮助与反馈 
 
 
 
 
 
 安科网(Ancii)，中国第一极客网 
 
     
  •   
    •  
  •   
    •  
 
 
 
 
 
  
 Copyright © 2013 - 2019 Ancii.com 
 
 京ICP备18063983号 京公网安备11010802014868号