HTML5：Canvas教程

HTML5 Canvas 教程 canvas 是 HTML5 中一个新的用于通过脚本（通常是 JavaScript）绘图的元素。它可以用于绘图、制作图片的组合或者简单的动画。 Canvas 提供了一个名为 2D API 的编程接口，允许开发者使用 JavaScript 语言对其进行控制。 Canvas 变换操作并不限于缩放和平移，我们可以使用函数 context.rotate(angle) 来旋转图像，甚至可以直接修改底层变换矩阵以完成一些高级操作，如剪裁图像的绘制路径。如：context.rotate(1.57)，旋转角度参数以弧度为单位。 Canvas 提供了一个名为 2D drawing context 的对象，通过该对象可以访问 canvas 的绘图功能。使用 beginPath() 方法可以开始绘制路径，然后使用 moveTo() 方法指定起点坐标，lineTo() 方法指定目标坐标，closePath() 方法连接起点，闭合路径。translate() 方法可以移动坐标系，rotate() 方法可以旋转坐标系，restore() 方法可以恢复之前的坐标系，save() 方法可以保存当前的坐标系。 Canvas 还提供了多种绘制方法，如 stroke() 方法绘制轮廓，strokeText() 方法描绘文本轮廓，strokeRect() 方法使用当前的 storke style 来绘制一个矩形，而只绘制矩形的边缘。fill 方法可以填充形状，fillRect() 方法绘制一个矩形，并以当前的 fillStyle 来填充，fillStyle() 方法设置填充样式，fillText() 方法填充文本内容。 Canvas 也支持绘制图片，使用 drawImage() 方法可以填充图片，createPattern() 方法可以使用背景图片填充，addColorStop() 方法可以实现渐变填充，createRadialGradient() 方法可以实现放射性渐变。 Canvas 的 lineCap 属性可以指定线条末端的样式，lineWidth 属性可以设置线条宽度，lineJoin 属性可以修改当前形状中线段的连接方式，让拐角变得更圆滑。shadowColor 属性可以设置阴影颜色，shadowOffsetX 和 shadowOffsetY 属性可以设置阴影的偏移量，shadowBlur 属性可以设置阴影的模糊度。 Canvas 是 HTML5 中一个功能强大且灵活的绘图元素，通过使用 JavaScript 语言，可以实现各种绘图效果，满足不同开发者的需求。