HTML5_Canvas

    
    


     
创建一个画布
     
     

     
使用JavaScript来绘制图像
     
绘制矩形
     
         你的浏览器不支持HTML5 Canvas 标签

     

     

     
绘制线段
     
     
     
         你的浏览器不支持HTML5 Canvas 标签

     

     

     
绘制圆形
     
     
         你的浏览器暂不支持HTML5 Canvas标签
     
     

     
Canvas-文本
     
     
     
     
使用Arial字体绘制一个高30px的文字 实体
     
         你的浏览器不支持HTML5 Canvas标签

     

     

     
使用Calibri字体绘制一个高30px的文本 空心
     
         你的浏览器暂不支持HTML5 Canvas标签
     
     

     
创建渐变
     
     
     
创建线条渐变
     
          你的浏览器暂不支持HTML5 Canvas标签

     

     


     
创建一个径向/圆渐变，使用渐变填充矩形
     
          你的浏览器暂不支持 HTML5 Canvas标签
     

     

     
Canvas 图像
     
直接使用Img
     
     
Canvas ：
     
          你的浏览器暂不支持HTML5 Canvas标签
     

     

1、 标签定义图形，比如图表和其他图像，您必须使用脚本来绘制图形。

在画布上（Canvas）画一个红色矩形，渐变矩形，彩色矩形，和一些彩色的文字。

2、什么是 canvas?

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

3、浏览器支持

表格中的数字表示支持 元素的第一个浏览器版本号。
元素 谷歌 IE FireFox Safari Opera
4.0 9.0 2.0 3.1 9.0

4、创建一个画布（Canvas）

一个画布在网页中是一个矩形框，通过 元素来绘制.
注意: 默认情况下 元素没有边框和内容。
简单实例如下:

注意: 标签通常需要指定一个id属性 (脚本中经常引用), width 和 height 属性定义的画布的大小.
提示:你可以在HTML页面中使用多个 元素.
使用 style 属性来添加边框:
实例
style="border:1px solid #000000;">

5、使用 JavaScript 来绘制图像

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

实例解析:
首先，找到 元素:
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) 方法定义了矩形当前的填充方式。

Canvas 坐标
canvas 是一个二维网格。
canvas 的左上角坐标为 (0,0)
上面的 fillRect 方法拥有参数 (0,0,150,75)。
意思是：在画布上绘制 150x75 的矩形，从左上角开始 (0,0)。