HTML5 Canvas中绘制矩形实例教程

八马彩票苹果版 www.lieshinet.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 回顶部
  • 【央视快评】让传统文化焕发新时代风采 2019-06-24
  • 念好“紧箍咒”,管住直播的“诱惑” 2019-06-24
  • 关于人生道路的选择,习近平这样勉励青年 2019-06-22
  • 滋补-热门标签-华商生活 2019-06-22
  • Hey,很高兴认识你,爸爸! 2019-06-20
  • 上饶市2018年新闻发言人“集体亮相” 共186名 2019-06-20
  • 从习仲勋的一次调研说开去:为官一任,造福一方 2019-06-14
  • 林书豪:篮球与电竞的区别在于电竞更加方便 2019-06-02
  • 而另外发达国家都做不到,垃圾只能往中国出口。前两年我们才禁止了洋垃圾的进口,我们生产的垃圾要销往哪里 2019-06-01
  • 风水神话更危险的事,就是眼瞎,根本分不清谁对谁, 2019-06-01
  • 鼓励更多社会主体投身创新创业 2019-05-30
  • 四部门发文规范特色小镇建设防止“新瓶装旧酒” 2019-05-28
  • 回眸来时路:护专建校 2019-05-28
  • 美国反邪教组织“开放思想基金会”简介 2019-05-27
  • 西安高科工程技术学校——陕西省政府直属中等职业院校西安高科工程技术学校2018招生简章-陕西教育新闻 2019-05-27
  • 730| 99| 92| 293| 527| 778| 549| 298| 204| 512| 867| 66| 735| 201| 222|