• 【svg和canvas的区别】

    区别

    SVG（Scalable Vector Graphics）和Canvas都是用于在Web上创建图形的技术，它们的主要区别如下：

    1. SVG是一种矢量图形格式，它使用XML来描述图形，因此非常适合图形的缩放和变换。而Canvas则是一种位图技术，它使用像素来绘制图形，因此不太适合进行图形的缩放和变换。

    2. SVG可以制作复杂的图形，包括高质量的曲线、文本和渐变，Canvas则更适合制作简单的2D图形。

    3. SVG基于文档对象模型（DOM），因此可以与其他Web技术（如HTML、CSS）进行无缝集成。而Canvas则需要自己编写JavaScript代码来实现图形的交互和动画效果。

    4. SVG浏览器兼容性较好，支持较多种浏览器。而Canvas则需要一些特殊技巧才能实现一些高级功能。

    综上所述，SVG适合制作高质量、复杂的图形，而Canvas则适合制作简单的2D游戏、动画和图形效果。

    svg使用示例

    SVG是一种矢量图形格式，可以用来创建可缩放的图形和动画效果。以下是一些SVG使用示例：

    1. 创建基本图形：使用SVG可以轻松地创建各种基本图形，如矩形、圆形、椭圆、直线和多边形。
    <svg width="100" height="100">
  <rect x="10" y="10" width="50" height="50" fill="#f00" />
  <circle cx="75" cy="75" r="20" fill="#0f0" />
  <line x1="10" y1="70" x2="90" y2="30" stroke="#00f" stroke-width="2" />
  <polygon points="20,70 50,90 80,70 70,50 30,50" fill="#ff0" />
</svg>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    1. 创建文字和路径：使用SVG可以添加文本和路径，以创建更复杂的图形和动画。
    <svg width="200" height="100">
  <text x="50" y="50" font-size="18" fill="#f00">Hello SVG</text>
  <path d="M10,50 C30,30 70,70 90,50" stroke="#0f0" stroke-width="2" fill="none" />
</svg>

    • 1
    • 2
    • 3
    • 4
    1. 添加动画：使用SVG可以添加各种动画效果，如平移、缩放、旋转和透明度过渡，以创建炫酷的动画效果。
    <svg width="100" height="100">
  <rect x="10" y="10" width="50" height="50" fill="#f00">
    <animate attributeName="x" from="10" to="50" dur="1s" repeatCount="indefinite" />
    <animate attributeName="fill-opacity" from="1" to="0" dur="1s" repeatCount="indefinite" />
  </rect>
</svg>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    以上是一些基本的SVG使用示例，SVG还有许多其他功能和应用，可用于创建交互式图形、数据可视化、动态网站等。

    canvas使用示例

    以下是一个简单的 Canvas 使用示例，用于在网页上绘制一个矩形并填充颜色：

    DOCTYPE html>
<html>
<head>
	<title>Canvas 示例title>
	<style>
		canvas { border: 1px solid black; }
	style>
head>
<body>
	<canvas id="myCanvas" width="300" height="200">canvas>

	<script>
		// 获取 canvas 元素
		var canvas = document.getElementById("myCanvas");
		// 获取绘图上下文
		var ctx = canvas.getContext("2d");
		// 绘制矩形
		ctx.fillStyle = "#FF0000";
		ctx.fillRect(50, 50, 200, 100);
	script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22

    在这个示例中，我们首先定义了一个 Canvas 元素，设置其宽度和高度为 300 和 200 像素，并给它一个边框。然后，在 JavaScript 中，我们通过 getElementById 方法获取 Canvas 元素，通过 getContext 方法获取绘图上下文（这里我们选择了二维绘图上下文 2d）。最后，我们调用 fillRect 方法来绘制一个矩形，并指定填充颜色为红色。运行代码后，我们就可以在网页上看到一个红色的矩形了。

  • 相关阅读:
    Kubernetes kustomize 技术从入门到企业实战（下）
    【Vue3】回顾watch，学习watchEffect
    OpenGL坐标系转换
    提高编程效率-Vscode实用指南
    7.Excel vba开发-突出显示范围内的最大值
    P1031 [NOIP2002 提高组] 均分纸牌 【贪心】
    Nacos单机配置集群配置
    LNMP和数据库的安装
    关于微信小程序的生命周期
    【PCB绘制】Altium Designer 20 使用教程
  • 原文地址：https://blog.csdn.net/Ge_Daye/article/details/133500663