Canvas
Canvas
是HTML5
新增的元素,通过使用JS来在特定的区域绘制图形,也可以处理和渲染视频。
Canvas的基本语法
<canvas id="first" width="300px" height="300px">
Canvas
的默认值为:width:300px,height:150px
。也可以使用CSS来设置宽高,但是如宽高属性和初始比例不一致,它也会出现扭曲,所以不建议使用CSS
来设置Canvas
的宽高。
绘制grid和坐标空间
Canvas
元素默认被网格所覆盖,网格中的一个单元相当于Canvas
元素中的一个像素。栅格的起点为左上角,坐标为(0, 0
)。所有元素的位置都相对于原点来定位。
Canvas
只支持一种原生的图形绘制:矩形。所有其他图形都至少需要生成一种路径(Path
)。不过,我们拥有众多路径生成让复杂图形的绘制成为了可能。
Canvas
提供了三种方法绘制图形:
fillRect(x,y,width,height)
绘制一个填充的矩形strokeRect(x,y,width,height)
绘制一个矩形的边框clearRect(x,y,width,height)
清楚一定的矩形区域
Path
图形的基本元素是路径。路径是通过不同颜色、不同宽度的线段或曲线相连形成的不同形状的点的集合。一个路径,甚至一个子路径,都是闭合的。
使用路径绘制图形需要一些额外的步骤:
- 创建路径起始点
- 调用绘制方法来绘制出路径
- 把路径封闭
- 一旦路径生成,通过描边或填充路径区域来渲染图形
需要使用到的方法:
beginPath
:新建一条路径,路径一旦创建成功,图形绘制命令被指向到路径上生成路径moveTo(x, y)
:设置路径的起始位置lineTo(x, y)
:线条结束的坐标closePath()
:闭合路径之后,图形绘制命令会重新指向到上下文stroke()
:通过线条来绘制图形的轮廓fill()
:填充图形
口语化总结
Canvas
是一个画布,可以在网页中绘制所需的图形,Canvas
只是一个画布,所有的绘制操作都要在JS
中进行,Canvas
是一个二维网格,网格中一个单元相当于Canvas
元素中的一个像素。Canvas
左上角的坐标为(0,0)
,叫做原点,所有元素的位置都相对于原点来定位。Canvas的基本元素是路径,路径是由不同颜色、不同宽度的线段或曲线相连而成的不同形状的点的集合。路径三个基本函数moveTo
、lineTo
、stroke
。使用Canvas
可以绘制圆形(arc
)、直线(lineTo
)、文本(fillText
)等。
如何用Canvas绘制一条简单的线
<!-- 1. 首先定义canvas标签,设置画布大小 -->
<canvas id="cav" width="600" height="500" style="border: 1px solid #000000;">
你的浏览器不支持Canvas
</canvas>
<script>
// 2.得到canvas的上下文区域
const cav = document.querySelector("#cav")
const cavTx = cav.getContext("2d")
// 3. 设置起始点和结束点坐标
cavTx.moveTo(10, 10)
cavTx.lineTo(310, 310)
// 4. 调用stroke绘制图形
cavTx.stroke()
</script>
使用SVG和Canvas画一个矩形
<!-- 1. 首先定义canvas标签,设置画布大小 -->
<canvas id="cav" width="600" height="500" style="border: 1px solid #000000;">
你的浏览器不支持Canvas
</canvas>
<script>
// 2.得到canvas的上下文区域
const cav = document.querySelector("#cav")
const cavTx = cav.getContext("2d")
// 3. 设置矩形左上角 x 坐标,左上角 y 坐标,矩形的宽,矩形的高
cavTx.rect(10, 20, 300, 400)
// 4. 设置填充色
cavTx.fillStyle = "pink"
// 5. 绘制图形
cavTx.fill()
</script>
SVG和Canvas的区别
SVG
是可缩放矢量图,即使放大缩小也不会造成图像失真,使用SVG
绘图时,每个图形都是以DOM
节点的形式插入到页面中的,可以通过JS
来直接操作这些图形。
SVG
是使用xml
文档描述来绘图,更适合做动态交互;Canvas
使用JS
绘图,更适合频繁重绘的场景SVG
不依赖分辨率;Canvas
依赖分辨率SVG
支持事件处理;Canvas
不支持SVG
适合带有大型渲染区域的应用程序(例如谷歌地图);Canvas
对象适合被频繁重绘的场景,比如游戏SVG
渲染速度慢,因为它使用DOM
进行操作,还需要记录坐标;Canvas不需要记住以后的事情,渲染速度快- 绘制时交互过多选
SVG
;绘图效率高选Canvas