3、HTML5与JavaScript绘图、音频、图像及动画技术全解析

HTML5与JavaScript绘图、音频、图像及动画技术全解析

1. 绘图基础

在绘图时，我们可以对字体进行修改。以下代码展示了如何在画布上绘制不同字体大小的文本：

// Modifying the font
context.font = '10 pt Arial';
context.fillText('This is in 10 pt Arial...', 330, 60);
// Drawing stroked text
context.font = '16 pt Arial';
context.strokeText('This is stroked in 16 pt Arial...', 330, 80);

此外，我们还能自定义绘图样式，包括颜色和纹理。默认情况下，画布的绘图颜色为黑色，但我们可以使用 fillStyle 和 strokeStyle 属性来设置填充和描边颜色。以下是一个绘制彩色矩形的示例：

// Set fill color to red
context.fillStyle = "red";
// Draw a red filled rectangle
context.fillRect(310, 160, 100, 50);
// Set stroke color to green
context.strokeStyle = "green";
// Draw a green stroked rectangle
contex