canvas 从入门到入坟

canvas 从入门到入坟

1. 概述

​ 话说，不会后台的UI设计师不是一个好的前端程序猿，现在，前端的标准越来越高，不仅要求逻辑严谨，代码优美，性能强大，还要求界面美观。

​ 其中，canvas就是为美而生的，canvas的功能强大，< canvas >本身并没有绘图功能，它的绘制都是基于JavaScript的，那canvas到底能做哪些事情呢？它到底该如何使用呢？容易学习吗？别急别急_{让我们一起学习canvas}

2. 使用场景

2.1 图表的绘制

2.2 canvas游戏

怎么说呢，canvas游戏就是通过不断刷新图像来完成的。

2.3 说明与作用

与canvas功能相似的还有SVG，但是他们还是有所区别的。

SVG

SVG 是一种使用 XML 描述 2D 图形的语言。

SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。

在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

SVG的特点有以下几点：

• 不依赖分辨率

• 支持事件处理器

• 最适合带有大型渲染区域的应用程序（比如谷歌地图）

• 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）

• 不适合游戏应用

Canvas

Canvas 通过 JavaScript 来绘制 2D 图形。

Canvas 是逐像素进行渲染的。

在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

Canvas的特点有以下几点：

• 依赖分辨率
• 不支持事件处理器
• 弱的文本渲染能力
• 能够以 .png 或 .jpg 格式保存结果图像
• 最适合图像密集型的游戏，其中的许多对象会被频繁重绘

3. Canvas 入门

3.1 完成目标

画一个柱形图

主要就是定义一个data，按数量和例比进行分配位置进行绘制。

3.2 初始化

首先我们先新建一个js文件和一个html文件，并新建一个canvas

• index.html

<canvas id="icanvas" width="200" height="200">不支持canvas</canvas>
<script src="index.js"></script>

• index.js

let c = document.getElementById('icanvas')
let cxt = c.getContext("2d")
c.style.background = '#f0f0f0'

效果如图

3.3 语法

context.fillRect(x, y, width, height)

其中，x，y指定了举行左上角的起始位置，后面2个参数定义宽高

详细可见：

canvas 官方文档

3.4 绘制

完整代码如下

let c = document.getElementById('icanvas')
let cxt = c.getContext("2d")
console.log(cxt)
c.style.background = '#f0f0f0'

function init() {
  // 初始化数据
  let data = [2, 1, 3]
  let length = data.length

  // 获取画布宽高
  let contextX = c.width
  let contextY = c.height
  console.log('x:', contextX, ';y:', contextY)

  // 计算并规定单位画布宽高
  boxX = contextX / length
  boxY = contextY - 20
  console.log('boxX:', boxX, ';boxY', boxY)

  let maxVal = Math.max(...data)
  let oneY = boxY / maxVal

  for (let i = 1; i <= length; i++) {
    // 设定其实位置
    let startX = (boxX * i) - 30
    let startY = contextY - (oneY * data[i - 1])
    console.log('startX:', startX, ';startY:', startY)

    // 绘制
    cxt.fillRect(startX, startY, 10, boxY)
  }
}
init()

4. end

是的，这就是 “别 (guan) 人 (wang) 的代码” 和 自己的代码的区别

[手动狗头*3]

关于canvas还有许多知识，还有很多有趣的方法等待我们去发掘，官网就搁在这里了

canvas 官方文档

加油~ 共勉~ 入坟~