canvas 简介

Posted 2020-10-15

Canvas的概述

定义

• <canvas>是H5新增的标签
• canvas提供给了 javascript 绘图接口
• canvas绘图建立在坐标系上

应用领域

• 炫酷特效、banner
• 可视化数据（图表）
• 游戏
• 大型应用（地图）
• 在线系统 （在线PS ）

canvas标签

• 属性 width
• 属性 height
• 方法 getContext() 可选的参数 "2d" / "webgl" 返回上下文环境

绘图环境

• 该对象提供API，让JavaScript来绘制图形

绘图基础

路径的开启和闭合

• beginPath() 开启路径
• closePath() 关闭路径 （把路径闭合）

设置起点

• moveTo(x, y)

画线

• lineTo(x , y) 绘制直线

描边

• lineWidth 属性 设置描边线的粗细
• strokeStyle 属性 设置描边颜色
• stroke() 绘制

填充

• fillStyle 属性 填充颜色
• fill() 执行填充

快速矩形

• rect(x, y, width, height) 绘制矩形路径
• strokeRect(x, y, width, height) 描边矩形
• fillStroke(x, y, width, height) 填充矩形
• clearRect(x, y, width. height) 清除矩形 （可以用来清除屏幕）

圆弧

• arc(x, y, radius, start, end, true/false) 圆弧路径
• start 表示开始的弧度（位置） 0弧度是三点钟方向
• end 表示结束的弧度（位置）
• 默认false 表示顺时针

绘制文字

• font 属性 设置文字的风格、大小、字体 值 同css的font属性
• textAlign 属性 文字水平对齐方式 (start/left/center/right/end)
• textBaseline 属性 文字的垂直对齐方式 (top/middel/bottom/alphabetic)
• strokeText(text, x, y) 描边字
• fillText(text, x, y) 填充字
• measureText(text) 返回对象 文字的宽度 取决于字体大小

绘制图片

• drawImage(img, x, y) 简单绘制图片
• drawImage(im, x, y, w, h) 绘制图片并指定在画布上的大小
• drawImage(im, sx, sy, sw, sh, x, y, w, h) 裁剪图片并把裁剪部分绘制到画布
• 其中 img是图片的dom对象， 配合onload事件

设置阴影

• shadowColor 阴影颜色
• shadowBlur 阴影模糊值
• shadowOffsetX 阴影x偏移量
• shadowOffsetY 阴影y偏移量

渐变

• createLinearGradient(x, y, x1, y1) 创建线性渐变
• createRadialGradient(cx1, cy1, r1, cx2, cy2, r2);

线条样式

• lineCap 属性 线条两端样式 butt/round/square
• lineJoin 属性 线条相交样式 miter/bevel/square

---

Cavnas 高级

变换--位移

• translate(x, y)

变换-缩放

• scale(xS, yS)

变换-旋转

• rotate(弧度)

环境的保存和释放

• save()

• restore()

  设置透明度

• globalAlpha 属性 设置绘图环境的不透明度 值 0~1之间

限制绘图区域

• clip() 配合路径。 对绘图环境进行的限制

输入base64编码

• canvasEle.toDataURL()

画布渲染画布

• 使用 drawImage() 把canvas元素当做img元素

贝塞尔曲线

• bezierCurveTo()

绘制圆角

• arcTo(x1, y1, x2, y2, r);

Cavnas 第三方类库

常见的第三方类库

• konva.js
• chart.js 图表插件
• eccharts 图表插件(百度)
• tree.js (3d webgl 库)

第三方类库 Konva

Konva的结构

• 舞台 (stage)--> 层(layer) --> 图形
• Statge --> Layer ---> 分组 （--->分组---->） ---> 图形

Konva 绘制图形

• Konva.Rect
• Konva.Circle
• Konva.Wedge
• Konva.Line
• Konva.Star
• Konva.Image
• ......