本文简介

点赞 + 重视 + 保藏 = 学会了

在前端范畴，假如只是懂 Vue 或许 React ，未来在职场的竞争力或许会比较弱。

依据我多年在家待业经历来看，前端未来在 数据可视化 和 AI 这两个范畴会比较香，而 Canvas 是数据可视化在前端方面的根底技能。

本文就用光的速度将 canvas 给入门了。

要入门一个技能，前期最重要是快！所以本文只讲入门内进程上下文容，能敷衍简单项目。深化的知识点会在其他文章讲解。

Canva编辑器英语s 是什么？

Canvas 中文名叫 “画布”，是 HTML5 新增的一个标签。
Canvas 允许开发者通过 JS在这个标签上制作各种图案。
Canvas 拥有多种制作途径、矩形、圆形、字符以及图片的办法。
Canvas 在某些情况下能够 “替代” 图片。
Canvas 可用于动画、游戏、数据可视化、图片编辑器、实时视频处理等范畴。

Canvas 和 SVG 的差异

Canvas	SVG
用JS动态生成元素（一个HTML元素）	用XML描述元素（类似HTML元素那样，可用多个元从来描html标签属性大全述一个图形）
位图（受屏幕分辨率影响）	矢量图（不受屏幕分辨率影响）
不支撑事情	支撑事情
数据发生变化需求重绘	不需求重绘

就上面的描述而言或许有点难懂HTML，你html文件怎么打开能够打开 AntV 旗下的图形编辑引擎做对比。G6 是运用 canvas 开发的，X6 是运上下文切换用 svg 开发的。

我的建议是：假如要展现的数据量比较大，比方一条数据便是一个元素节点，那运用 canvas 会比较合适；假如用户操作的交互比较多，并且对清晰度有要求（编辑器英语矢量图），那么运用 svg 会比较合适。

起步

学习前端一定要着手敲代码，然后看作用展现。

起步阶段会用几句代码说明 canvas 怎么运用，本例会画一条直线。

画条直线

在 HTML 中创立 canvas 元素
通过 js 获取 canvas 标签
从 canvas 标签中获取到绘图工具
通过绘图工具，在 canvas 标签上制作图形

<!-- 1、创立 canvas 元素 -->
<canvas
  id="c"
  width="300"
  height="200"
  style="border: 1px solid #ccc;"
></canvas>
<script>
  // 2、获取 canvas 目标
  const cnv = document.getElementById('c')
  // 3、获取 canvas 上下文环境目标
  const cxt = cnv.getContext('2d')
  // 4、制作图形
  cxt.moveTo(100, 100) // 起点坐标 (x, y)
  cxt.lineTo(200, 100) // 结尾坐标 (x, y)
  cxt.stroke() // 将起点和结尾连接起来
</script>

moveTo 、 lineTo 和 stroke 办法暂时能够不用管，它们的作用是制作图形，这些办法在后边会讲到~

留意点

1、默许宽高

canvas 有 默许的宽度(300px) 和高度(150px)

假如不在 canvas 上设置宽高，那 canv前端是什么工作as 元素的默许宽度是300px，默许高度是150px。

2、设上下文英语置 canvas 宽高

c编辑器小说anvas 元素供给了 width 和 height 两个特点，可设置它的宽高。

需求留意的是，这两个特点只编辑器手机版需传入数值，不需求传入单位（比方 px 等）html。

<canvas width="600" height="400"></canvas>

3、不能通过 CSS 设置画布的宽高

运用 css 设置 canvas 的宽高，会呈现 内容被拉伸 的后果html是什么意思！！！html代码

<style>
  #c {
    width: 400px;
    height: 400px;
    border: 1px solid #ccc;
  }
</style>
<canvas id="c"></canvas>
<script>
  // 1、获取canvas目标
  const cnv = document.getElementById('c')
  // 2、获取canvas上下文环境目标
  const cxt = cnv.getContext('2d')
  // 3、制作图形
  cxt.moveTo(100, 100) // 起点
  cxt.lineTo(200, 100) // 结尾
  cxt.stroke() // 将起点和结尾连接起来
  console.log(cnv.width) // 获取 canvas 的宽度，输出：300
  console.log(cnv.height) // 获取 canvas 的高度，输出：150
</script>

canvas 的默许宽度是300px，默许高度是150px。

假如运用 css 修正 canvas 的宽高（比html代码方本例变成 400px * 400px），那宽度就由 300px 拉伸到 400px，高度由上下文无关文法 150px 拉伸到 400px。
运用 js 获取前端和后端 canvas 的宽高，此刻返回的是 canvas 的默许值。

终究呈现的作用如上图所示。

4、线条默许宽度和色彩

线条的默许宽度是 1px ，默许色彩是黑色。

但由于默许情况下 canvas 会将线条的中心点和像素的底部对齐，前端工程师所以会导致显现作用是 2px编辑器 和非纯黑色问题。

5html5、IE兼容性高

暂时只有 IE 9 以上才支撑 canvas 。但好消息是 IE 现已有自己的墓碑了。

如需兼容 IE 7 和 8 ，能够运用 ExplorerCanvas 。但即使是运用了 ExplorerCanvas 仍然会有所约束，比方无法运用 fillTexElementt() 办法等。

根底图形

坐标系

在制element翻译作根底图形之前，需求先搞铲除 Canvas 运编辑器小说用的坐标系。

Canvas 运用的是 W3C 坐标系 ，也便是遵从咱们屏幕、报纸的阅览习气，从上往下，从左往右。

W3C 坐标系 和 数学直角坐标系 的 X轴 是相同的，只是 Y轴 的反向相反。

W3C 坐标系 的 Y轴 正方向向下。

直线

一条直线

