一、Canvas概念介绍

1、概念 Canvas : 画布

2、作用 : HTML5 Canvas 元素用于图形的绘制, 通过脚本(通常是JavaScript)来完成。它本身只是个图形容器,必须使用脚本来绘制图像

二、画图步骤

1、创建一个画布

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>

注意:<canvas>元素没有边框和内容, 使用 style 属性来添加边框

2、使用JavaScript来绘制图像

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
HTML5 canvas 标签。</canvas> <script> var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d"); ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,20,25); </script> </body>
</html>

JavaScript画图代码步骤 :

①、首先, 找到canvas元素

var c=document.getElementById("myCanvas");

②、创建Context对象

var ctx=c.getContext("2d");

getContext("2d") 对象是内建的HTML5对象, 拥有多种绘制路径、矩形、图形、字符及添加图像的方法

③、业务代码

三、Canvas用法

1、介绍Canvas常用属性

①、fillStyle属性 : 可以是CSS颜色、渐变、图案等

②、font : 定义字体

2、介绍Canvas常用方法

①、fillRect(x, y, width, height): 定义矩形的填充方式

②、fillText(text, x, y): 在canvas绘制文本

③、drawImage(image, x, y): 图像画到画布上

四、参考文献

1、http://www.runoob.com/html/html5-canvas.html

2、http://www.runoob.com/tags/ref-canvas.html

最新文章

  1. 自定义 Material Design风格的提示框
  2. iOS原生项目中集成React Native
  3. storm UI
  4. 使用Lucene.NET实现数据检索功能
  5. DataSet导出到Excel,并生成文件(C#实现,可合并行和列)
  6. HttpClient的使用方法
  7. @Html.DropDownListFor 绑定列表项
  8. angularJs-UI-bootstrap系列教程1(使用前的准备)
  9. JAVA读取、写入Excel表格(含03版)
  10. 关系型数据库工作原理-查询优化器之数据访问方式(翻译自Coding-Geek文章)
  11. 系列博文-Three.js入门指南(张雯莉)-照相机
  12. git 上传本地项目
  13. webstocket 聊天
  14. 学习笔记:Rick&#39;s RoTs -- Rules of Thumb for MySQL
  15. Python内置模块-日志模块(logging)常见用法
  16. HDU 6069 Counting Divisors(唯一分解定理+因子数)
  17. MongoDB(课时5 数据查询)
  18. 【转】WCF设置拦截器捕捉到request和reply消息
  19. shell more less cat
  20. Spring核心之IoC——依赖注入

热门文章

  1. jQuery Ajax通用js封装
  2. Jquery 弹出提示框输入插件 apprise 修改中文按钮以及使用说明
  3. UVA 10801 Lift Hopping 电梯换乘(最短路,变形)
  4. Oracle AWR报告自动生成并ftp脚本
  5. group by的使用
  6. 【转】让 cocos2d-x 的 CCHttpRequest 支持https
  7. 【转】Android 异步消息处理机制 让你深入理解 Looper、Handler、Message三者关系
  8. java 中的Exception RuntimeException 区别
  9. angular+rails集成实战
  10. 完美完全卸载Oracle 11g数据库