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