最简单的起步办法是画一条直线。这里所说的 “直线” 是几何学里的 “线段” 的意思。

需求执行上下文用到这3个办法：

moveTo(x1, y1)：起点坐标 (x, y)
lineTo(x2, y2)：下一个点的坐标 (x, y)
str编辑器软件oke()：将所有坐标编辑器下载用一条线连起来

起步阶段能够先编辑器哪个好用这样上下文字间距怎么调了解。

<canvas id="c" style="border: 1px solid #ccc;"></canvas>
<script>
  const cnv = document.getElementById('c')
  const cxt = cnv.getContext('2d')
  // 制作直线
  cxt.moveTo(50, 100) // 起点坐标
  cxt.lineTo(200, 50) // 下一个点的坐标
  cxt.stroke() // 将上面的坐标用一条线连接起来
</script>

上面的代码所呈现的作用，能够看下图解说（手不太聪明，画得不是很标准，期望能看懂）

多条直线

如需画前端开发多条直线，能够用会上面那几个办法。

<canvas id="c" width="300" height="300" style="border: 1px solid #ccc;"></canvas>
<script>
  const cnv = document.getElementById('c')
  const cxt = cnv.getContext('2d')
  cxt.moveTo(20, 100)
  cxt.lineTo(200, 100)
  cxt.stroke()
  cxt.moveTo(20, 120.5)
  cxt.lineTo(200, 120.5)
  cxt.stroke()
</script>

仔细调查一下，为什么两条线的粗细不相同的？

分明上下文运用的办法都是相同的，只是第二条直线的 Y轴 的值是有小数点。

答：默许情况下 canvas 会将线条的中心点和像素的底部对上下文什么意思齐，所以html5会导致显现作用是 2px 和非纯黑色问题。

上图每个格子代表 1px。

线的中心点会和画布像素点的上下文语境底部对齐，所以会线中心是黑色的，但由于一个编辑器下载像素就不能再切割了，所以会有半个像素被染色，就变成了浅灰色。

所以假如前端面试题你设置的 Y轴 值是一个整数，就会呈现上面那种情况。

设置款式

linelements中文翻译eWidth：线的粗细
strokeStyle：线的色彩
lineCap：线帽：默许: butt; 圆形: round; 方形: square

<canvas id="c" style="border: 1px solid #ccc;"></canvas>
<script>
  const cnv = document.getElementById('c')
  const cxt = cnv.getContext('2d')
  // 制作直线
  cxt.moveTo(50, 50)
  cxt.lineTo(200, 50)
  // 修正直线的宽度
  cxt.lineWidth = 20
  // 修正直线的色彩
  cxt.strokeStyle = 'pink'
  // 修正直线两头款式
  cxt.lineCap = 'round' // 默许: butt; 圆形: round; 方形: square
  cxt.stroke()
</script>

新开途径

拓荒新途径的办法：

beginPath()

在制作多条线段的编辑器英语一起，还要设置线段款式，通常需求拓荒新途径。

要否则款式之间会彼此污染。

比方这样

<canvas id="c" width="300" height="300" style="border: 1px solid #ccc;"></canvas>
<script>
  const cnv = document.getElementById('c')
  const cxt = cnv.getContext('2d')
  // 第一条线
  cxt.moveTo(20, 100)
  cxt.lineTo(200, 100)
  cxt.lineWidth = 10
  cxt.strokeStyle = 'pink'
  cxt.stroke()
  // 第二条线
  cxt.moveTo(20, 120.5)
  cxt.lineTo(200, 120.5)
  cxt.stroke()
</script>

假如不想彼上下文切换此污染，需求做2件事：联系上下文

运用 beginPath() 办法，从头开一个途径
设置新线段的款式（必须项）

假如上面2步却了其中1步都会有影响。

只运用 `beginPath()`

<canvas id="c" width="300" height="300" style="border: 1px solid #ccc;"></canvas>
<script>
  const cnv = document.getElementById('c')
  const cxt = cnv.getContext('2d')
  // 第一条线
  cxt.moveTo(20, 100)
  cxt.lineTo(200, 100)
  cxt.lineWidth = 10
  cxt.strokeStyle = 'pink'
  cxt.stroke()
  // 第二条线
  cxt.beginPath() // 从头敞开一个途径
  cxt.moveTo(20, 120.5)
  cxt.lineTo(200, 120.5)
  cxt.stroke()
</script>

第一条线的款式会影响之后的线。

但假如运用了 beg编辑器哪个好用inPath()编辑器哪个好用 ，后边的线段不会html5影响前面的线段。

<canvas id="c" width="300" height="300" style="border: 1px solid #ccc;"></canvas>
<script>
  const cnv = document.getElementById('c')
  const cxt = cnv.getContext('2d')
  // 第一条线
  cxt.moveTo(20, 100)
  cxt.lineTo(200, 100)
  cxt.stroke()
  // 第二条线
  cxt.beginPath() // 从头敞开一个途径
  cxt.moveTo(20, 120.5)
  cxt.lineTo(200, 120.5)
  cxt.lineWidth = 4
  cxt.strokeStyle = 'red'
  cxt.stroke()
</script>

设置新线段的款式，没运用 `beginPath()` 的情况

这个情况会反过来，前端开发需要学什么后边的线能影响前面的线。

<canvas id="c" width="300" height="300" style="border: 1px solid #ccc;"></canvas>
<script>
  const cnv = document.getElementById('c')
  const cxt = cnv.getContext('2d')
  // 第一条线
  cxt.moveTo(20, 100)
  cxt.lineTo(200, 100)
  cxt.lineWidth = 10
  cxt.strokeStyle = 'pink'
  cxt.stroke()
  // 第二条线
  cxt.moveTo(20, 120.5)
  cxt.lineTo(200, 120.5)
  cxt.lineWidth = 4
  cxt.strokeStyle = 'red'
  cxt.stroke()
