html画布canvas,html5中画布画大白,html5 canvas绘图,html5画布动态,html画布代码,html5画布画圆
HTML5 Canvas和SVG都是用于创建图形和动画的Web技术，但它们有着不同的工作原理和适用场景。

HTML5 Canvas是一个基于像素的绘图系统，可以通过JavaScript代码来绘制各种形状、线条、文本和图片等。Canvas中的所有元素都是位图，并且不能被单独操作。Canvas适合用于实时生成动态交互式的图形和游戏等应用。

以下是一个简单的Canvas例子，绘制了一个红色矩形：

html
<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 50, 50);
</script>


SVG是可缩放矢量图形格式，可以通过XML代码描述图形和文本等。SVG中的所有元素都是矢量对象，并且可以单独操作、变换和动画等。SVG适合用于静态的、高分辨率的图形和数据可视化等应用。

以下是一个简单的SVG例子，绘制了一个蓝色圆形：

html
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="40" fill="blue" />
</svg>