Canvas和SVG

最新推荐文章于 2024-05-08 19:57:02 发布

谷歌玩家

最新推荐文章于 2024-05-08 19:57:02 发布

阅读量989

点赞数

分类专栏：前端面试文章标签： javascript css css3

本文链接：https://blog.csdn.net/qq_43539854/article/details/126355121

版权

前端面试专栏收录该内容

55 篇文章 6 订阅

订阅专栏

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>