</script>

正确的做法

在设置 be前端是什么工作ginPath() 的一起，也各自设置款式。这样就能做到彼此不影响了。

<canvas id="c" width="300" height="300" style="border: 1px solid #ccc;"></canvas>
<script>
  const cnv = document.getElementById('c')
  const cxt = cnv.getContext('2d')
  cxt.moveTo(20, 100)
  cxt.lineTo(200, 100)
  cxt.lineWidth = 10
  cxt.strokeStyle = 'pink'
  cxt.stroke()
  cxt.beginPath() // 从头敞开一个途径
  cxt.moveTo(20, 120.5)
  cxt.lineTo(200, 120.5)
  cxt.lineWidth = 4
  cxt.strokeStyle = 'red'
  cxt.stroke()
</script>

折线联系上下文

和直线差不多，都是运用 moveTo() 、lineTo() 和 str前端oke() 办法能够制作折线。

<canvas id="c" width="300" height="300" style="border: 1px solid #ccc;"></canvas>
<script>
  const cnv = document.getElementById('c')
  const cxt = cnv.getContext('2d')
  cxt.moveTo(50, 200)
  cxt.lineTo(100, 50)
  cxt.lineTo(200, 200)
  cxt.lineTo(250, 50)
  cxt.stroke()
</script>

画这种折线，最好在草稿纸上画一个坐标系element滑板，自己核算并描绘一下每个点大概在什么什么位置，终究在 canvas 中看看作用。

矩形

依据前面的根底，咱们能够 运用线段来描绘矩形，但 canvas 也供给了 rect() 等办法能够直接生成矩形。

运用线段描绘矩形

能够运用前面画线段的办法elementary是什么意思来制作矩形

canvas id="c"  ></canvas>
<script>
 const cnv = document.getElementById('c')
 const cxt = cnv.getContext('2d')
 // 制作矩形
 cxt.moveTo(50, 50)
 cxt.lineTo(200, 50)
 cxt.lineTo(200, 120)
 cxt.lineTo(50, 120)
 cxt.lineTo(50, 50) // 需求闭合，又或许运用 closePath() 办法进行闭合，引荐运用 closePath()
 cxt.stroke()
</script>

上面的代码几个点分别对应下图。

运用 `strokeRect()` 描边矩形

strokeStyle：设置描边的特点（色彩、突变、图案）
strokeRect(x, y, width, height)：描边矩形（x和y是矩前端开发需要学什么形左上角起点；width 和 height 是矩形的宽高）
strokeStyle 必须写在 strohtml代码keRect() 前面，否则款式不收效。

<canvas id="c" width="300" height="300" style="border: 1px solid #ccc;"></canvas>
<script>
  const cnv = document.getElementById('c')
  const cxt = cnv.getContext('2d')
  // strokeStyle 特点
  // strokeRect(x, y, width, height) 办法
  cxt.strokeStyle = 'pink'
  cxt.strokeRect(50, 50, 200, 100)
</script>

上面的代码能够这样了解

运用 `fillRect()` 填充矩形

fillRect() 和 strokeRect() 办法差不多，但 fillRect() 的作用是填充。

需求留意的是，fillStyle 必须写在 fillRect() 之前，否则款式不收效。

<canvas id="c" width="300" height="300" style="border: 1px solid #ccc;"></canvas>
<script>
  const cnv = document.getElementById('c')
  const cxt = cnv.getContext('2d')
  // fillStyle 特点
  // fillRect(x, y, width, height) 办法
  cxt.fillStyle = 'pink'
  cxt.fillRect(50, 50, 200, 100) // fillRect(x, y, width, height)
</script>

一起运用 `stro前端和后端的区别keRect()` 和 `fillRect()`

一起运用 strokeRect() 和 fihtml文件怎么打开llRect() 会发生描边和填充的作用

<canvas id="c" width="300" height="300" style="border: 1px solid #ccc;"></canvas>
<script>
  const cnv = document.getElementById('c')
  const cxt = cnv.getContext('2d')
  cxt.strokeStyle = 'red'
  cxt.strokeRect(50, 50, 200, 100) // strokeRect(x, y, width, height)
  cxt.fillStyle = 'yellow'
  cxt.fillRect(50, 50, 200, 100) // fillRect(x, y, width, height)
</script>

运用 `rect()` 生成矩形

rect() 和 fillRect() 、strokeRect() 的用法差不多，唯一的差异是：

strokeRect() 和 fillRect() 这两个办法调用后会立即制作；rect() 办法被调用后，不会立刻制作矩形，而是需求调用 stroke() 或 fill() 辅佐烘进程上下文托。

<canvas id="c" width="300" height="300" style="border: 1px solid #ccc;"></canvas>
<script>
  const cnv = document.getElementById('c')
  const cxt = cnv.getContext('2d')
  cxt.strokeStyle = 'red'
  cxt.fillStyle = 'pink'
  cxt.rect(50, 50, 200, 100) // rect(x, y, width, height)
  cxt.stroke()
  cxt.fill()
</script>

等价公式：

cxt.strokeStyle = 'red',
cxt.rect(50, 50, 200, 100)
cxt.stroke()
// 等价于
cxt.strokeStyle = 'red'
cxt.strokerect(50, 50, 200, 100)
// -----------------------------
cxt.fillStyle = 'hotpink'
cxt.rect(50, 50, 200, 100)
cxt.fill()
// 等价于
cxt.fillStyle = 'yellowgreen'
cxt.fillRect(50, 50, 200, 100)

运用 `clhtml网页制作earRect()` 清空矩编辑器小说形

运用 clearRect() 办法能够清空指定区域。

clearRect(x, y, width, height)

