HTML5 Canvas中绘制矩形实例教程

11选五 www.k5en.cn 日期: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 回顶部
  • 马特乌斯评德国队首战失利:“几乎什么都欠缺” 2019-05-16
  • 日照:优化推进机制 加快项目成长 2019-05-16
  • 人民网驻韩国记者报道集 2019-05-15
  • 父母不尊重孩子的五个表现 进来看看你有没有 2019-05-14
  • 你的第一段就认识错误。中国人如果认为神赐就能有幸福,就不会有后羿射日精卫填海愚公移山的故事了。中华文明世界观推导出的方法论就是八个字,事在人为,人定胜天。 2019-05-14
  • 6个关键词 教你读懂最新癌症预防报告 2019-05-09
  • 军队资源战略管理研究 2019-05-09
  • 暴瘦50斤,70岁的她爱穿比基尼,活得比少女还滋润! 2019-05-08
  • 段健的专栏作者中国国家地理网 2019-05-03
  • 广州租房市场进入淡季 区域热点板块成交不减 2019-05-01
  • 第十二届人民企业社会责任奖评选启动 2019-04-30
  • 个人信息,利用好更需保护好(人民时评) 2019-04-30
  • 山西欧美同学会为山西人才工作建言 2019-04-30
  • 真正学进去 积极讲出来 扎实做起来市委常委部门分别召开会议传达学习全国两会精神 2019-04-26
  • 文学、啤酒、世界杯和姑娘,噢我的八十年代! 2019-04-26
  • 522| 704| 758| 299| 77| 167| 589| 70| 361| 158|