HTML5 Canvas入门

<canvas> 标签定义图形，比如图表和其他图像，您必须使用脚本来绘制图形。
在画布上（Canvas）画一个红色矩形，渐变矩形，彩色矩形，和一些彩色的文字。

什么是 Canvas?
HTML5 <canvas> 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.
<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。
你可以通过多种方法使用Canva绘制路径,盒、圆、字符以及添加图像。

浏览器支持
Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持 <canvas> 元素.
注意: Internet Explorer 8 及更早 IE 版本的浏览器不支持 <canvas> 元素.

创建一个画布（Canvas）

一个画布在网页中是一个矩形框，通过canvas> 元素来绘制.

注意: 默认情况下 <canvas> 元素没有边框和内容。
<canvas>简单实例如下:
<canvas id="myCanvas" width="200" height="100"></canvas>
注意: 标签通常需要指定一个id属性 (脚本中经常引用), width 和 height 属性定义的画布的大小.
提示:你可以在HTML页面中使用多个 <canvas> 元素.
使用 style 属性来添加边框:
实例
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>

使用 JavaScript 来绘制图像

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：
实例
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>

实例解析:
首先，找到 <canvas> 元素:
var c=document.getElementById("myCanvas");
然后，创建 context 对象：
var ctx=c.getContext("2d");
getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
下面的两行代码绘制一个红色的矩形：
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
设置fillStyle属性可以是CSS颜色，渐变，或图案。fillStyle 默认设置是#000000（黑色）。
fillRect(x,y,width,height) 方法定义了矩形当前的填充方式。

例子:

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8"/>
  5. <meta name="keywords" content="脚本小子_小贝_HTML5_canvas"/>
  6. <meta name="description" content="脚本小子_小贝_HTML5_canvas"/>
  7. <meta name="" content="脚本小子小贝 xiaobei qq:2801616735"/>
  8. <title>HTML5_canvas</title>
  9. <style>
  10. p{
  11.     border:1px dashed red;
  12.     padding:5px;
  13. }
  14. canvas{
  15.     border:1px solid yellow;
  16. }
  17. </style>
  18. </head>
  19.  
  20. <body>
  21.     <h2>HTML5_canvas</h2>
  22.     <ul style="list-style:none">
  23.         <li>1、创建canvas</li>
  24.         <li>2、创建矩形</li>
  25.         <li>3、创建线条</li>
  26.         <li>4、创建文本</li>
  27.         <li>5、创建圆形</li>
  28.         <li>6、创建图像</li>
  29.     </ul>
  30.     <hr/>
  31.     <h3>1、创建canvas</h3>
  32.     <p>
  33.         <canvas id="canvas">亲,你的浏览器不支持canvas.^_^</canvas>
  34.     </p>
  35.     <hr/>
  36.     <h3>2、创建矩形</h3>
  37.     <p>
  38.         <canvas id="canvas1">亲,你的浏览器不支持canvas.^_^</canvas>
  39.         <button onclick="func(1);">创建矩形</button>
  40.     </p>
  41.     <hr/>
  42.     <h3>3、创建线条</h3>
  43.     <p>
  44.         <canvas id="canvas2">亲,你的浏览器不支持canvas.^_^</canvas>
  45.         <button onclick="func(2);">创建线条</button>
  46.     </p>
  47.     <hr/>
  48.     <h3>4、创建文本</h3>
  49.     <p>
  50.         <canvas id="canvas3">亲,你的浏览器不支持canvas.^_^</canvas>
  51.         <button onclick="func(3);">创建文本</button>
  52.     </p>
  53.     <hr/>
  54.     <h3>5、创建圆形</h3>
  55.     <p>
  56.         <canvas id="canvas4">亲,你的浏览器不支持canvas.^_^</canvas>
  57.         <button onclick="func(4);">创建圆形</button>
  58.     </p>
  59.     <hr/>
  60.     <h3>6、创建图像</h3>
  61.     <p>
  62.         <img src="canvas.png" id="img"/>
  63.         <canvas id="canvas5">亲,你的浏览器不支持canvas.^_^</canvas>
  64.         <button onclick="func(5);">创建图形</button>
  65.  
  66.     </p>
  67. </body>
  68. <script>
  69.     function func(id)
  70.     {
  71.         var c = document.getElementById('canvas'+id);
  72.         var ctx = c.getContext('2d');
  73.         switch(id)
  74.         {
  75.             case 1:
  76.                 ctx.fillStyle = "#FF0000";
  77.                 ctx.fillRect(10,10,100,50);
  78.             break;
  79.             case 2:
  80.                 ctx.beginPath();
  81.                 ctx.moveTo(10,10);
  82.                 ctx.lineTo(100,100);
  83.                 ctx.stroke();
  84.             break;
  85.             case 3:
  86.                 ctx.font="20px Arial";
  87.                 ctx.fillText("脚本小子_小贝_HTML5_canvas",10,50);
  88.             break;
  89.             case 4:
  90.                 ctx.beginPath();
  91.                 ctx.arc(95,50,40,0,2*Math.PI);
  92.                 ctx.stroke();
  93.             break;
  94.             case 5:
  95.                 var img=document.getElementById("img");
  96.                 c.width=img.width;
  97.                 c.height=img.height;
  98.                 ctx.drawImage(img,10,10);
  99.             break;
  100.         }
  101.  
  102.     }
  103. </script>
  104. </html>

