HTML5 Canvas实战
2.1 绘制矩形
阅读(

路径和文本

图形及组合

绘制矩形

本节,我们将学习如何绘制矩形,它也是HTML5的画布API唯一所提供的内置图形。矩形看上去可能不会让你感到兴奋,但是许多应用程序还是以某种方式在使用它,所以你也应该了解它。

绘制矩形
图2-1 绘制矩形

绘制步骤

按照以下步骤,在画布的中央绘制一个简单的矩形:

1. 定义2D画布上下文:

window.onload  = function(){
  var canvas  = document.getElementById("myCanvas");
  var context  = canvas.getContext("2d");

2. 使用rect()方法绘制矩形,通过fillStyle属性设置填充颜色,并使用fill()方法填充该矩形:

  context.rect(canvas.width  /  2  -  100, canvas.height  /  2  -  50, 200,  100);
  context.fillStyle = "#8ED6FF"; 
  context.fill();
  context.lineWidth   =  5;
  context.strokeStyle = "black"; 
  context.stroke();
};

3. 在HTML文档的body部分嵌入canvas标签:

<canvas id="myCanvas" width="600" height="250" style="border:1px solid black;">
</canvas>

工作原理

正如前面代码所看到的,我们可以使用rect()方法绘制一个简单的矩形:

context.rect(x,y,width,height);

rect()方法在x,y点绘制一个矩形,并通过width和height参数定义矩形的尺寸。本章需要注意的另一个重点是fillStyle和fill()的用法。跟strokeStyle和stroke()类似,我们可以通过fillStyle属性来指定填充颜色,通过fill()来填充图形。

注意,我们在stroke()方法之前调用fill()方法。如果我们在进行描边之前就填充一个图形,则描边样式的一半会被填充样式覆盖掉,实质上就使lineWidth属性设置的宽度减半。因此,先调用fill()方法,再调用stroke()方法,是一个良好的实践。

了解更多

除了rect()方法,还有另外两个方法来绘制矩形,并仅一行代码就可以为矩形应用样式,这两个方法是fillRect()和strokeRect()方法。

fillRect()方法

使用rect()方法绘制矩形后,如果我们想要填充该矩形,我们可能会考虑使用fillRect()单个方法,来同时完成绘制和填充:

context.fillRect(x,y,width,height);

fillRect()方法等价于rect()方法后面紧跟fill()方法。使用该方法时,需要在调用它之前,定义填充样式。

strokeRect()方法

除了fillRect()方法,我们可以使用strokeRect()单个方法来绘制矩形,并对它进行描边:

context.strokeRect(x,y,width,height);

strokeRect()方法等价于rect()方法后面紧跟stroke()方法。跟fillRect()方法类似,需要在调用之前定义描边样式。

不幸的是,HTML5的画布API没有提供能够同时对矩形进行填充和描边的方法。就个人而言,我喜欢使用rect()方法并应用描边样式,并且,在需要填充时,我使用stroke() 和 fill()方法,因为这样做更符合自定义图形的绘制习惯。然而,在使用这些简便方法时,如果你想对一个矩形同时进行描边和填充,在fillRect()方法后面紧跟stroke()是一个良好的实践。如果你使用strokeRect()方法后面紧跟fill()方法,描边样式将被填充样式覆盖,使线条的宽度减半。

相关参考

  • 第5章 创建直线运动的动画
  • 第6章 检测区域事件
  • 第7章 创建柱状图

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我们提供更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验