其语法和创立 cxt.rect() 差不多。

<canvas id="c" width="300" height="300" style="border: 1px solid #ccc;"></canvas>
<script>
  const cnv = document.getElementById('c')
  const cxt = cnv.getContext('2d')
  cxt.fillStyle = 'pink' // 设置填充色彩
  cxt.fillRect(50, 50, 200, 200) // 填充矩形
  cxt.clearRect(60, 60, 180, 90) // 清空矩形
</script>

清空画布

canvas 画上下文无关文法布元素是矩html形，所以能上下文无关文法够通过下面的上下文无关文法代码把整个画布清空掉。

// 省掉部分代码
cxt.clearRect(0, 0, cnv.width, cnv.height)

要清空的区域：从画布左上角开端，直到画布的宽和画布的高为止。

多边形

Canvas 要画多边形，需求运用 moveTo() 、上下文图 lineTo() 和 closePath() 。

三html标签属性大全角形

尽管三角形是常见图形，但 canvas 并没有供给类似 rect() 的办法来制作三角形。

需求确定三角形3个点的坐标位置，然后运用 stroke() 或许 fill() 办法生成三角形。

<canvas id="c" width="300" height="300" style="border: 1px solid #ccc;"></canvas>
<script>
  const cnv = document.getElementById('c')
  const cxt = cnv.getContext('2d')
  cxt.moveTo(50, 50)
  cxt.lineTo(200, 50)
  cxt.lineTo(200, 200)
  // 留意点：假如运用 lineTo 闭合图形，是不能很好闭合角落位的。
  cxt.lineTo(50, 50) // 闭合
  cxt.stroke()
</script>

留意，默许情况编辑器下载下不会主动从终究一个点连接到起点。终究一步需求设置一下 cxt.lineTo(50, 50) ，让它与 cxt.moveTo(50, 50) 相同。这样能够让途径回到起点，构成一个闭合作用。

但这样做其实编辑器和ide的区别是有点问题的，并且也比较费事，要记住起始点坐标。

上面的闭合操作，假如遇到设置了 lineWidth 或许 lineJoin 就会有问题，比方：

// 省掉部分代码
cxt.lineWidth = 20

当线段变粗后，起始点和完毕点的链接处，角落就呈现“不正常”现象。

假如需求真正闭合，能够运用 clos执行上下文ePath() 办法。

<canvas id="c" width="300" height="300" style="border: 1px solid #ccc;"></canvas>
<script>
  const cnv = document.getElementById('c')
  const cxt = cnv.getContext('2d')
  cxt.moveTo(50, 50)
  cxt.lineTo(200, 50)
  cxt.lineTo(200, 200)
  // 手动闭合
  cxt.closePath()
  cxt.lineJoin = 'miter' // 线条连接的款式。miter: 默许; bevel: 斜面; round: 圆角
  cxt.lineWidth = 20
  cxt.stroke()
</script>

运用 cxt.closePath() 能够主动element滑板将结尾和起始点连接起来，此刻看上去就正常多了。

菱形

有一组邻边相等的平行四边形是菱形

<canvas id="c" width="300" height="300" style="border: 1px solid #ccc;"></canvas>
<script>
  const cnv = document.getElementById('c')
  const cxt = cnv.getContext('2d')
  cxt.moveTo(150, 50)
  cxt.lineTo(250, 100)
  cxt.lineTo(150, 150)
  cxt.lineTo(50, 100)
  cxt.closePath()
  cxt.stroke()
</script>

要制作elementui直线类型的图形，在草稿纸上符号出编辑器下载起始点和每个角落的点，然后再连线即可。相对曲线图形来说elements，直线图形是比较简单的。

圆形

制作圆形的办法是 arc()。

语法：

arc(x, y, r, sAngle, eAngle，counterclockwise)

x 和 y: 圆心坐标
r: 半径
sAngle: 开端视点
eAngle: 完毕视点
counterclockwise: 制作方向（编辑器小说true: 逆时针; false: 顺时针），默许 false

开端视点和完毕视点，都是以弧度为单位。例如 180就写成 Math.PI ，360写成编辑器和ide的区别 Math.PI * 2 ，以此类推。

在实践开发中，为了让自己或许别的开发者更简单看懂弧度的数值，1应该写成 Math.PI / 180。

100: 100 * Math.PI / 180
1前端面试题10:elementary 110 * Math.PI / 180
241: 241 * Math.PI / 180

留意：制作圆形之前，必须先调用 beginPath() 办法！！！在制作完结之后，还需求调用 closePath() 办法！！！

<canvas id="c" width="300" height="300" style="border: 1px solid #ccc;"></canvas>
<script>
  const cnv = document.getElementById('c')
  const cxt = cnv.getContext('2d')
  cxt.beginPath()
  cxt.arc(150, 150, 80, 0, 360 * Math.PI / 180)
  cxt.closePath()
  cxt.stroke()
</script>

半圆

假如运用 arc() 办法画圆HTML时，没做到刚好上下文图绕完一周（360）就直接闭合途径，就会呈现半圆的状态。

<canvas id="c" width="300" height="300" style="border: 1px solid #ccc;"></canvas>
<script>
  const cnv = document.getElementById('c')
  const cxt = cnv.getContext('2d')
  cxt.beginPath()
  cxt.arc(150, 150, 100, 0, 180 * Math.PI / 180) // 顺时针
  cxt.closePath()
  cxt.stroke()
</script>

上面的代码中，cxt.arc 终究一个参数没传，默许编辑器小说是 false ，所以是顺时针制作。

假如期望半圆的弧面在上方，能编辑器怎么打开够将 cxt.arc前端开发 终究一个参数设置成 trhtml标签属性大全ue

