Canvas通过JavaScript来绘制2D图形。Canvas是逐像素渲染的。在Canvas中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何已被图形覆盖的对象。

1、Canvas标签

html5中<canvas>元素用于图形的绘制，通过脚本（通常是JavaScript）来完成

<canvas>标签只是图形容器

可以通过多种方法使用Canvas绘制路径、盒、圆、字符以及添加图像

1.1 直接在html5中创建，这种方式采用得比较少

 <DOCTYPE html>
 <html>
 <head>
     <meta charset="utf-8">
     <title></title>
     <style>
         .canvas{
             background-color: aqua;
         }
     </style>
 </head>
 <body>
     <canvas class="canvas" id="canvas1" width="200px" height="200px"></canvas>
 </body>
 </html>

1.2 通过脚本创建

html文件：

 <DOCTYPE html>
 <html>
 <head>
     <meta charset="utf-8">
     <title></title>
 </head>
     <script src="app.js"></script>
 <body>
 </body>
 </html>

其中使用到的app.js：

 var CANVAS_WIDTH = 200, CANVAS_HEIGHT=200;

 window.onload = function(){
     createCanvas();
 }

 function createCanvas(){
     document.body.innerHTML = "<canvas id=\"mycanvas\" width = \""+CANVAS_WIDTH+"\"  height = \""+CANVAS_HEIGHT+"\"></canvas>"
 }

2、绘制图形

API的地址：https://developer.mozilla.org/zh-CN/   进入后选择WEB平台的Web API & DOM

 <DOCTYPE html>
 <html>
 <head>
     <meta charset="utf-8">
     <title></title>
 </head>
     <script src="app.js"></script>
 <body>
 </body>
 </html>

其中的app.js:

 var CANVAS_WIDTH = 500, CANVAS_HEIGHT=500;
 var mycanvas,context;

 window.onload = function(){
     createCanvas();
     drawRect();
 }

 function createCanvas(){
     document.body.innerHTML = "<canvas id=\"mycanvas\" width = \""+CANVAS_WIDTH+"\"  height = \""+CANVAS_HEIGHT+"\"></canvas>"
     mycanvas = document.getElementById("mycanvas");
     context = mycanvas.getContext("2d");
 }

 function drawRect(){
     context.fillStyle="#ff0000";
     context.translate(200,200);
     context.rotate(45);
     context.scale(2,0.5);
     context.fillRect(0,0,200,200);
 }

3、绘制图片

将app.js中drawRect()的内容替换成以下即可：

     var img = new Image();
     img.onload = function(){
         context.drawImage(img,0,0);
     }
     img.src="1.jpg";

[html5] 学习笔记-Canvas标签的使用的更多相关文章

  1. [html5] 学习笔记-Canvas应用

    通过使用HTML5游戏开发的引擎CreatJS,创建HTML5 Canvas上的更好交互. 1.认识CreateJS CreateJS是一个外部库,用它可以比Canvas更方便的绘制图形. 官网:ht ...

  2. [html5] 学习笔记-Canvas 绘制渐变图形与绘制变形图形

    在 HTML5 中,使用 Canvas API 绘制图形的知识,可以对绘制图形进行处理,包含使用 Canvas API 绘制渐变图形,使用 Canvas API 的坐标轴变换处理功能绘制变形图形.其中 ...

  3. Html5学习笔记1 元素 标签 属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. HTML5学习笔记之表格标签

    HTML5学习笔记之表格标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之基础标签 HTML5学习笔记之表格标签 HTML5学习笔记之表单标签 HTML5学习笔 ...

  5. html5学习笔记一

    HTML5学习笔记 <video>标记:定义视频,Ogg.MPEG4.WebM三种格式 <video src=”movie.ogg”  controls=”controls”> ...

  6. HTML5学习总结——canvas绘制象棋(canvas绘图)

    一.HTML5学习总结——canvas绘制象棋 1.第一次:canvas绘制象棋(笨方法)示例代码: <!DOCTYPE html> <html> <head> & ...

  7. HTML5 学习笔记（一）——HTML5概要与新增标签

    目录 一.HTML5概要 1.1.为什么需要HTML5 1.2.什么是HTML5 1.3.HTML5现状及浏览器支持 1.4.HTML5特性 1.5.HTML5优点与缺点 1.5.1.优点 1.5.2 ...

  8. HTML5 学习笔记--------》HTML5概要与新增标签！

      一.HTML5概要 1.1.为什么需要HTML5 HTML4陈旧不能满足日益发展的互联网需要,特别是移动互联网.为了增强浏览器功能Flash被广泛使用,但安全与稳定堪忧,不适合在移动端使用(耗电. ...

  9. HTML5 学习笔记（四）——canvas绘图、WebGL、SVG

    一.Canvas canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API,它可以实现在网页中完成动态的2D与3D图像技术.<canvas> 标记和 ...

随机推荐

  1. The 2014 ACMICPC Asia Regional Guangzhou Online

    [A]-_-/// [B]线段树+位运算(感觉可出) [C]地图BFS,找最长线 [D]地图BFS,加上各种复杂情况的最短路-_- [E]-_-/// [F]三分+圆与线段的交点,计算几何 [G]-_ ...

  2. avi格式详细介绍

    百度:http://wenku.baidu.com/link?url=KB7qKc6UG4aeU-i9FtXeV8Uou4JHPceiyz3HNbzCrQw4phY-qRlcp3tTSwYPeIgdx ...

  3. VC2010编写Dll文件（转）

    源:VC2010编写Dll文件 1. 打开VS2010[Flie / New / Project / Visual C++ / Win32 / Win32 Console Application]在下 ...

  4. iOS开发——浅谈构架与用户体验

    工作不是千篇一律的重复,从中寻找乐趣才是我们应该做的. 作为一名码农,做过几个项目,每次做项目的时候都会自己构思,如果完全是我自己设计,会怎么去设计?心里一直没有满意的答案,不管怎么布局,好像都感觉差 ...

  5. 在spring 3.0中的@value

    在spring 3.0中,可以通过使用@value,对一些如xxx.properties文件 中的文件,进行键值对的注入,例子如下: 1 首先在applicationContext.xml中加入:   ...

  6. camstar --飞达上料

    业务场景:某工厂的SMT车间接到生产PCB(3151502),数量1000片.如果实现飞达进行上料,并在贴片机工作时,系统自动进行物料消耗.3151502的BOM为1107790,1107792,11 ...

  7. 通过非root用户访问VNC

    我采用的是realvnc5.3.2.对于非root用户通过vnc访问linux桌面,网络上绝大数文章都是说要去配置/etc/sysconfig/vncservers.但安装完realvnc5.3.2之 ...

  8. Java XML解析器

    使用Apache Xerces解析XML文档 一.技术概述 在用Java解析XML时候,一般都使用现成XML解析器来完成,自己编码解析是一件很棘手的问题,对程序员要求很高,一般也没有专业厂商或者开源组 ...

  9. Swing 布局时 组件大小问题

    在JFrame中放置了几个JPanel ,想调整JPanel大小,一直无效. 问题在于: 因为JPanel A的四周没有添加任何组件,所以JPanel B会把JPanel A填满.这种情况想固定JPa ...

  10. PHP快速按行读取CSV大文件的封装类分享（也适用于其它超大文本文件）

    CSV大文件的读取已经在前面讲述过了(PHP按行读取.处理较大CSV文件的代码实例),但是如何快速完整的操作大文件仍然还存在一些问题. 1.如何快速获取CSV大文件的总行数? 办法一:直接获取文件内容 ...