canvas教程

用Canvas标签绘制矩形

字号+ 作者:H5之家 来源:H5之家 2016-12-20 14:02 我要评论( )

本文教大家如何在canvas上绘制矩形,当你学会后,可以再举一反三的做一下练习。注:本节内容,需要您有JS基础才能更好地理解。

当前位置:代码家园 > 教程阅读 > 前端设计 > HTML/CSS > 正文内容

HTML5教程-用Canvas标签绘制矩形
  • 所属分类:HTML/CSS 阅读:正在加载...次 来源:
  • 分享到:()

  • 本文教大家如何在canvas上绘制矩形,当你学会后,可以再举一反三的做一下练习。

    注:本节内容,需要您有JS基础才能更好地理解。

    绘制矩形的步骤:

    1、在页面上创建一个canvas标签

    首先在页面上建立一个canvas标签,因为我们所有的操作都要在canvas元素上完成。

    2、使用js取得canvas元素

    由于需要调用canvas给我们提供的对象方法来进行绘制图形,所以第二部要使用document.getElementById等方法取得canvas对象。

    3、取得上下文

    进行图形绘制时,需要用到图形上下文(graphics context),它是一个封装了很多绘图功能的对象。需要使用canvas对象的getContext方法来获得图形上下文graphics context。在draw函数中,将参数设置为"2D"。

    注:您可能会想,“那可不可以把它设置为3D或者4D了呢?”,答案是,绝对不行。

     4、填充绘制边框

    使用canvas元素绘制图形的时候,有两种方式——填充(fill)与绘制边框(stroke)。填充指的是填满图形内部;绘制边框是指不填满图形的内部,只绘制图形的外框。Canvas元素结合这两种方式来绘制图形。

    如果到这里您还不理解的话,咱们使用CSS的方式来理解。

    把绘制的图形看成div的话,CSS的border就是stroke,CSS的background就是fill,当这两个不存在的时候,canvas中就什么都没有,就好比一个空白透明的div。

    5、设定绘图样式

    再进行图形绘制的时候,首先要设定好绘图的样式(style),然后调用相关方法进行图形绘制。

    6、指定线宽

    使用canvas对象提供给我们的lineWidth属性设置图形边框的宽度,在绘制图形的时候,任何直线都可以通过lineWidth属性来指定直线的宽度。

    7、指定颜色值

    我们分别通过fillStyle属性和strokeStyle属性来制定颜色,它与我们在CSS中设置颜色一样,可以使用“red”、“blue”或者“#ff0000”这种十六进制的颜色值,也可以通过rgb(红色值,绿色值,蓝色值)和rgba(红色值,绿色值,蓝色值,透明度)来指定颜色。

    8、绘制矩形

    分别使用fillRect方法和strokeRect方法来填充矩形和绘制矩形的边框。

    我们只要通过以上步骤,就可以绘制简单的图形了。

    案例

    运行结果如下图:

    转载请注明:代码家园 HTML5教程-用Canvas标签绘制矩形

    继续浏览有关 HTML5教程Canvas标签 的文章

    上一篇:
    HTML5教程-如何在页面上放置Canvas
    下一篇:
    HTML5教程-meter标签的应用

    相关文章

    评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)

  • yuuk

    2012-09-28 11:44:39发表

    (色)

  • yuuk

    2012-09-28 11:39:21发表

    (色)

  • yuuk

    2012-09-17 09:46:51发表

    (色)

     

    1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

    相关文章
    •  深度辨析IE10对HTML5 Canvas支持及实例教程(一)

      深度辨析IE10对HTML5 Canvas支持及实例教程(一)

      2016-12-20 16:02

    • HTML5 Canvas+JS控制电脑或手机上的摄像头实例

      HTML5 Canvas+JS控制电脑或手机上的摄像头实例

      2016-12-20 14:01

    • Silverlight/Windows8/WPF/WP7/HTML5周学习导读(6月25日

      Silverlight/Windows8/WPF/WP7/HTML5周学习导读(6月25日

      2016-12-19 15:03

    • HTML5:Canvas很好的一个Demo

      HTML5:Canvas很好的一个Demo

      2016-12-18 15:01

    网友点评