<canvas id="c" width="300" height="300" style="border: 1px solid #ccc;"></canvas>
<script>
  const cnv = document.getElementById('c')
  const cxt = cnv.getContext('2d')
  cxt.beginPath()
  cxt.arc(150, 150, 100, 0, 180 * Math.PI / 180, true)
  cxt.closePath()
  cxt.stroke()
</script>

弧线

运用 arc() 办法画半圆时，假如终究不调用 closePath() 办法，就不会呈现闭合途径。也便是说，那是一条弧线。

在 canvas 中，画弧线有2中办法：arc() 和 arcTo() 。

arc() 画弧线

假如想画一条 0 ~ 30 的弧线，能够这样写

<canvas id="c" width="300" height="300" style="border: 1px solid #ccc;"></canvas>
<script>
  const cnv = document.getElementById('c')
  const cxt = cnv.getContext('2d')
  cxt.beginPath()
  cxt.arc(150, 150, 100, 0, 30 * Math.PI / 180)
  cxt.stroke()
</script>

原理如下图所示，红线代表画出来的那条弧线。

arcelementuiTo()前端画弧线

arcTo()编辑器怎么打开 的运用办法会愈加杂乱，假如初学看不太懂的话能够先越过，看完后边的再回前端工程师来补补。

语法：

arcTo(cx, cy, x2, y2, radius)

cx: 两切线交点的联系上下文横坐标
cy: 两切线交点的纵坐标
x2: 完毕点的横坐标
y2: 完毕点的纵坐标
radius: 半径

其中，(cx, cy) 也叫控制编辑器软件点，(x2, y2) 也叫完毕点。

是不是有点古怪，为什么没有 x1 和 y1 ？

(x1, y1) 是开端点，通常是由 moveTo() 或许 lineTo() 供给。

arcTo() 办法运用 开端点、控制点和完毕点构成的夹角，制作一段与夹角的两头相切并且半径为 radius 的圆弧。

举个比如

<canvas id="c" width="300" height="300" style="border: 1px solid #ccc;"></canvas>
<script>
  const cnv = document.getElementById('c')
  const cxt = cnv.getContext('2d')
  cxt.moveTo(40, 40)
  cxt.arcTo(120, 40, 120, 120, 80)
  cxt.stroke()
</script>

根底款式

前html简单网页代码面学完根底图形，接下编辑器135来能够开端了解一下怎么设置元素的根底款式。

描边 stroke()

前面的案编辑器小说例中，其完成已知道运用 stroke() 办法进行描边了。这里就不再多前端面试题讲这个办法。

线条宽度 lineWidth

lineWidth 默许值是 1 ，默许单elementary翻译位是 px。

语法：编辑器手机版

lineWidth = 线宽

<canvas id="c" width="300" height="300" style="border: 1px solid #ccc;"></canvas>
<script>
  const cnv = document.getElementById('c')
  const cxt = cnv.getContext('2d')
  // 线宽 10
  cxt.beginPath()
  cxt.moveTo(50, 50)
  cxt.lineTo(250, 50)
  cxt.lineWidth = 10 // 设置线宽
  cxt.stroke()
  // 线宽 20
  cxt.beginPath()
  cxt.moveTo(50, 150)
  cxt.lineTo(250, 150)
  cxt.lineWidth = 20 // 设置线宽
  cxt.stroke()
  // 线宽 30
  cxt.beginPath()
  cxt.moveTo(50, 250)
  cxt.lineTo(250, 250)
  cxt.lineWidth = 30 // 设置线宽
  cxt.stroke()
</script>

线条色彩 strokeStyle

运用 strokeStyle 能上下文字间距怎么调够设置线条色彩

语法:

strokeStyle = 色彩值

<canvas id="c" width="300" height="300" style="border: 1px solid #ccc;"></canvas>
<script>
  const cnv = document.getElementById('c')
  const cxt = cnv.getContext('2d')
  cxt.moveTo(50, 50)
  cxt.lineTo(250, 50)
  cxt.lineWidth = 20
  cxt.strokeStyle = 'pink' // 设置色彩
  cxt.stroke()
</script>

为了展现便利，我将 lineWidth 设为 20。

线帽 lineCap

线帽指的是线段的开端和结尾处的款式，运用 li编辑器neCap 能够设置

语法：

lineCap = '特点值'

特点值包含：

butt: 默许值，无线帽
square编辑器手机版: 方形线帽
round: 圆形线帽

<canvas id="c" width="300" height="300" style="border: 1px solid #ccc;"></canvas>
<script>
  const cnv = document.getElementById('c')
  const cxt = cnv.getContext('2d')
  // 设置线宽，便利演示
  cxt.lineWidth = 16
  // 默许线帽 butt
  cxt.beginPath()
  cxt.moveTo(50, 60)
  cxt.lineTo(250, 60)
  cxt.stroke()
  // 方形线帽 square
  cxt.beginPath()
  cxt.lineCap = 'square'
  cxt.moveTo(50, 150)
  cxt.lineTo(250, 150)
  cxt.stroke()
  // 圆形线帽 round
  cxt.beginPath()
  cxt.lineCap = 'round'
  cxt.moveTo(50, 250)
  cxt.lineTo(250, 250)
  cxt.stroke()
</script>

运用 square 和 round 的话，会使线条变得略HTML微长一点点，这是给线条增加线帽的部分，这个长度在elementary日常开发中需求留意。

线帽只对线条的开端和结尾处发生作用，对角落不会发生任何作用。

角落款式 lineJoin

假如需求设置角落款式，能够运用 lineJoin 。

语法：联系上下文

lineJoin = '特点值'

特点值包含：

miter: 默许值，尖角
round: 圆角
bevel: 斜角

