文章目录
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个参数定义宽高
详细可见:
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还有许多知识,还有很多有趣的方法等待我们去发掘,官网就搁在这里了
加油~ 共勉~ 入坟~