熬夜总结了 “HTML5画布” 的知识点（共10条）

前言

html5Canvas的知识点，是程序员开发者必备技能，在实际工作中也常常会涉及到。

最近熬夜总结html5Canvas相关的知识点，大家一起看一下吧：

1.html5Canvas基础知识

• Canvas，它是画布
• Canvas元素用于在网页上绘制2D图形和图像

Canvas使用的场景有：1，动画；2，H5游戏；3，图表。

效果动画，加载Loading:

H5游戏效果：

对于Canvas需要掌握：

使用Canvas画直线，矩形，圆形以及设置它们的样式。

Canvas中的图形变换，渐变，文字和图片。

1. Canvas的像素获取，阴影和曲线绘制以及区域的剪辑。
2. Canvas动画，交互和离屏技术。

使用Canvas画基本图形

• Canvas的坐标体系
• 使用Canvas画直线，矩形，圆形
• 为圆形设置样式

Canvas坐标体系

• canvas默认大小，300*150
• 通过HTML，css，JavaScript设置width和height的区别
• HTML和JavaScript设置的画布大小
• css设置的是画布缩放后的大小
• 坐标系原点及方向（原点在左上角，向右为x方向，向下为y方向）

画直线，矩形和原型

• 画直线：ctx.moveTo(x1,y1)，ctx.lineTo(x2,y2)
• 画圆形: ctx.arc(x,y,radius,0,Math.PI*2,true)
• 画矩形：可以通过直线来画，也可以直接用（ctx.strokeRect(x1,y1,x2,y2）

beginPath和closePath

1. beginPath和closePath并不是成对出现的
2. beginPath的作用是开始一条新路径
3. closePath的作用是使当前路径闭合

描边和填充样式

1. strokeStyle用来设置画笔样式，也就是直线，曲线，边框的样式
2. fillStyle用来设置 填充样式
3. lineWidth用来设置线条的粗细

Canvas中的图形变换，渐变，文字和图片

1. Canvas中的图像变换
2. Canvas中的渐变
3. Canvas中的文字
4. Canvas中的图片

Canvas中的图形变换

图形变换都是针对坐标系来说的：

• 平移：ctx.translate(x,y)
• 旋转：ctx.rotate(rad)
• 缩放：ctx.scale(x,y)

save和restore

用来保存和恢复上下文的环境ctx，一般成对出现

• ctx.save()，保存当前上下文环境。
• ctx.restore()，恢复到上一次的上下文环境

Canvas中的渐变

1. 线性渐变：ctx.createLinearGradient(xStart,yStart,xEnd,yEnd)
2. (xStart,yStart)是线段的起点，(xEnd,yEnd)是线段终点。起点到终点之间的颜色呈渐变。
3. gradient.addColorStop可以来控制渐变的颜色
4. 渐变可以理解为一种颜色
5. 径向渐变：

ctx.createRadialGradient(xStart,yStart, radiusStart,xEnd,yEnd,radiusEnd);

(xStart,yStart)是第一个圆的原心，radiusStart是第一个圆的半径，(xEnd,yEnd)是第二个圆的原心，radiusEnd是第二个圆的半径

第一圆到第二个圆之间的颜色呈现渐变。

Canvas中的文字

描边文字：ctx.strokeText(text,x,y)

填充文字：ctx.fillText(text,x,y);

设置字体样式：ctx.font

• 例如：ctx.font="bold 100px sans-serif"
• 设置水平对齐方式：ctx.textAlign
• left,start，左对齐，center居中对齐，end,right，右对齐

设置垂直对齐方式：ctx.textBaseline

• top，顶对齐，middle，居中，bottom，底部对齐
• 计算文本宽度：ctx.measuerText(text).width 须在设置字体样式之后计算

Canvas图片

绘制图片3种方法

• ctx.drawImage(image,x,y)，该方法把图片绘制在(x,y)处
• ctx.drawImage(image,x,y,w,h)，该方法把图片绘制在(x,y)处，并缩放为宽w,高h
• ctx.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)，该方法把图片中(sx,sy)处的宽sw，高sh的区域，绘制到(dx,dy)处，并缩放为宽dw，高dh

在image加载完成之后绘制：

示例：

Canvas绘制

• Canvas的图形绘制和像素获取
• Canvas阴影绘制
• Canvas剪辑区域
• Canvas曲线绘制

Canvas图形画刷

ctx.createPattern可以创建一个画刷模式，进而可以设置到fillStyle里，进行画刷的填充。

