Canvas画布分析

Canvas是使用JavaScript来绘制图像的，canvas元素本身是没有绘图能力的。所有的绘制工作都必须在JavaScript内部完成。

创建画布的步骤大概是这样的：

1.获取一个画布:（要创建一个画布对象）

   例如这样：

 <canvas id="canvas" width="500"  height="500"></canvas>

2.创建一个画布上下文对象（目前只支持2d渲染）

 var context=canvas.getContext("2d");

3.告诉程序绘图路径开始

 context.beginPath();

4.绘制图形的起始点（坐标）

context.moveTo(x,y);

5.绘制图形的形状

    lineTo(x , y) 绘制直线

    fillStyle 属性 填充颜色

    fill() 执行填充

    rect(x, y, width, height) //绘制矩形路径

    arc(x, y, radius, start, end, true/false) //圆弧路径

    // start 表示开始的弧度（位置） 0弧度是三点钟方向
    // end 表示结束的弧度（位置）
    // 默认false 表示顺时针

6.设置图形的样式

context.strokeStyle="颜色"

7.渲染路径

context.fill();

context.stroke();

Canvas的概述

定义:

        <canvas>是html5新增的标签

        canvas提供了给Javascript绘图接口

        canvas绘图创建在坐标系上

应用领域:

        炫