Html5 中 Canvas 与 SVG 的使用区别

Canvas和SVG都是HTML5中用于绘制图形的技术，但它们有一些区别。Canvas是基于像素的绘图技术，它允许您直接操作像素来绘制图形，因此它更适合于绘制复杂的动态图形和游戏。而SVG是基于矢量的绘图技术，它使用数学公式来描述图形，因此它更适合于绘制静态的图形和图表。此外，Canvas需要JavaScript来控制绘图过程，而SVG可以使用CSS来控制样式。希望这些信息能够帮助您了解Canvas和SVG之间的区别。

一些具体的例子可以更好的说明Canvas和SVG之间的区别。

1. 绘制图形的方式不同

Canvas是基于像素的绘图技术，它允许您直接操作像素来绘制图形。例如，您可以使用Canvas绘制一个矩形，代码如下：

var canvas = document.getElementById("myCanvas");

var ctx = canvas.getContext("2d");

ctx.fillStyle = "#FF0000";

ctx.fillRect(0, 0, 150, 75);

而SVG是基于矢量的绘图技术，它使用数学公式来描述图形。例如，您可以使用SVG绘制一个矩形，代码如下：

<svg width="150" height="75">

<rect x="0" y="0" width="150" height="75" style="fill:red;" />

</svg>

2. 处理动态图形的能力不同

由于Canvas是基于像素的绘图技术，它更适合于绘制复杂的动态图形和游戏。例如，您可以使用Canvas绘制一个动态的小球，代码如下：

var canvas = document.getElementById("myCanvas");

var ctx = canvas.getContext("2d");

var x = canvas.width/2;

var y = canvas.height-30;

var dx = 2;

var dy = -2;

var ballRadius = 10;

function drawBall() {

ctx.beginPath();

ctx.arc(x, y, ballRadius, 0, Math.PI*2);

ctx.fillStyle = "#0095DD";

ctx.fill();

ctx.closePath();

}

function draw() {

ctx.clearRect(0, 0, canvas.width, canvas.height);

drawBall();

x += dx;

y += dy;

}

setInterval(draw, 10);

而SVG更适合于绘制静态的图形和图表，例如：

<svg width="400" height="110">

<rect x="50" y="20" width="300" height="60" style="fill:blue;" />

<text x="200" y="60" fill="white" font-size="24" text-anchor="middle">Hello, SVG!</text>

</svg>

3. 控制样式的方式不同

Canvas需要JavaScript来控制绘图过程，而SVG可以使用CSS来控制样式。例如，您可以使用CSS来控制SVG中的矩形的样式，代码如下：

<svg width="150" height="75">

<rect x="0" y="0" width="150" height="75" class="myRect" />

</svg>

<style>

.myRect {

fill: red;

stroke: black;

stroke-width: 2;

}

</style>

刚初学理解这些，希望这些例子以后回忆的时候，可以更好地理解Canvas和SVG之间的区别。