<canvas id="c" width="300" height="300" style="border: 1px solid #ccc;"></canvas>
<script>
  const cnv = document.getElementById('c')
  const cxt = cnv.getContext('2d')
  cxt.lineWidth = 20
  // 默许，尖角
  cxt.moveTo(50, 40)
  cxt.lineTo(200, 40)
  cxt.lineTo(200, 90)
  cxt.stroke()
  // 斜角 bevel
  cxt.beginPath()
  cxt.moveTo(50, 140)
  cxt.lineTo(200, 140)
  cxt.lineTo(200, 190)
  cxt.lineJoin = 'bevel'
  cxt.stroke()
  // 圆角 round
  cxt.beginPath()
  cxt.moveTo(50, 240)
  cxt.lineTo(200, 240)
  cxt.lineTo(200, 290)
  cxt.lineJoin = 'round'
  cxt.stroke()
</script>

虚线 setLineDash()

运用 setLineDash() 办法能够将描边设置成虚线。

语法：

setLineDash([])

需求传入一个数组，且元素是数值型。

虚线分3种情况

只传1个值
有2个值
有3个以上的值

<canvas id="c" width="300" height="300" style="border: 1px solid #ccc;"></canvas>
<script>
  const cnv = document.getElementById('c')
  const cxt = cnv.getContext('2d')
  cxt.lineWidth = 20
  cxt.strokeStyle = 'pink'
  cxt.moveTo(50, 50)
  cxt.lineTo(200, 50)
  cxt.setLineDash([10]) // 只传1个参数，实线与空白都是 10px
  cxt.stroke()
  cxt.beginPath()
  cxt.moveTo(50, 100)
  cxt.lineTo(200, 100)
  cxt.setLineDash([10, 20]) // 2个参数，此刻，实线是 10px, 空白 20px
  cxt.stroke()
  cxt.beginPath()
  cxt.moveTo(50, 150)
  cxt.lineTo(200, 150)
  cxt.setLineDash([10, 20, 5]) // 传3个以上的参数，此例：10px实线，20px空白，5px实线，10px空白，20px实线，5px空白 ……
  cxt.stroke()
</script>

此外，还能够一直 cxt.getLineDash() 获取虚线不重复html网页制作的间隔；html文件怎么打开

用 cxt.lineDashOffset 设置虚线的偏移位。

填充

运用 fill() 能够填充图形，依据前面的比如应该把握了怎么运用 fill()

<canvas id="c" width="300" height="300" style="border: 1px solid #ccc;"></canvas>
<script>
  const cnv = document.getElementById('c')
  const cxt = cnv.getContext('2d')
  cxt.fillStyle = 'pink'
  cxt.rect(50, 50, 200, 100)
  cxt.fill()
</script>

能够运用 fillStyle 设置填充色彩，默许是黑色。

非零盘绕填充

在运用 fill() 办法填充时，需求留意一个规则：非零盘绕填充。

在运用 moveTo 和 lineTo 描述图形时，假如是按顺时针制作，计数器会加1；假如是逆时针，计数器elementanimation会减1。

当图前端工程师形所处的位置，计数器的结果为0时，它就不会被填充。

这样说有点杂乱，先看看比如

<canvas id="c" width="300" height="300" style="border: 1px solid #ccc;"></canvas>
<script>
  const cnv = document.getElementById('c')
  const cxt = cnv.getContext('2d')
  // 外层矩形
  cxt.moveTo(50, 50)
  cxt.lineTo(250, 50)
  cxt.lineTo(250, 250)
  cxt.lineTo(50, 250)
  cxt.closePath()
  // 内层矩形
  cxt.moveTo(200, 100)
  cxt.lineTo(100, 100)
  cxt.lineTo(100, 200)
  cxt.lineTo(200, 200)
  cxt.closePath()
  cxt.fill()
</script>

请看看上面的代码，我画了2个矩形，它们都没有用 beginPath() 办法拓荒新途径。

内层矩形是逆时针制作的，所以内层的值是 -1 ，它又通过外层矩形，而外层矩形是顺时针制作，所以通过外层时值 +1上下文，终究内层的值为 0 ，所以不会被填充。

文本

Canvas 供给了一些操作文本的办法。

为了便利演示，咱们先了解一下在 Canvas 中怎么给本文设置款式。

款式 font

和 CSS 设置 fonhtml个人网页完整代码t 差不多，Canvas 也能够通过 font 设置款式。

语法：

cxt.font = 'font-style font-variant font-weight font-size/line-height font-family'

假如需html求设置字号 font-size，需求同事设置 font-famil上下文字间距怎么调y。

cxt.font = '30px 宋体'

描边 strokeText()

运用 strokeText() 办法进行文本描边

语法：

strokeText(text, x, y, maxWidth)

text: 字符串，要制作的内容
x: 横坐标，文本左边要对齐的坐标（默许左对齐html网页制作）
y: 纵坐标，文本底边要对齐的坐标
maxWidth: 可选参数，表明文本烘托的最大宽度（px），假如进程上下文文本超出 maxWidth 设置的值，文本会被上下文无关文法压缩。

<canvas id="c" width="300" height="300" style="border: 1px solid #ccc;"></canvas>
<script>
  const cnv = document.getElementById('c')
  const cxt = cnv.getContext('2d')
  cxt.font = '60px Arial' // 将字号设置成 60px，便利调查
  cxt.strokeText('雷猴', 30, 90)
</script>

设置描边色彩 strokeStyHTMLle

运用 strokeStyle 设置描边色彩。

<canvas id="c" width="300" height="300" style="border: 1px solid #ccc;"></canvas>
<script>
  const cnv = document.getElementById('c')
  const cxt = cnv.getContext('2d')
  cxt.font = '60px Arial' // 将字号设置成 60px，便利调查
  cxt.strokeStyle = 'pink' // 设置文本描边色彩
  cxt.strokeText('雷猴', 30, 90)
