可视化-Canvas
[TOC]
Canvas
canvas 最早由Apple引入WebKit,用于Mac OS X 的 Dashboard,后来又在Safari和Google Chrome被实现。 基于 Gecko 1.8的浏览器,比如 Firefox 1.5, 同样支持这个元素。
<canvas> 元素是WhatWG Web applications 1.0规范的一部分,也包含于HTML 5中。
API
HTMLCanvasElement
初始化：
html
<canvas id="canvas"></canvas>ts
const el = document.querySelector<HTMLCanvasElement>('#canvas')属性：
- el.width：
number，默认：300，画布的宽度 - el.height：
number，默认：150，画布的高度
方法：
- el.getContext()：
(contextType, contextAttributes)，返回画布上的绘图上下文- contextType：
'2d' | 'webgl' | 'webgl2' | 'bitmaprenderer'，默认：，上下文类型2d：常用，建立一个 CanvasRenderingContext2D 二维渲染上下文webgl：创建一个 WebGLRenderingContext 三维渲染上下文对象webgl2：创建一个 WebGL2RenderingContext 三维渲染上下文对象bitmaprenderer：创建一个只提供将 canvas 内容替换为指定ImageBitmap功能的ImageBitmapRenderingContext
- contextAttributes：
，默认：，可以在创建渲染上下文的时候设置多个属性【更多】
- contextType：
- el.toDataURL()：
(type, encoderOptions)，返回一个数据 URL，该 URL 包含由类型参数指定的格式的图像。- type：
string，默认：image/png，图片格式。 - encoderOptions：
number，默认：0.92，从 0 到 1 的区间内选择图片的质量。 - 返回： 包含 data URI 的字符串。如：
"data:image/png;base64,xxxx..."
- type：
CanvasRenderingContext2D
初始化：
ts
const ctx = el.getContext('2d')设置：
线型：
- ctx.lineWidth：
，默认：1.0，线的宽度。 - ctx.lineJoin：
'round' | 'bevel' | 'miter'，默认：'miter'，定义两线相交拐点的类型。
文本样式：
- ctx.font：
，默认：10px sans-serif，字体设置。 - ctx..textBaseline：
'top' | 'hanging' | 'middle' | 'alphabetic' | 'ideographic' | 'bottom'，默认：'alphabetic'，基线对齐设置。
填充和描边样式：
- ctx.fillStyle：
color| gradient | pattern，默认：#000，图形内部的颜色和样式。 - ctx.strokeStyle：
color| gradient | pattern，默认：#000，图形边线的颜色和样式。
渐变和图案：
- ctx..createLinearGradient()：
(x0, y0, x1, y1)，创建一个沿着参数坐标指定的线的线性渐变。- x0, y0：
，默认：，起点坐标。 - x1, y1：
，默认：，终点坐标。
- x0, y0：
- ctx..createRadialGradient()：
(x0, y0, r0, x1, y1, r1)，创建一个沿着参数坐标指定的线的放射性渐变。- x0, y0：
，默认：，开始圆形的圆心。 - r0：
，默认：，开始圆形的半径。 - x1, y1：
，默认：，结束圆形的圆心。 - r1：
，默认：，结束圆形的半径。
- x0, y0：
- ctx..createPattern()：
(image, repetition)，使用指定的图片创建图案。- image：
，默认：，作为重复图像源的 CanvasImageSource 对象。 - repetition：
'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat'，默认：'repeat'，指定如何重复图像。
- image：
路径：
- ctx.beginPath()：
()，清空子路径列表开始一个新的路径。 - ctx.closePath()：
()，使笔点返回到当前子路径的起始点。它尝试从当前点到起始点绘制一条直线。 - ctx.moveTo()：
(x, y)，将一个新的子路径的起始点移动到 (x，y) 坐标。 - ctx.lineTo()：
(x, y)，使用直线连接子路径的最后的点到 (x，y) 坐标。 - ctx.bezierCurveTo()：
(cp1x, cp1y, cp2x, cp2y, x, y)，添加一个 3 次贝赛尔曲线路径。起始点是当前路径的最后一个点，绘制贝赛尔曲线前，可以通过调用moveTo()进行修改。- cp1x, cp1y：
number，默认：，第一个点。 - cp2x, cp2y：
number，默认：，第二个点。第一、第二个点是控制点 - x, y：
number，默认：，第三个点是结束点。
- cp1x, cp1y：
- ctx.arc()：
(x, y, radius, startAngle, endAngle, anticlockwise)，绘制一段圆弧路径。- x, y：
number，默认：，圆心点。 - radius：
number，默认：，半径。 - startAngle, endAngle：
弧度，默认：，开始、结束角度。 - anticlockwise：
boolean，默认：false，true: 逆时针，false: 顺时针。
- x, y：
- ctx.ellipsis()：
(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise)，添加一个椭圆路径。- x, y：
number，默认：，椭圆的圆心。 - radiusX, radiusY：
number，默认：，半径。 - rotation：
弧度，默认：，椭圆的旋转角度。 - startAngle, endAngle：
弧度，默认：，绘制的起始点、结束点角度 - anticlockwise：
boolean，默认：false，true: 逆时针，false: 顺时针。
- x, y：
- ctx.rect()：
(x, y, width, height)，创建一个矩形路径。- x, y：
number，默认：，矩形的起点位置。 - width, height：
number，默认：，矩形的宽度、高度
- x, y：
变换：
- ctx.rotate()：
(angle)，在变换矩阵中增加旋转。- angle：
弧度，默认：，顺时针旋转的弧度。可以使用公式：degree * Math.PI / 180。可以通过 translate() 方法改变中心点。
- angle：
- ctx.scale()：
(x, y)，为 canvas 单位添加缩放变换。- x, y：
，默认：，水平、垂直方向的缩放因子。
- x, y：
- ctx.translate()：
(x, y)，添加平移变换。- x, y：
，默认：，水平、垂直方向的移动距离。
- x, y：
绘制：
绘制路径：
- ctx.fill()：
()，使用当前的样式填充子路径。 - ctx.stroke()：
()，使用当前的样式描边子路径。
绘制矩形：
- ctx.fillRect()：
(x, y, width, height)，绘制填充矩形。- x, y：
，默认：，矩形起始点。 - width, height：
，默认：，矩形的宽度、高度。
- x, y：
- ctx..strokeRect()：
(x, y, width, height)，绘制一个描边矩形。- x, y：
，默认：，矩形起始点。 - width, height：
，默认：，矩形的宽度、高度。
- x, y：
绘制文本：
- ctx.fillText()：
(text, x, y)，绘制填充文本- text：
，默认：，文本内容。 - x, y：
，默认：，文本起始点。
- text：
- ctx.strokeText()：
(text, x, y)，绘制描边文本- text：
，默认：，文本内容。 - x, y：
，默认：，文本起始点。
- text：
绘制图像：
- ctx.drawImage()：
(image, sx, sy, sWidth?, sHeight?, dx?, dy?, dWidth?, dHeight?)，绘制指定的图片。- image：
，默认：，绘制到上下文的元素。允许任何的画布图像源。 - sx, sy：
，默认：，image的矩形（裁剪）选择框的左上角坐标。 - sWidth?, sHeight?：``，
默认：，image的矩形（裁剪）选择框的宽高。 - dx?, dy?：``，
默认：，目标画布上的左上角坐标。 - dWidth?, dHeight?：``，
默认：，目标画布上绘制的宽高。
- image：
体验Canvas
什么是Canvas？
HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
画布是一个矩形区域，您可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
创建Canvas元素
向 HTML5 页面添加 canvas 元素。
规定元素的 id、宽度和高度：
html
<canvas id="myCanvas" width="200" height="100"></canvas>Canvas坐标系
通过JavaScript来绘制
javascript
/*获取元素*/
var myCanvas = document.querySelector('#myCanvas');
/*获取绘图工具*/
var context = myCanvas.getContext('2d');
/*设置绘图的起始位置*/
context.moveTo(100,100);
/*绘制路径*/
context.lineTo(200,200);
/*描边*/
context.stroke();Canvas的基本使用
图形绘制
需要理解些概念：
路径的概念
路径的绘制
描边 stroke()
填充 fill()
闭合路径
- 手动闭合
- 程序闭合 closePath()
填充规则(非零环绕)
开启新的路径 beginPath()
设置样式
- 画笔的状态
- lineWidth 线宽，默认1px
- lineCap 线末端类型：(butt默认)、round、square
- lineJoin 相交线的拐点 miter(默认)、round、bevel
- strokeStyle 线的颜色
- fillStyle 填充颜色
- setLineDash() 设置虚线
- getLineDash() 获取虚线宽度集合
- lineDashOffset 设置虚线偏移量（负值向右偏移）
实例练习
- 渐变色绘制
- 镂空的房子
- 绘制坐标网格
- 绘制坐标系
- 绘制坐标点
- 绘制折线图
参考文档
Canvas图形绘制
矩形绘制
context.rect(x,y,width,height)- 创建矩形， 没有独立路径x - 矩形左上角的 x 坐标
y - 矩形左上角的 y 坐标
width - 矩形的宽度，以像素计
height - 矩形的高度，以像素计
context.strokeRect(x,y,width,height)- 绘制矩形（无填充），有独立路径，不影响别的绘制x - 矩形左上角的 x 坐标
y - 矩形左上角的 y 坐标
width - 矩形的宽度，以像素计
height - 矩形的高度，以像素计
context.fillRect(x,y,width,height)- 绘制“被填充”的矩形，有独立路径，不影响别的绘制x - 矩形左上角的 x 坐标
y - 矩形左上角的 y 坐标
width - 矩形的宽度，以像素计
height - 矩形的高度，以像素计
context.clearRect(x,y,width,height)- 在给定的矩形内清除指定的像素x - 矩形左上角的 x 坐标
y - 矩形左上角的 y 坐标
width - 矩形的宽度，以像素计
height - 矩形的高度，以像素计
圆弧绘制
弧度概念
context.arc(x,y,r,sAngle,eAngle,counterclockwise)- 创建弧/曲线（用于创建圆或部分圆）x - 圆心横坐标
y - 圆心纵坐标
r - 半径
sAngle - 开始角度
eAngle - 结束角度
counterclockwise - 是否逆时针方向绘制（默认false表示顺时针；true表示逆时针）
绘制文本
- ctx.font = '微软雅黑' 设置字体
- strokeText()
- fillText(text,x,y,maxWidth)
- text 要绘制的文本
- x,y 文本绘制的坐标（文本左下角）
- maxWidth 设置文本最大宽度，可选参数
- ctx.textAlign文本水平对齐方式，相对绘制坐标来说的
- left
- center
- right
- start 默认
- end
- ctx.direction属性css(rtl ltr) start和end于此相关
- 如果是ltr,start和left表现一致
- 如果是rtl,start和right表现一致
- ctx.textBaseline 设置基线（垂直对齐方式 ）
- top 文本的基线处于文本的正上方，并且有一段距离
- middle 文本的基线处于文本的正中间
- bottom 文本的基线处于文本的证下方，并且有一段距离
- hanging 文本的基线处于文本的正上方，并且和文本粘合
- alphabetic 默认值，基线处于文本的下方，并且穿过文字
- ideographic 和bottom相似，但是不一样
- measureText() 获取文本宽度obj.width
实例练习
- 绘制扇形
- 绘制圆角矩形
- 绘制圆
- 绘制饼图
做动画
绘制图片
- drawImage()
- 三个参数drawImage(img,x,y)
- img 图片对象、canvas对象、video对象
- x,y 图片绘制的左上角
- 五个参数drawImage(img,x,y,w,h)
- img 图片对象、canvas对象、video对象
- x,y 图片绘制的左上角
- w,h 图片绘制尺寸设置(图片缩放，不是截取)
- 九个参数drawImage(img,x,y,w,h,x1,y1,w1,h1)
- img 图片对象、canvas对象、video对象
- x,y,w,h 图片中的一个矩形区域
- x1,y1,w1,h1 画布中的一个矩形区域
- 三个参数drawImage(img,x,y)
序列帧动画
- 绘制精灵图
- 动起来
- 控制边界
- 键盘控制
坐标变换
- 平移 移动画布的原点
- translate(x,y) 参数表示移动目标点的坐标
- 缩放
- scale(x,y) 参数表示宽高的缩放比例
- 旋转
- rotate(angle) 参数表示旋转角度