15、HTML5 Canvas与Web Workers全解析

HTML5 Canvas与Web Workers全解析

1. HTML5 Canvas基础

在HTML5中，canvas元素默认是透明的，为了让其可见，我们可以添加边框。即便应用了CSS规则，canvas的实际大小默认仍为300x150像素。若在这样的canvas中绘制图形，可能会因样式拉伸坐标空间而导致图形变形。

1.1 clearRect函数

clearRect函数用于清除canvas的矩形区域。它在2D canvas的上下文对象上调用，接收四个参数，依次为相对于canvas原点的x和y偏移量，以及要清除区域的宽度和高度。与其他编程语言的绘图API不同，后两个参数是相对于前两个参数指定点的位移距离。

以下是使用示例：

var canvas = document.querySelector("canvas");
var ctx = canvas.getContext("2d");
// 清除整个canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 仅清除canvas内部一半的区域
ctx.clearRect(canvas.width * 0.25, canvas.height * 0.25,
   canvas.width * 0.5, canvas.height * 0.5);
// 清除canvas右下角100x100的正方形区域
ctx.clearRect(canvas.width - 100, canvas.height - 100, 100, 100);