本文翻译自Steve Fulton & Jeff Fulton HTML5 Canvas, Chapter 2, “The Basic Rectangle Shape”.

  让我们来看一下Canvas内置的简单几何图形 — 矩形的绘制。在Canvas中,绘制矩形有三种方法:填充(fillRect)、描边(StrokeRect)以及清除(clearRect)。当然,我们也可以使用“路径”来描绘包括矩形在内的所有图形。

  以下是上述三种方法的API:

  1.fillRect(x,y,width,height)?;嬷埔桓龃?x,y)开始,宽度为width,高度为height的实心矩形。

  2.strokeRect(x,y,width,height)?;嬷埔桓龃?x,y)开始,宽度为width,高度为height的矩形框。该矩形框会根据当前设置的strokeStyle、lineWidth、lineJoin和miterLimit属性的不同而渲染成不同的样式。

  3.clearRect(x,y,width,height)。清除从(x,y)开始,宽度为width,高度为height的矩形区域,使之完全透明。

  在调用上述方法绘制Canvas之前,我们需要设定填充和描边的样式。设定这些样式最基本的方法是使用24位色(用16进制字符串表示)。以下是一个简单的例子:

  代码如下: context.fillStyle = "#000000"; context.strokeStyle = "#ff00ff";

  在下面的例子中,填充色设定为黑色,而描边色则设定为紫色:

  代码如下: function drawScreen() { context.fillStyle = "#000000"; context.strokeStyle = "#ff00ff"; context.lineWidth = 2; context.fillRect(10, 10, 40, 40); context.strokeRect(0, 0, 60, 60); context.clearRect(20, 20, 20, 20); }

  

 

 

作者:


推荐内容 Recommended

相关内容 Related

现在致电 0898-688989 OR 查看更多联系方式 →

Go To Top 回顶部
  • 社会消费品零售总额 上月增长8.5% 2019-06-16
  • 布小林:内蒙古将推动形成全面开放新格局 2019-06-10
  • 回复@老老保老张工:玩你的铁环去! 2019-06-04
  • 阿来、麦家最近先后加入驻校作家行列 驻校作家做些什么 2019-06-04
  • 一行两会传递金融开放信号 沪伦通制度安排就绪  2019-06-01
  • 我发现从五+年代农业用化肥农药,在六+年代几百年长的柿树几乎死光。没人研究! 2019-06-01
  • 商务部发言人就美方公布对华贸易措施发表谈话 2019-05-30
  • 取证!上海惊现“1”字头新房,将推509套房源! ——凤凰网房产上海 2019-05-29
  • 华谊发布第六季H计划片单《手机2》未受影响仍热拍 2019-05-28
  • 保险板块逆势崛起 低估值备受市场青睐 2019-05-24
  • 安徽贯彻十九大:振兴美丽乡村,造福乡里乡亲 2019-05-20
  • 广汽传祺新GS4将6月16日上市 配置升级 2019-05-17
  • Map Out Your Life in Chongqing 2019-05-17
  • 吉林省交通运输厅原党组成员、副厅长李恩会接受纪律审查和监察调查 2019-05-15
  • 新和县:12333为参保群众提供咨询便利 2019-05-08
  • 194| 550| 969| 630| 390| 983| 953| 976| 975| 858|