本文翻译自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 回顶部
  • 吉安石桥镇有人填塘建房影响灌溉 已被叫停 6月底前完成清理 2019-04-22
  • 露营玩漂流 重庆周边度假地推荐 2019-04-22
  • 精兵劲旅·血脉赓续:第79集团军——忠诚有魂  转型重塑开新局 2019-04-21
  • 期末,就是考验班主任文笔之时 2019-04-16
  • 售8.98万-15.18万元 2018款广汽传祺GS4上市 2019-04-14
  • 木有评论的价值,逗逗你这猴崽子。[哈哈] 2019-04-14
  • “明厨计划”发布在即 给餐饮从未有过的改变 2019-04-13
  • 人民日报驻美记者高石:美国急于将空袭打造为特朗普政府政绩 2019-04-08
  • 一带一路人民币国际化做好分析总结是最重要工作,国际竞争需要 2019-04-08
  • NBL联赛揭幕战在雪域高原打响 2019-04-08
  • 【奋斗者说】银河麒麟孔金珠:核心技术只有靠自己干出来 2019-04-02
  • 熊出没!云南景东县首次利用红外相机拍到黑熊活动轨迹 2019-03-23
  • 重庆市奉节县:推行村级“三会”自治机制 2019-03-23
  • 社会主义是一个真正的民主国家,这里的人民当家做主, 2019-03-23
  • 本田哥瑞优惠0.5万元 欢迎莅临赏鉴 2019-03-23
  • 628| 962| 183| 249| 950| 86| 818| 412| 592| 661|