• 函数原型：ctx.createPattern(image,type)

type取值:

• no-repeat不平铺
• repeat-x橫方向平
• repeat-y纵方向平铺
• repeat全方向平铺

Canvas像素操作

获取像素

设置像素

设置像素

Canvas阴影绘制

1. ctx.shadowOffsetX:阴影x方向的偏移距离
2. ctx.shadowOffsetY:阴影y方向的偏移距离
3. ctx.shadowColor：阴影的颜色
4. ctx.shadowBlur：阴影的模糊半径

效果图：

Canvas剪辑区域

1. 设置一个路径；
2. 调用ctx.clip();
3. 再绘制图形。

Canvas绘制曲线

狐线：

生成工具

Canvas Quadratic Curve Example

http://blogs.sitepointstatic.com/examples/tech/canvas-curves/quadratic-curve.html

http://blogs.sitepointstatic.com/examples/tech/canvas-curves/bezier-curve.html

二次样条曲线：

贝塞尔曲线：

• Canvas动画，Canvas离屏技术

1. ctx.clearRect(x,y, width,height)

清除(x,y)点起， 宽width,高height的区域，用于重新绘制

离屏技术是什么：通过在离屏Canvas中绘制元素，再复制到显示Canvas中，从而大幅提高性能的一种技术。

使用离屏技术：

• 静态场景绘制特别耗资源，动态场景绘制简单。为了不每次更新动态场景的时候，都去绘制静态场景。
• 一般把静态场景绘制在离屏canvas上，更新动态场景的时候，把静态场景copy过来，而不是重新绘制。

离屏技术：

一个Canvas中的图形绘制到另一个Canvas方法：

对canvas插件的相关了解

什么是Canvas插件，掌握Chart.js插件，了解Chartist.js和HighCharts.js插件

（图表）Chart.js插件：https://www.chartjs.org/

Chartist.js插件是一个简单的响应式图表插件：支持SVG格式（http://gionkunz.github.io/chartist-js/）

HighCharts.js插件：方便快捷的HTML5交互性图标库：https://www.highcharts.com/

Chartist.js插件与HighCharts.js插件

• Chartist.js配置简单，css和JavaScript分离，响应式图表，支持不同的浏览器尺寸和分辨率。
• HighCharts.js，兼容当今所有的浏览器，包含iPhone，IE，火狐等。

响应式布局，它的用户体验友好，响应式网站可以根据不同终端，不同尺寸和不同应用环境，自动调整界面布局，展示内容，提供非常好的视觉效果。响应式布局就是一个网站能够兼容多个终端

2. 构建Canvas元素

示例：

使用JavaScript实现绘图的流程

在开始绘图时，先要获取Canvas元素的对象，在获取一个绘图的上下文。

获取Canvas对象 ,使用document对象的getElementById()方法获取。

创建二维的绘图上下文对象

使用getContext()方法来获取

在Canvas上绘制文字

绘制图像：

使用drawImage()方法可以将图像添加到Canvas画布中，绘制一幅图像，需要有三个重载的方法：

使用：

参数：

插入图像：

在Canvas中绘制文字“达达前端”:

3.绘制矩形

两个方法：

1. strokeRect() - 矩形边框
2. fillRect() - 填充矩形区域
3. strokeStyle - 设置线条的颜色
4. lineWidth - 设置线条宽度，默认宽度为1，单位是像素
5. fillStyle - 设置区域或文字的填充颜色

绘制矩形边框，使用strokeStyle方法：

填充矩形区域，使用fillRect()方法：

绘制矩形

使用clearRect方法，可以擦除指定的矩形区域：

4.体验canvas绘图

在实际开发中，画布是默认300*150的大小。

示例：

创建Canvas元素

向 HTML5 页面添加 canvas 元素

图形绘制

需要理解些概念：

• 路径的概念
• 路径的绘制
  • 描边 stroke()
  • 填充 fill()
• 闭合路径
  • 手动闭合
  • 程序闭合 closePath()
• 开启新的路径 beginPath()

设置样式

• 画笔的状态
  • lineWidth 线宽，默认1px
  • lineCap 线末端类型：(butt默认)、round、square
  • lineJoin 相交线的拐点 miter(默认)、round、bevel
  • strokeStyle 线的颜色
  • fillStyle 填充颜色
  • setLineDash() 设置虚线
  • getLineDash() 获取虚线宽度集合
  • lineDashOffset 设置虚线偏移量（负值向右偏移）

