HTML5 Canvas中绘制矩形实例教程

极速赛车mp4 www.e0bp.com 日期:2015-12-03 / 人气: / 来源:

   本文翻译自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 回顶部
  • 【北京中汽南方车型报价】北京中汽南方4S店车型价格 2019-05-22
  • 政府可以处变不惊,但一些企业、股民却成了惊弓之鸟。 2019-05-22
  • 穿越千年 感受秦风全国百家重点网媒记者漫步酉阳桃花源 2019-05-16
  • 我之所以要“反来复去说客观事实及其规律”,是因为你根本就不懂得尊重客观事实及其规律,总是无视客观事实及其规律而胡言乱语,你造谣造出来的“1+1=2”就... 2019-05-16
  • 出租广州市荔湾区芳村大道东169号 2019-05-08
  • 那是当然。我国的两弹一星都是在公有制企业里搞出来的。 2019-05-08
  • 【奋斗吧2018】风电检修工——荒原上的“听风者” 2019-04-28
  • 浙江小学生北大行 梦想教育从小开始 2019-04-26
  • 空军多型战机远洋训练战巡南海  2019-04-26
  • 《脱身》举行开播盛典 陈坤开唱惊艳四座 2019-04-19
  • 她辞了职、写好遗书,从7000米高空跳下 2019-04-19
  • 联想华为高层独家讲述“5G投票”现场始末:不是投票,是共识机制! 2019-04-11
  • 出租广州市荔湾区芳村大道东169号 2019-04-04
  • 我国社会主义社会是无阶级的阶层社会,不存在剥削阶级和被剥削阶级,但存在富裕阶层和贫困阶层。 2019-03-27
  • 机关党建工作巡礼——江西“实干兴赣当先锋、为民服务作表率”主题实践活动 2019-03-27
  • 70| 614| 394| 782| 81| 111| 509| 137| 918| 79| 880| 940| 227| 594| 978|