浏览:

准备知识:http://www.cnblogs.com/2801616735kzw/p/3608927.html

易错点:http://www.cnblogs.com/2801616735kzw/p/3614941.html

HTML5 canvas入门的更多相关文章

  1. html5 Canvas绘制图形入门详解

    html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome. ...

  2. HTML5 canvas绘制线条曲线

    HTML5 canvas入门 线条例子 1.简单线条 2.三角形 3.填充三角形背景颜色 4.线条颜色以及线条大小 5.二次贝塞尔曲线 6.三次贝塞尔曲线 <!doctype html> ...

  3. Canvas入门笔记-实现极简画笔

    今天学习了Html5 Canvas入门,已经有大神写得很详细了http://www.cnblogs.com/tim-li/archive/2012/08/06/2580252.html#8 在学习过后 ...

  4. HTML5 Canvas 画图入门

    HTML5 Canvas 画图入门 HTML5 Canvas 画图入门,仅供学习參考 <!DOCTYPE html> <html> <head> <meta ...

  5. 赠书：HTML5 Canvas 2d 编程必读的两本经典

    赠书:HTML5 Canvas 2d 编程必读的两本经典 这两年多一直在和HTML5 Canvas 打交道,也带领团队开发了世界首款基于HTML5 Canvas 的演示文档工具---AxeSlide( ...

  6. 03.Web大前端时代之：HTML5+CSS3入门系列~H5功能元素

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 2.功能元素 1.hgroup 对网页或区段(secti ...

  7. 06. Web大前端时代之：HTML5+CSS3入门系列~HTML5 画布

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 我们先看看画布的魅力: 初始画布 canvas默认是宽3 ...

  8. 使用html5 canvas绘制图片

    注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...

  9. 使用html5 canvas绘制圆形或弧线

    注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...

随机推荐

  1. js的事件属性方法一览表

    event对象常用属性和方法 event 对象用来表示当前事件,事件有很多状态,例如,鼠标单击时的位置,按下键盘时的按键,发生事件的HTML元素,是否执行默认动作,是否冒泡等,这些都是作为event对 ...

  2. Import MySQL Dumpfile, SQL Datafile Into My Database

    How can I import a MySQL dumpfile into my database? I'm using CentOS Linux 5 server. My old hosting ...

  3. 读书笔记-实用单元测试(英文版) Pragmatic Unit Testing in C# with NUnit

    读书笔记-实用单元测试(英文版) Pragmatic Unit Testing in C# with NUnit Author: Andrew Hunt ,David Thomas with Matt ...

  4. 《UNIX网络编程》UDP客户端服务器：消息回显

    udp写的程序相比tcp简单一些,在socket()与bind()之后,不需要connect(),accept()等步骤,直接简化为了sendto()与recvfrom(). 编译运行同前面的tcp. ...

  5. Android06－Fragment碎片

    ¨Fragment简介 ¨Fragment生命周期 ¨动态加载碎片Fragment Manager的使用   1.Fragment表示Activity中的一种行为或者一部分用户界面. 可以将Fragm ...

  6. Congos

    http://hi.baidu.com/tag/cognos%E7%B3%BB%E7%BB%9F%E7%AE%A1%E7%90%86/feeds http://www.blogjava.net/mlh ...

  7. Delphi获取当前系统时间（使用API函数GetSystemTime）

    在开发应用程序时往往需要获取当前系统时间.尽管Y2K似乎已经平安过去,但在我们新开发的应用程序中还是要谨慎处理“时间”问题. 在<融会贯通--Delphi4.0实战技巧>(以下简称“该书” ...

  8. 提交(post)xml文件给指定url的2种方法

    原文:提交(post)xml文件给指定url的2种方法 1  这段代码是在网上搜到的,拿来共享,项目正好要用到.其中的data你只需要传递一个xml字符串就可以 protected   string  ...

  9. Go语言Eclipse开发环境配置-Windows

    1.首先安装eclipse,选择一个适合的版本就好,解压即可 http://www.eclipse.org/downloads/ 2.下载go语言安装包 官网地址 :http://www.golang ...

  10. OpenStreetMap(OSM) JMap Viewer(Java swing map)

    This article from:http://wiki.openstreetmap.org/wiki/JMapViewer JMapViewer is a java component which ...