如何利用JavaScript进行Canvas画布和SVG矢量图形生成和操作？

Canvas画布生成

要生成canvas画布，我们需要先在HTML中添加一个canvas元素，并用JavaScript获取到该元素的上下文，即可进行绘图操作。

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

上面的代码中，我们通过getElementById方法获取了id为myCanvas的canvas元素，并使用getContext方法获取了2D上下文对象ctx。

Canvas绘图操作

在获取到canvas上下文对象后，我们就可以进行绘图操作了。下面是一些基本的绘图操作：

// 绘制矩形
ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 100, 100);

// 绘制圆形
ctx.beginPath();
ctx.arc(75, 75, 50, 0, Math.PI * 2, true);
ctx.fillStyle = 'green';
ctx.fill();

上面的代码中，我们通过fillRect方法绘制了一个大小为100x100的红色矩形，通过arc方法绘制了一个半径为50的绿色圆形。

Canvas图像操作

除了基本的绘图操作外，Canvas还支持一些图像操作，如绘制图像、裁剪图像等。下面是一些常用的图像操作：

// 绘制图像
const img = new Image();
img.src = 'path/to/image';
img.onload = function() {
  ctx.drawImage(img, 0, 0);
};

// 裁剪图像
ctx.beginPath();
ctx.arc(75, 75, 50, 0, Math.PI * 2, true);
ctx.clip();
ctx.drawImage(img, 0, 0);

上面的代码中，我们通过drawImage方法绘制了一个图像，通过clip方法裁剪了一个圆形的区域。

SVG矢量图形生成和操作

与Canvas不同，SVG是一种基于XML的格式，可以通过JavaScript直接生成和操作SVG图形。下面是一个简单的SVG图形：

<svg width="100" height="100">
  <rect x="10" y="10" width="80" height="80" fill="red" />
</svg>

上面的代码中，我们使用SVG的rect元素绘制了一个大小为80x80的红色矩形。

要通过JavaScript生成SVG图形，我们可以使用createElementNS方法创建SVG元素，并使用setAttribute方法设置元素的属性：

const svgNS = 'http://www.w3.org/2000/svg';
const svg = document.createElementNS(svgNS, 'svg');
svg.setAttribute('width', '100');
svg.setAttribute('height', '100');
document.body.appendChild(svg);

const rect = document.createElementNS(svgNS, 'rect');
rect.setAttribute('x', '10');
rect.setAttribute('y', '10');
rect.setAttribute('width', '80');
rect.setAttribute('height', '80');
rect.setAttribute('fill', 'red');
svg.appendChild(rect);

上面的代码中，我们首先使用createElementNS方法创建了一个SVG元素，并使用setAttribute方法设置了元素的宽度和高度。然后，我们创建了一个rect元素，并设置了它的属性，最后将它添加到SVG元素中。

除了生成SVG元素外，我们还可以使用JavaScript操作SVG元素，如修改元素的属性、添加元素等。下面是一些常用的SVG操作：

// 修改元素属性
rect.setAttribute('fill', 'green');

// 添加元素
const circle = document.createElementNS(svgNS, 'circle');
circle.setAttribute('cx', '50');
circle.setAttribute('cy', '50');
circle.setAttribute('r', '30');
circle.setAttribute('fill', 'blue');
svg.appendChild(circle);

上面的代码中，我们通过setAttribute方法修改了rect元素的填充颜色，并使用createElementNS方法创建了一个circle元素，并设置了它的属性，最后将它添加到SVG元素中。