</script>

填充 fillText

运用 fillText() 可填充文本。

语法和 strokeText() 相同。

fillText(text, x, y, maxWidth)

<canvas id="c" width="300" height="300" style="border: 1px solid #ccc;"></canvas>
<script>
  const cnv = document.getElementById('c')
  const cxt = cnv.getContext('2d')
  cxt.font = '60px Arial'
  cxt.fillText('雷猴', 30, 90)
</script>

设置填充色彩 fillStyle

运用 fillStyle 能够设置文本上下文切换填充色彩。

<canvas id="c" width="300" height="300" style="border: 1px solid #ccc;"></canvas>
<script>
  const cnv = document.getElementById('c')
  const cxt = cnv.getContext('2d')
  cxt.font = '60px Arial'
  cxt.fillStyle = 'pink'
  cxt.fillText('雷猴', 30, 90)
</script>

获取文本长度 meas前端开发ureText()

measureText().width 办法能够获取文本的长度，单位是 px 。

<canvas id="c" width="300" height="300" style="border: 1px solid #ccc;"></canvas>
<script>
  const cnv = document.getElementById('c')
  const cxt = cnv.getContext('2d')
  let text = '雷猴'
  cxt.font = 'bold 40px Arial'
  cxt.fillText(text, 40, 80)
  console.log(cxt.measureText(text).width) // 80
</script>

水平对齐办法 textAlign

运用 textAlign 特点能够设置文字的水平对齐办法，一共有5个值前端和后端的区别可选

start:前端默许。在指定位置的横坐标开端。
end: 在html是什么意思指定坐标的横坐标完毕。
left: 左对齐。
right: 右对齐。
center: 居中对齐。

红线是辅佐参阅线。

<canvas id="c" width="400" height="400" style="border: 1px solid #ccc;"></canvas>
<script>
  const cnv = document.getElementById('c')
  const cxt = cnv.getContext('2d')
  // 竖向的辅佐线（参阅线，在画布中心）
  cxt.moveTo(200, 0)
  cxt.lineTo(200, 400)
  cxt.strokeStyle = 'red'
  cxt.stroke()
  cxt.font = '30px Arial'
  // 横坐标开端位对齐
  cxt.textAlign = 'start' // 默许值,
  cxt.fillText('雷猴 start', 200, 40)
  // 横坐标完毕位对齐
  cxt.textAlign = 'end' // 完毕对齐
  cxt.fillText('雷猴 end', 200, 100)
  // 左对齐
  cxt.textAlign = 'left' // 左对齐
  cxt.fillText('雷猴 left', 200, 160)
  // 右对齐
  cxt.textAlign = 'right' // 右对齐
  cxt.fillText('雷猴 right', 200, 220)
  // 居中对齐
  cxt.textAlign = 'center' // 右对齐
  cxt.fillText('雷猴 center', 200, 280)
</script>

从上面的比如看，start 和 left 的作用好像是相同的，end 和 right 也好像是相同的。

在大多数情况下，它们确实相同。但在某些国家或许某些场合，阅览文字的习气是 从右往左 时，start 就和 right 相同了，end 和 l编辑器eft 也相同。这是需求留意的地方。

笔直对齐办法 textBaseline

运用 textBaseline 特点能够设置文字的笔直对齐办法。

在运用 textBaseline 前，需求自行了解 css 的文本基线。编辑器

用一张网图解说一下基线

textBaseline进程上下文 可选特点：

alphabetic: 默许。文本基线是一般的字母基线。
top: 文本基线是 em 方框的顶端。
bottom: 文本基线elementary是 em 方框的底端。
middle: 文本基线是 em 方框的正中。
hanging: 文本基线是悬挂基线。

红线是辅佐参阅线。

<canvas id="c" width="800" height="300" style="border: 1px solid #ccc;"></canvas>
<script>
  const cnv = document.getElementById('c')
  const cxt = cnv.getContext('2d')
  // 横向的辅佐线（参阅线，在画布中心）
  cxt.moveTo(0, 150)
  cxt.lineTo(800, 150)
  cxt.strokeStyle = 'red'
  cxt.stroke()
  cxt.font = '20px Arial'
  // 默许 alphabetic
  cxt.textBaseline = 'alphabetic'
  cxt.fillText('雷猴 alphabetic', 10, 150)
  // 默许 top
  cxt.textBaseline = 'top'
  cxt.fillText('雷猴 top', 200, 150)
  // 默许 bottom
  cxt.textBaseline = 'bottom'
  cxt.fillText('雷猴 bottom', 320, 150)
  // 默许 middle
  cxt.textBaseline = 'middle'
  cxt.fillText('雷猴 middle', 480, 150)
  // 默许 hanging
  cxt.textBaseline = 'hanging'
  cxt.fillText('雷猴 hanging', 640, 150)
</script>

留意：在制作文字的时分，默许是以文字的左下角作为参阅点进行制作

图片

在 Canvas 中上下文切换能够运用 drawImage() 办法制作图片。

烘托图片

烘托图片的办法有2中，一种是在JS里加载图片再烘托，另一种是把DOM里的图片拿到 ca编辑器nvas 里烘托。

烘托的语法：

drawImage(image, dx, dy)

image: 要烘托的图片目标。
dx: 图片左上角的横坐标位置。HTML
dy: 图片左上角的纵坐标位置。

JS版

在 JS 里加载图片并烘托，有以下几个过程：

创立 Image 目标
引入图片
等候图片加载完结上下文
运用 drawImage() 办法烘托图片

