var canvas = $(“#myCanvas”); var context = canvas.get(0).getContext(“2d”); context.fillRect(40, 40, 100, 100); context.beginPath(); context.arc(230, 90, 50, 0, Math.PI*2,false); context.closePath(); context.fill(); context.clearRect(0, 0, canvas.width(),canvas.height());

注：canvas元素实际上提供了宽度和高度属性，所以选择哪种方式完全取决于你，使用jQuery方式，或纯JavaScript方式获取画布的尺寸。

其实可以不必清除整个画布，完全可以很容易地清除某一特定区域。例如，在本例中仅删除正方形，就可按下列方式调用clearRect()：

context.clearRect(40, 40, 100, 100);

这样就可以单独留下一个圆。

这种方式可以指定clearRect()中的参数以清除一个特定的区域。在本例中，我们将擦除区域的起点（左上角）设定在正方形的左上角（40,40），并将擦除区域的宽度与高度设置为正方形的宽高度（100）。其结果是只有正方形被清除。同样你也可以通过改变clearRect()参数将圆形擦除：

context.clearRect(180, 40, 100, 100);

这样保留下来的就会只是一个正方形。

需注意的是，一个弧形的圆心是它的中心，所以要得到clearRect方法正确的起点，我们需要首先获取弧的圆心，且X，Y的值需分别减去半径。

context.fillRect(40, 40, 100, 100); context.beginPath(); context.arc(230, 90, 50, 0, Math.PI*2,false); context.closePath(); context.fill(); context.clearRect(230, 90, 50, 50);

以上代码会截去圆形的一部分：

有时这种方式可以用于快速方便地绘制复杂图形，先绘制出基本形状再加以裁剪。

宽度/高度技巧

如果你想擦除画布上的一切从头开始，那么可以考虑宽度/高度的技巧。这可以用来重置画布至默认设置并刷新状态。这种方法确实有一些缺点，先举个例子：

context.fillStyle = “rgb(255, 0,0)”; context.fillRect(40, 40, 100, 100); context.beginPath(); context.arc(230, 90, 50, 0, Math.PI*2,false); context.closePath(); context.fill();

先在画布上绘制一个红色的正方形和圆形，然后添加画布复位：

canvas.attr(“width”,canvas.width()); canvas.attr(“height”,canvas.height());

这只是一个jQuery技巧应用，您需要改变的是canvas元素的宽度与高度属性，并且可以通过jQuery的attr()方法做到这一点。我们需传递参数名（宽度和高度），以及所要设置的参数值（与之前的的宽度和高度相同）。正常情况下你会看到一个空白的画布。

添加以下代码行：

context.fillRect(40, 40, 100, 100);

宽度/高度技巧的缺点是，在画布上所有一切都会复位，包括样式和颜色等。

Canvas填充浏览器窗口

到目前为止canvas元素一直在500像素这一固定的宽度和高度上，但那么如何才能让它填满整个浏览器窗口呢？对于一个普通的HTML元素来说，你只需正常将其宽度和高度属性设置为100％即可。不过画布元素并不支持该方法，这里我们来看另一种方式。

最简单的方式做就是将canvas元素的宽度和高度精确设置为浏览器窗口的宽度和高度。我们可以通过window浏览器对象和jQuery技巧获取宽度和高度：

var canvas = $(“#myCanvas”); var context = canvas.get(0).getContext(“2d”); canvas.attr(“width”,$(window).get(0).innerWidth); canvas.attr(“height”,$(window).get(0).innerHeight); context.fillRect(0, 0, canvas.width(),canvas.height());

使用$(window).get(0).innerHeight代替$(window).height()是因为后者无法返回所有浏览器窗口的完整高度值。这种方法实际效果并不完美，浏览器窗口中canvas元素和滚动条的四周仍存在白色区域：

为了解决这个问题，我们需要用到CSS。在文本编辑器中创建一个canvas.css，并保存在HTML文档的同一目录下，将下列代码加入CSS文件中并保存：

* { margin: 0; padding: 0; } html, body { height: 100%; width: 100%; } canvas { display: block; }

要使用HTML文档中这一CSS，需要添加以下代码行至jQuery script元素前的head元素内：

<link href=”canvas.css”rel=”stylesheet” type=”text/css”>

其效果是canvas元素完美地填充了整个浏览器窗口。

当然，这并没有结束。你会发现不管怎么调整浏览器窗口大小，画布都会保持着之前的尺寸：

这就需要在浏览器窗口大小改变的同时来调整画板的大小。

$(window).resize(resizeCanvas); function resizeCanvas() { canvas.attr(“width”, $(window).get(0).innerWidth); canvas.attr(“height”, $(window).get(0).innerHeight); context.fillRect(0, 0, canvas.width(), canvas.height()); }; resizeCanvas();

此时你会发现画布实现完美调整，并且不会出现滚动条。

总结

本章中涵盖了各种有趣的东西，特别是在你从未使用过的Canvas之前。现在你已经学会如何使用canvas元素进行基本形状和路径的绘制，改变图形和路径的颜色，以及如何绘制文本，擦除画布，如何使画布填充浏览器窗口等等