矩形绘制

• rect(x,y,w,h) 没有独立路径
• strokeRect(x,y,w,h) 有独立路径，不影响别的绘制
• fillRect(x,y,w,h) 有独立路径，不影响别的绘制
• clearRect(x,y,w,h) 擦除矩形区域

圆弧绘制

• 弧度概念
• arc()
  • x 圆心横坐标
  • y 圆心纵坐标
  • r 半径
  • startAngle 开始角度
  • endAngle 结束角度
  • anticlockwise 是否逆时针方向绘制（默认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 画布中的一个矩形区域

坐标变换

• 平移 移动画布的原点
  • translate(x,y) 参数表示移动目标点的坐标
• 缩放
  • scale(x,y) 参数表示宽高的缩放比例
• 旋转
  • rotate(angle) 参数表示旋转角度

5.使用路径

1. lineTo()
2. rect()
3. arc()
4. fill()
5. stroke()

创建绘图路径

使用方法：beginPath()和closePath()，分别表示开始一个新的路径和关闭当前的路径

1. 使用beginPath()方法创建一个新的路径
2. moveTo(x,y)，开始绘图时的坐标
3. lineTo(x,y)，绘制直线到目标坐标
4. arc(x,y, radius, startAngle,endAngle, counterclockwise)

• x,y描述弧的圆形的圆心坐标
• radius圆形的半径
• startAngle描述弧的开始点的角度
• endAngle描述弧的结束点的角度
• counterclockwise，true值，表示逆时针方向，否则反之

1. rect(x,y, width, height)：xy,起点坐标，矩形的宽高，绘制矩形路径

closePath方法关闭当前路径

绘制图形样式

1. stokeStyle 属性设置矩形边框的颜色
2. lineWidth 属性设置边框的宽度
3. fillStyle 属性设置填充的颜色

绘制网格，网格大小

绘制坐标系，确定圆点，确定离画布旁边的距离，确定坐标轴的长度，确定箭头的大小，绘制箭头填充。

arc方法和rect方法

arc创建一个圆形，rect创建一个矩形，最后调用stroke()方法和fill()方法

使用beginPath()方法可以新创建一个子路径，closePath()方法用来闭合路径的。

绘制两条直线

• beginPath() 方法开始一条路径，或者重置当前的路径
• closePath() 方法创建从当前点到开始点的路径

如果不用beginPath()方法，绘制图形时不再创建子路径，第一次的图形在执行过程中会被绘制填充两次。

图形组合

属性 globalCompositeOperation 设置如何在画布上组合颜色

12中组合类型：

绘制曲线

• x,y 表示弧的圆形的圆心坐标
• radius 表示弧的圆形的半径
• startAngle 表示圆弧的开始点的角度
• endAngle 表示圆弧的结束点的角度
• counterclockwise 若true表示逆时针，false反之顺时针

如果使用css设置宽高，画布会按照300*150的比例进行缩放，将300*150的页面显示在400*400的容器中。

使用js动态设置宽高。

建议使用HTML中的width和height，或者js动态设置宽高

创建一个canvas标签，第一步：

方法：

• fill() 填充路径
• stroke() 描边
• arc() 创建圆弧
• rect() 创建矩形
• fillRect() 绘制矩形路径区域
• strokeRect() 绘制矩形路径描边
• clearRect() 在给定的矩形内清除指定的像素
• beginPath() 起始一条路径，或重置当前路径
• moveTo() 把路径移动到画布中的指定点，不创建线条
• lineTo()添加一个新点，在画布中创建从该点到最后指定点的线条
• clip() 从原始画布剪切任意形状和尺寸的区域
• arcTo() 创建两切线之间的弧/曲线
• quadraticCurveTo() 创建二次方贝塞尔曲线
• bezierCurveTo() 创建三次方贝塞尔曲线
• isPointInPath() 如果指定的点位于当前路径中，则返回 true，否则返回 false

辅助线绘制弧线：arcTo() 方法

语法：

arcTo()方法绘制一条弧线

代码：

绘制二次样条曲线

quadraticCurveTo()方法：

绘制贝济埃曲线

bezierCurveTo()方法：它是应用于二维图形应用程序的数学曲线。

绘制曲线：

四分之一圆

• lineCap 设置或返回线条的结束断点样式
• lineJoin 设置或返回两条线相交时，产生拐角类型
• lineWidth 设置或返回当前的线条宽度
• miterLimit 设置或返回最大斜接长度

