Canvas基础讲义

今天先花点简单的篇幅和大家介绍下canvas。

1. 基本篇

1.1. 什么是 Canvas

canvas 是 HTML5 提供的一个用于展示绘图效果的标签. canvas 原意画布, 帆布. 在 HTML 页面中用于展示绘图效果. 最早 canvas 是苹果提出的一个方案, 今天已经在大多数浏览器中实现.

canvas 英 ['kænvəs]  美 ['kænvəs]   帆布 画布

1.1.1. canvas 的基本用法

基本语法

    <canvas></canvas>

1. 使用 canvas 标签, 即可在页面中开辟一格区域. 可以设置其 width 和 height 设置该区域的尺寸.
2. 默认 canvas 的宽高为 300 和 150.
3. 不要使用 CSS 的方式设置宽高, 应该使用 HTML 属性.
4. 如果浏览器不支持 canvas 标签, 那么就会将其解释为 div 标签. 因此常常在 canvas 中嵌入文本, 以提示用户浏览器的能力.
5. canvas 的兼容性非常强, 只要支持该标签的, 基本功能都一样, 因此不用考虑兼容性问题.
6. canvas 本身不能绘图. 是使用 JavaScript 来完成绘图. canvas 对象提供了各种绘图用的 api.

canvas 的使用领域

canvas 的使用领域很多:

1. 游戏
2. 可视化数据(重点)
3. banner 广告
4. 多媒体
5. 未来
   • 模拟仿真
   • 远程操作
   • 图形编辑

1.1.2. 我们的目标

1. 学会使用基本的 canvas api, 使用 canvas 可以完成简单的绘图
2. 实现数据的可视化

1.2. 基本绘图

1.2.1. 基本绘图方法

绘图步骤

1. 获得 canvas 对象.
2. 调用 getContext 方法, 提供字符串参数 '2d'.
3. 该方法返回 CanvasRenderingContext2D 类型的对象. 该对象提供基本的绘图命令.
4. 使用 CanvasRenderingContext2D 对象提供的方法进行绘图.
5. 基本绘图命令
   • 设置开始绘图的位置: context.moveTo( x, y ).
   • 设置直线到的位置: context.lineTo( x, y ).
   • 描边绘制: context.stroke().
   • 填充绘制: context.fill().
   • 闭合路径: context.closePath().

01-绘制基本线

    var canvas = document.createElement( 'canvas' );
    canvas.width = 500;
    canvas.height = 400;
    canvas.style.border = '1px dashed red';
    document.body.appendChild( canvas );
    // 获得 CanvasRenderingContext2D 对象
    var context = canvas.getContext( '2d' );
    // 设置 起点
    context.moveTo( 0, 0 );
    // 绘制直线
    context.lineTo( 500, 400 );
    // 设置 起点
    context.moveTo( 0, 400 );
    // 绘制直线
    context.lineTo( 500, 0 );
    // 描边显示效果
    context.stroke();

1.2.1.1. getContext 方法

语法: Canvas.getContext( typeStr )

描述:

1. 该方法用于绘制上下文工具.
2. 如果是绘制平面图形使用 '2d' 作为参数, 如果绘制立体图形使用 'webgl'.
3. 使用 '2d' 返回 CanvasRenderingContext2D 类型的对象.
4. 使用 'webgl' 返回 WebGLRenderingContext 类型的对象.

1.2.1.2. moveTo 方法

语法: CanvasRenderingContext2D.moveTo( x, y )

描述:

1. 该方法用于设置绘制起点.
2. 其中参数 x, y 表示在坐标系中的位置, 分别是 x 坐标与 y 坐标.

1.2.1.3. lineTo 方法

语法: CanvasRenderingContext2D.lineTo( x, y )

描述:

1. 该方法用于设置需要绘制直线的另一个点. 最终描边后会连线当前点和方法参数描述的点.
2. 其中参数 x, y 表示在坐标系中的位置, 分别是 x 坐标与 y 坐标.

1.2.1.4. stroke 方法

语法: CanvasRenderingContext2D.stroke()

描述: 该方法用于连线, 将描述的所有点按照指定顺序连接起来.

1.2.1.5. 结论

1. 绘图先要获得上下文, 即绘图工具
2. 绘图需要设置开始的坐标
3. 绘图是先描点, 然后一个一个依次连线
4. 依次绘图只能绘制单一样式( 色彩等 )