16、HTML5 Canvas与JavaScript高级应用全解析

HTML5 Canvas与JavaScript高级应用全解析

1. Canvas文本绘制与样式设置

在Canvas中， fillText(...) 和 strokeText(...) 命令用于绘制文本，它们会使用 font 属性中指定的字体样式。字体的相关设置，如字体面、样式、大小等，与CSS字体样式规则中的设置相同。文本的颜色分别由 fillStyle 和 strokeStyle 属性控制，描边的线宽也是如此。

示例代码如下：

// 假设已经获取了canvas的上下文mycontext
mycontext.font = "50pt Arial";
mycontext.fillStyle = "#f00";
mycontext.fillText("Hello", 25, 75);

2. Canvas绘图裁剪

有时候，你可能希望使用绘图命令（如绘制文本），但想通过自定义的形状来裁剪绘图区域。Canvas API提供了 clip(...) 命令，它会将当前定义的路径作为后续绘图命令的裁剪蒙版，即Canvas元素只会在定义的裁剪蒙版边界内进行绘图，而丢弃路径外的绘图内容。

以下是一个将字母 “H” 用圆形裁剪的示例：

mycontext.beginPath();
myco