Canvas 和 SVG

Wed, 09 Oct 2024 00:00:00 +0800

1.Canvas

Canvas 是 HTML5 中新增的一个元素，它提供了一种通过 JavaScript 来绘制图形的方式，使用笔刷绘制2D图案。通过 Canvas，我们可以在网页中动态地绘制出各种图形、图表、动画等内容，实现更丰富的交互效果。

工作方式

Canvas 的工作方式是，我们首先在 HTML 页面中添加一个 <canvas> 元素，并指定其宽度和高度，然后在 JavaScript 中获取该元素的上下文对象，并通过调用它的方法来绘制图形。Canvas 的上下文对象有多种，包括 2D 上下文、WebGL 上下文等，我们可以根据需求选择相应的上下文对象来进行绘制。

常用属性

属性	效果
`fillStyle`	填充颜色。默认为黑色
`strokeStyle`	描边颜色。默认为黑色
`lineWidth`	线条宽度。默认为 1 像素
`lineCap`	线条末端的样式,可选值有 butt、round 和 square。默认为 butt
`lineJoin`	线条相交处的样式,可选值有 miter、round 和 bevel。默认为 miter。
`miterLimit`	线条相交处的最大斜接长度。默认为 10 像素
`globalAlpha`	绘制的透明度。默认为 1（不透明）
`shadowColor`	阴影颜色。默认为黑色
`shadowOffsetX`、`shadowOffsetY`	阴影的偏移量和模糊程度
`shadowBlur`	模糊程度

优缺点

优点

基于矢量绘制，图形可以自由缩放而不失真
具有良好的跨浏览器兼容性
通过 JavaScript 动态生成图形，可以更加灵活地控制图形的显示和交互

缺点

无法处理复杂的交互事件、不支持跨域图像等

使用实例

这个实例中，我们使用了一个 HTML5 的 Canvas 元素，它的宽度和高度分别为 200 像素。在 JavaScript 中，我们获取了这个元素，并通过 getContext 方法获取了它的上下文对象。然后，我们使用 fillStyle 属性设置了矩形的填充颜色为红色，并使用 fillRect 方法绘制了一个起点坐标为 (50,50)，宽度为 100 像素，高度为 100 像素的矩形。

Canvas 和 SVG on Last Stand

Canvas 和 SVG

1.Canvas

工作方式

常用属性

优缺点

优点

缺点

使用实例