SVG 与 Canvas

ゝ一纸荒年。 2023-10-07 20:25 53阅读 0赞

#### 阅读目录 ####

*  00、前端图形
 *  01、\`<svg>\` 矢量图形
 *   *  动画
 *  02、\`<canvas>\` 基础
 *   *  动画
 *  03、WebGL

## 00、前端图形 ##

前端实现图形的几种方式：

![在这里插入图片描述][0d102ced9bf74e55b60da01cba513604.png]

## 01、`<svg>` 矢量图形 ##

`<svg>` 可缩放矢量图形（Scalable Vector Graphics，SVG），是一种基于 XML 描述的二维的矢量图形。

相比于位图，体积更小，可无线缩放而不失真。

![在这里插入图片描述][729eeb27b8b64fa081fd0c2bef9fba83.png]  
`<svg>` 内部支持多种图形算法，基础的如线，圆形 line、矩形 rect、文本 text，复杂的有折线 polyline、多边形 polygon、路径数据 path 等。

iconfont-阿里巴巴矢量图标库上有非常丰富的矢量图形。

> ❗ 小提示：注意服务器添加对svg的支持，及gzip压缩。

![在这里插入图片描述][d19d97626d034a48a2aee6fa9beca9bf.png]

![在这里插入图片描述][625e8642be724405831aa7d15420c413.png]

### 动画 ###

SVG 的动画是基于其 transform 属性，通过JS来实现。  
transform 变化的主要参数：

translate 移动：`transform="translate(x, y)"`  
scale 缩放：`transform="scale(x, y)"`，可只写一个，等比例缩放。  
rotate 旋转：`transform="rotate(deg)"`，deg 为角度  
transform-origin 元素中心点，`transform-origin="x y"`  
skew 倾斜：`transform="skewX(x) skewY(y)"`，x、y方向倾斜（ /skjuː/歪斜）

![在这里插入图片描述][e6f5824ac48c4bb49d9f24b2472598fd.gif_pic_center]

## 02、`<canvas>` 基础 ##

`<canvas>` 只是一块平平无奇的画布而已，提供了一点点API，由JS进行绘制各种图形。  
2D 的 canvas 绘制和  挺像，都是一些线、矩形、圆、path 路径数据。

*  双标签，必须包含闭合标签。
 *  坐标系以左上角为中心点，和 SVG 一样。

![在这里插入图片描述][e9fcdb83d5a148858da9da3708f607f4.png]  
![在这里插入图片描述][1765b208fb864d7c8e80e889224c3b21.png]

<canvas id="canvas" width="400" height="400"></canvas>
    <script>
    	ctx = document.getElementById('canvas').getContext('2d');
    	// ctx.alpha = false;
    	ctx.fillStyle = 'rgba(250,0,0,0.6)';
    	ctx.fillRect(10, 10, 40, 40);
    	ctx.fillRect(30, 30, 40, 40);
    	ctx.strokeStyle = 'red';
    	ctx.lineWidth = 3;
    	ctx.strokeRect(90, 10, 150, 50);
    	ctx.fillStyle = 'rgba(0,0,250,0.5)';
    	ctx.font = '20px 微软雅黑';
    	ctx.fillText("文本Text", 120, 40)
    	//path
    	ctx.beginPath();
    	ctx.moveTo(90, 80);
    	ctx.lineTo(90, 200);
    	ctx.lineTo(190, 200);
    	ctx.closePath();
    	ctx.arc(120, 120, 50, 0, 360);
    	ctx.fill();
    </script>

![在这里插入图片描述][c2780263164b40819a6cc5cc1a513cb7.png]

### 动画 ###

动画就是不停的重绘：

setInterval(function, delay)：适合不需要交互的场景。

setTimeout(function, delay)：通过键盘或者鼠标事件来捕捉用户的交互，再用 setTimeout 执行相应的动作。

requestAnimationFrame(callback)：这个方法更加平缓并更加有效率，当系统准备好了重绘条件的时候，才调用绘制动画帧。

<canvas id="canvas" width="400" height="400"></canvas>
    <script>
    	ctx = document.getElementById('canvas').getContext('2d');
    	//动画旋转
    	let eangle = 0;
    	function drawEllipse() {
          
    			ctx.clearRect(255, 150, 140, 140);
    			ctx.beginPath();
    			ctx.fillStyle = 'rgba(0,250,0,0.3)';
    			eangle = eangle > 360 ? 0 : eangle + 1;
    			ctx.ellipse(320, 230, 60, 30, eangle * Math.PI / 180, 0, 2 * Math.PI);
    			ctx.stroke();
    			ctx.fill();
    			ctx.beginPath();
    			ctx.ellipse(320, 230, 30, 60, eangle * Math.PI / 180, 0, 2 * Math.PI);
    			ctx.fillStyle = 'rgba(0,0,250,0.3)';
    			ctx.stroke();
    			ctx.fill();
    	}
    	setInterval(drawEllipse, 20);
    	//水平移动
    	let lx = 40;
    	let ltr = true;
    	function drawRect() {
          
    			if (lx > 300) ltr = false;
    			if (lx < 40) ltr = true;
    			// ctx.clearRect(lx, 220, 40, 40);
    			ctx.fillStyle = 'rgb(255,255,255,0.4)';
    			ctx.fillRect(20, 290, 340, 60);
    			lx = ltr ? lx + 2 : lx - 2;
    			ctx.fillStyle = 'rgb(110,22,250)';
    			ctx.fillRect(lx, 300, 40, 40);
    			ctx.strokeRect(lx, 300, 40, 40);
    			requestAnimationFrame(drawRect);
    	}
    	requestAnimationFrame(drawRect);
    </script>

![在这里插入图片描述][012f4883572e4cf482123e90a18e8e05.gif_pic_center]

## 03、WebGL ##

WebGL 作为一种WEB 3D绘图技术，依托于 `<canvas>` 元素。

WebGL是运行在GPU上的，可面向底层显卡编程，可以调用底层的接口，实现硬件加速，在2D图形绘制上性能会优于Canvas2D。

原生的WebGL比较难学，可考虑使用使用第三方的 WebGL库，如 Three.js、Cesium.js（3D地图）、Babylon.js

[0d102ced9bf74e55b60da01cba513604.png]: https://img-blog.csdnimg.cn/0d102ced9bf74e55b60da01cba513604.png
[729eeb27b8b64fa081fd0c2bef9fba83.png]: https://img-blog.csdnimg.cn/729eeb27b8b64fa081fd0c2bef9fba83.png
[d19d97626d034a48a2aee6fa9beca9bf.png]: https://img-blog.csdnimg.cn/d19d97626d034a48a2aee6fa9beca9bf.png
[625e8642be724405831aa7d15420c413.png]: https://img-blog.csdnimg.cn/625e8642be724405831aa7d15420c413.png
[e6f5824ac48c4bb49d9f24b2472598fd.gif_pic_center]: https://img-blog.csdnimg.cn/e6f5824ac48c4bb49d9f24b2472598fd.gif#pic_center
[e9fcdb83d5a148858da9da3708f607f4.png]: https://img-blog.csdnimg.cn/e9fcdb83d5a148858da9da3708f607f4.png
[1765b208fb864d7c8e80e889224c3b21.png]: https://img-blog.csdnimg.cn/1765b208fb864d7c8e80e889224c3b21.png
[c2780263164b40819a6cc5cc1a513cb7.png]: https://img-blog.csdnimg.cn/c2780263164b40819a6cc5cc1a513cb7.png
[012f4883572e4cf482123e90a18e8e05.gif_pic_center]: https://img-blog.csdnimg.cn/012f4883572e4cf482123e90a18e8e05.gif#pic_center