1. fillRect() 绘制一个实心矩形
2. strokeRect() 绘制一个空心矩形

设置阴影，shadowBlur -context.shadowBlur = 20

• createLinearGradient() 创建线性渐变
• createPattern() 在指定的方向上重复指定的元素
• createRadialGradient() 创建放射状/环形的渐变
• addColorStop() 规定渐变对象中的颜色和停止位置

1. scale() 缩放当前绘图变大或变小
2. rotate() 旋转当前绘图
3. translate() 重新映射画布的(0,0)位置

6.使用图像

使用三种方法插入图像

在插入图像之前，需要考虑图像加载的时间，如果图像没加载完成就已经执行drawImage()方法，就不会显示任何图片。

7.绘制渐变

提供了两种渐变的创建的方法：

设置渐变颜色和过渡方式

语法如下：

1. offset是一个范围在0.0到1.0之间的浮点值 表示渐变的开始点和结束点之间的一部分
2. offset的0为开始点，1为结束点

绘制线性渐变的矩形

绘制径向渐变的矩形

描边属性

线帽属性：lineCap，表示指定线条的末端如何绘制 值：lineCap: butt, round, square，当线条具有一定的宽度才能表现出来。

线条的连接属性lineJoin，用于两条线条到的连接方式：

miter 两条线段的外边缘一直延伸到它们相交，属性miterLimit是用来描述如何绘制两条线段的交点，是表示延伸长度和线条长度的比值。

默认为10，只有miter使用时有效

8.模式

语法如下：

1. repeat 表示图像在各个方向上循环平铺
2. repeat-x 表示图像在横向上循环平铺
3. repeat-y 表示图像在纵向上循环平铺
4. no-repeat 表示图像只使用一次

移动变化：

缩放变换，语法如下：

旋转变换：

矩形变形，语法如下：

9.使用文本

绘制文本的方法：

1. fillText(text, x, y, maxwidth)
2. strokeText(texxt, x, y, maxwidth)

• text表示要绘制的文本
• 参数x表示绘制文字的起点横坐标
• 参数y表示绘制文字的起点纵坐标
• 参数maxwidth表示显示文本的最大宽度

文本属性表：

绘制文本

绘制获取文本宽度的measureText()方法：

测量文本的宽度：

阴影效果

阴影属性表：

状态保存和恢复

1. 状态保存方法save()
2. 状态恢复方法restore()，恢复最后一次保存的状态

状态的保存和恢复是通过数据栈进行的

10.操作像素

1. 图像数据对象ImageData
2. 获取图像数据的方法getImageData()，用于从Canvas上下文中获取图像数据。getImageData(sx, sy, sw, sh);
3. 绘制图像数据的方法putImageData() getImageData(imagedata,dx,dy[,..])
4. 创建图像数据的方法createImageData()

绘制海报

小结

canvas标签的使用

曲线

1. 二次贝塞尔曲线quadraticCurveTo( cp1x, cp1y , x ,y ) (cp1x,cp1y) 控制点 (x,y)结束点
2. 三次贝塞尔曲线bezierCurveTo( cp1x, cp1y ,cp2x , cp2y ,x , y ) （cp1x,cp1y）控制点1 (cp2x,cp2y) 控制点2 (x,y)结束点

HTML5绘图制作海报

html5绘图操作（html2canvas）

crossOrigin属性设置成Anonymous就可以跨域? - 并不可以的哦！

1. 后台解决跨域问题
2. 转成base64格式（后端，前端，建议前端）

html5移动端生成海报

大致效果：

微信小程序所使用的绘图api

CanvasContext``canvas 组件的绘图上下文

CanvasContext 是旧版的接口， 新版 Canvas 2D 接口与 Web 一致。

• string|CanvasGradient fillStyle - 填充颜色
• string|CanvasGradient strokeStyle - 边框颜色
• number shadowOffsetX - 阴影相对于形状在水平方向的偏移
• number shadowOffsetY - 阴影相对于形状在竖直方向的偏移
• number shadowColor - 阴影的颜色
• number shadowBlur - 阴影的模糊级别
• number lineWidth - 线条的宽度
• string lineCap - 线条的端点样式
• string lineJoin - 线条的交点样式

lineJoin

• number miterLimit - 最大斜接长度
• number lineDashOffset - 虚线偏移量，初始值为0

几个相关的画图api 点这里