<canvas id="c" width="500" height="500" style="border: 1px solid #ccc;"></canvas>
<script>
  const cnv = document.getElementById('c')
  const cxt = cnv.getContext('2d')
  // 1 创立 Image 目标
  const image = new Image()
  // 2 引入图片
  image.src = './images/dog.jpg'
  // 3 等候图片加载完结
  image.onload = () => {
    // 4 运用 drawImage() 办法烘托图片
    cxt.drawImage(image, 30, 30)
  }
</script>

DOM版

<style>
  #dogImg {
    display: none;
  }
</style>
<img src="./images/dog.jpg" id="dogImg"/>
<canvas id="c" width="500" height="500" style="border: 1px solid #ccc;"></canvas>
<script>
  const cnv = document.getElementById('c')
  const cxt = cnv.getContext('2d')
  const image = document.getElementById('dogImg')
  cxt.drawImage(image, 70, 70)
</script>

由于图片是从 DOM 里获取到的，所以一般来说，只要在 window.onload 这个生命周期内运用 drawImage 都能够正常烘托图片。

本例运用了 css 的办法，把图片的 displayhtml 设置成 none 。由于我不想被 <img&前端开发需要掌握什么技术gt; 影响到本例讲解。

实践开发过程中按照实践情况设置即可。

设置图片宽高

前面的比如都是直接加载图片，图片默许的宽高是多少就加载多少。

假如需求指定图片宽高，能够在前面的根底上再增加两个参数：

drawImage(image, dx, dy, dw, dh)

image、 dhtml标签属性大全x、 dy 的用法和前面相同。

dw 用来elementary翻译界说图HTML片的宽度，dh 界说图片的高度。

<canvas id="c" width="500" height="500" style="border: 1px solid #ccc;"></canvas>
<script>
  const cnv = document.getElementById('c')
  const cxt = cnv.getContext('2d')
  const image = new Image()
  image.src = './images/dog.jpg'
  image.onload = () => {
    cxt.drawImage(image, 30, 30, 100, 100)
  }
</script>

我把图片的尺寸设为 100px * 100px，图片看上去比之上下文图前就小了很多。

截取图片

截图图片相同运用drawImage() 办法，只不上下文英语过传入的参数数量比之前都多，并且顺序也有点不相同了。

drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)

以上参数缺一不可

image: 图片目标
sx: 开端截取的横坐标
sy: 开端截取的纵坐标
sw: 截取的宽度
sh: 截取的高度
dx: 图片左上角的横坐标位置
dy: 图片左上角的纵坐标位置
dw: 图片宽度
dh: 图片高度

<canvas id="c" width="500" height="500" style="border: 1px solid #ccc;"></canvas>
<script>
  const cnv = document.getElementById('c')
  const cxt = cnv.getContext('2d')
  const image = new Image()
  image.src = './images/dog.jpg'
  image.onload = () => {
    cxt.drawImage(image, 0, 0, 100, 100, 30, 30, 200, 200)
  }
</script>

总结

本文首要讲解了在 Canvas 中制作上下文什么意思一些根底图形，还有一些根底款式设置。

还有更多高档的玩法会在之后的文章中讲到，比方突变、投影、滤镜html等等。

代码仓库

⭐雷猴 Canvas

引荐阅览

《Fabric.js 从入门html5到膨胀》

《『Three.js』起飞！》

《conso上下文切换le.log也能插图！！！》

《纯css完成117个Loading作用》

《视差特效的原理和完成办法》

《这18个网站能让你的页面布景炫酷起来》

点赞 + 重视 + 保藏 = 学会了

Canvas 从入门到劝朋友放弃（图解版）

本文简介

Canva编辑器英语s 是什么？

Canvas 和 SVG 的差异

起步

画条直线

留意点

1、默许宽高

2、设上下文英语置 canvas 宽高

3、不能通过 CSS 设置画布的宽高

4、线条默许宽度和色彩

5html5、IE兼容性高

根底图形

坐标系

直线

一条直线

多条直线

设置款式

新开途径

只运用 beginPath()

设置新线段的款式，没运用 beginPath() 的情况

正确的做法

折线联系上下文

矩形

运用线段描绘矩形

运用 strokeRect() 描边矩形

运用 fillRect() 填充矩形

一起运用 stro前端和后端的区别keRect() 和 fillRect()

运用 rect() 生成矩形

运用 clhtml网页制作earRect() 清空矩编辑器小说形

清空画布

多边形

三html标签属性大全角形

菱形

圆形

半圆

弧线

arc() 画弧线

arcelementuiTo()前端 画弧线

根底款式

描边 stroke()

线条宽度 lineWidth

线条色彩 strokeStyle

线帽 lineCap

角落款式 lineJoin

虚线 setLineDash()

填充

非零盘绕填充

文本

款式 font

描边 strokeText()

设置描边色彩 strokeStyHTMLle

填充 fillText

设置填充色彩 fillStyle

获取文本长度 meas前端开发ureText()

水平对齐办法 textAlign

笔直对齐办法 textBaseline

图片

烘托图片

JS版

DOM版

设置图片宽高

截取图片

总结

代码仓库

引荐阅览

相关文章

box-shadow 高阶玩法：纯 CSS 画蒙娜丽莎和粒子星空

前端性能优化总结

📚 伴学笔记创作活动来袭 ｜ 第五届字节跳动青训营

前端BFF架构下，怎么解决网络请求重复的问题

作者信息

只运用 `beginPath()`

设置新线段的款式，没运用 `beginPath()` 的情况

运用 `strokeRect()` 描边矩形

运用 `fillRect()` 填充矩形

一起运用 `stro前端和后端的区别keRect()` 和 `fillRect()`

运用 `rect()` 生成矩形

运用 `clhtml网页制作earRect()` 清空矩编辑器小说形

arcelementuiTo()前端画弧线

📚 伴学笔记创作活动来袭｜第五届字节跳动青训营