context.strokeStyle = “rgb(255, 0,0)”; context.beginPath(); context.moveTo(40, 180); context.lineTo(420, 180); // Red line context.closePath(); context.stroke(); context.strokeStyle = “rgb(0, 0,0)”; context.beginPath(); context.moveTo(40, 220); context.lineTo(420, 220); // Black line context.closePath(); context.stroke();

调整线宽

想要在画布上改变线宽，就要用到2D渲染上下文中的lineWidth属性。lineWidth属性默认值为1，你可以将它设置为所需的任意值。例如，我们改变红色与黑色线条的宽度：

context.lineWidth = 5; // Make lines thick context.strokeStyle = “rgb(255, 0,0)”; context.beginPath(); context.moveTo(40, 180); context.lineTo(420, 180); // Red line context.closePath(); context.stroke(); context.lineWidth = 20; // Make lines eventhicker context.strokeStyle = “rgb(0, 0,0)”; context.beginPath(); context.moveTo(40, 220); context.lineTo(420, 220); // Black line context.closePath(); context.stroke();

运行结果显示为稍厚的红线与过厚的黑线：

lineWidth属性在图形上同样适用：

context.lineWidth = 5; // Make lines thick context.strokeStyle = “rgb(255, 0,0)”; context.strokeRect(40, 40, 100, 100); //Red square context.strokeRect(180, 40, 100, 100); //Red square context.lineWidth = 20; // Make lines eventhicker context.strokeStyle = “rgb(0, 0,0)”; context.strokeRect(320, 40, 100, 100); //Black square

绘制文本

Canvas不仅仅是用来绘制图形和图像，也可以用它来显示文本。尽管在很多情况下这并不是一个较好的选择，尤其是相比使用更为传统的HTML元素（如AP元素）而言。

画布上的文字是作为一个图像绘制出来，准确来讲它并不是文字，也就意味着它无法像普通HTML文档中的文本那样被光标选中。如果你之前使用Microsoft画图，那么你就会明白：一旦文本已经绘制，就不能再次编辑，除非删除重绘。在画布上绘制文本的好处是，你可以使用各种精彩功能在画布上绘制。这里需要强调的是，不应在画布上创建文本，你应该使用正常的HTML元素创建文本，然后通过CSS定位到画布的顶层。这里的关键区别在于，HTML处理文本（内容），而Canvas直接针对像素和图形的处理。

以下代码演示了如何绘制文本：

var text = “Hello, World!”; context.fillText(text, 40, 40);

2D渲染上下文中fillText方法共有四个参数（一个可选，我们暂时忽略）;首先是要绘制的文本字符串，第二和第三参数是文本原点（左下角）的坐标值（X，Y）。

这里没有演示实例效果，因为它太小以致于很难看到，这是因为画布上的文本字体的默认设置为10px sans-serif（绝对微小）。可按下列代码所示更改字体属性：

var text = “Hello, World!”; context.font = “30px serif”; //Change the size and font context.fillText(text, 40, 40);

与CSS中的字体属性类似，字体属性为一个字符串值。在前面的例子中，给出的字体属性是像素尺寸，以及所要使用的字体名称。实例中已将它设置为serif，效果如下：

如果需要你甚至可以设置为斜体：

var text = “Hello, World!”; context.font = “italic 30pxserif”; context.fillText(text, 40, 40);

在这里唯一要做的只是将italic添入字体属性字符串中。除此之外还可以作很多设置，诸如行的高度以及其它备用字体等等，这里就不一一描述。

注：不难发现画布的基础功能使用极其简单方便，因为2D渲染上下文API中使用的方法与属性都是以易于理解的方式命名，这些都能够轻松掌握。

进行下一步之前，我们先来了解下如何勾勒文本，这是非常有用的：

var text = “Hello, World!”; context.font = “italic 60pxserif”; context.strokeText(text, 40, 100);

其中调用的strokeText()方法的参数与fillText()完全相同，为了能更清晰的显示，调整了上例中字体的大小及位置：

画布擦除

当你在绘图过程中出了错或要擦拭重绘时，可以有两种选择：调用clearRect()方法，或者宽度/高度技巧。我们首先看看2D渲染上下文中clearRect()方法。

例如刚刚在画布上绘制一个正方形和一个圆：

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

现在需要做的就是调用clearRect()方法，指定擦除区域的原点坐标（X,Y），以及其宽度和高度。如果画布500像素宽，500像素高，那么调用方式可以如下：

context.clearRect(0, 0, 500, 500);

此时再运行，将显示为空白。当不清楚画布的大小时，还可以调用clearRect()，参数可以由jQuery宽度与高度的方法获取：

context.clearRect(0, 0, canvas.width(),canvas.height());

完整代码如下：