Canvas知识整理part1

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

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

默认的宽高为:300 * 150

Canvas 使用注意:

  • 设置 canvas 宽高 canvas 只是一个画布,不能直接自己绘图,绘图需要使用工具
  • 设置 canvas 宽和高的时候不推荐使用 css 样式去设置,因为会有拉伸的效果
  • 在不支持的浏览器中,canvas 中的内容会正常的现实出来
  • canvas 标签内部书写内容,在支持的浏览器中,该内容会被忽略
  • 在不支持的浏览器中会将 canvas 标签会当作 div 标签来处理

canvas 的使用领域

canvas 的使用领域很多:

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

Canvas 怎么用?

  1. 创建一个 Canvas 标签
  2. 获取到该 DOM 对象
  3. Canvas 只是一个画布,不能自己画画,需要画图工具
  4. 每个 Canvas 对应一个画图工具,通过 canvas 对象 .getContext("2d") 参数有 2dwebgl 两种 2d 获取到一个 CanvasRenderingContext2D 类型的对象,使用 webgl 返回 WebGLRenderingContext 类型的对象.

如何画直线

  1. 先确定在何处下笔,画图工具 .moveTo(x, y)
  2. 确定从开始的点画到哪里去, 画图工具 .lineTo(x, y)
  3. 上面两步之后,线并没有画出来,而是描点,需要最后一步进行画线 画图工具 .stroke();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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();

lineTo的特性

每次 lineTo 之后都会记录最后的 lineTo 的点,下次 lineTo 的时候就接着这个 canvas 只是一个画布,不能直接自己绘图,绘图需要使用工具sssss点继续画

closePath

将最后一次 lineTo 的点 和最后一次 moveTo 的点连起来的
两条线的交界处,如果使用的是 closePath 会补全缺口

1
2
3
4
5
ctx.moveTo( 100, 100 );
ctx.lineTo( 300, 100 );
ctx.lineTo( 300, 200 );
ctx.closePath();
ctx.stroke();

fill

可以将闭合的图形进行填充

非零填充原则

从一个闭合空间引出一条直线,如果该直线两边的箭头数量不相等,则要填充,如果相等则不填充

一边有一个箭头就+1
另一边有一个箭头就-1

如何绘制曲线?

使用 for 循环给每一个 x 对应一个 y 值,xy 的关系需要是个多次幂的方程

路径概念

路径就是一次绘图,包含该次绘图中的所有的状态,线宽 颜色 是否虚线

如果想要改变状态,就需要开启新的路径

beginPath

可以用来开启新的路径

线型相关属性

名称 描述
lineWidth 画线的时候的线的宽度
setLineDash() 设置虚线各个线段的长度,参数是一个数组,会将数组中的数字循环使用
getLineDash() 获取虚线各个线段的长度,如果是实线,获取到的是空数组
lineDashOffset 设置虚线的偏移量,正值往左,负值往右
strokeStyle 设置描边的,画线的颜色,颜色值可以为css中任意一种
fillStyle 设置填充颜色,颜色值可以为css中任意一种

渐变色

将线划分为 256 份,每一份为一个颜色,新画一条线,依次递增,就形成了一个颜色渐变的线段