UDN-企业互联网技术人气社区

板块导航

浏览  : 972
回复  : 1

[HTML5] Canvas标签的应用-在页面上放置Canvas

[复制链接]
友美C_cup的头像 楼主
发表于 2015-7-11 00:31:31 | 显示全部楼层 |阅读模式
    今天我们将要学习在HTML5中最吸引眼球的一个标签——Canvas,我相信有很多人学习HTML5就是为了Canvas。这节内容非常简单,主要是为大家介绍Canvas标签的使用。

    在我们学习它之前稍微补充一下知识,虽然有点理论,但以下稍微理论点的东西还是很有用的。

    Canvas标签的基础知识:

    canvas是HTML5中新增加的一个重要元素,专门用来绘制图形。在页面上放置一个canvas元素,就相当于在页面上放置了一个“画布”,如果您做过Flash,可以理解为Flash中的“舞台”,我们可以在这里面进行描绘。

    必须要注意的是,我们在canvas中绘图,并不是我们拿鼠标在上面来作画。事实上canvas元素只是一块无色透明的区域(就像一个只有宽度高度无背景的div一样)需要使用JavaScript编写脚本在其中绘画。

    Q:那么有些HTML5的网站,也是canvas,为什么鼠标在上面就能画画呢?
   

    A:这是因为JS脚本捕获的鼠标的路径而作画,并非真正是鼠标来作画的,只是从视觉上感觉是鼠标来作画。就连PhotoShop我们从编程的角度来讲也不能说是鼠标在作画,而是捕获的鼠标路径和动作,程序在其绘画的。

    在页面上放置一个canvas标签

    一般一个基本的canvas由属性id、width和height共同组成,代码如下:

  1. <canvas id="W3Cfuns_canvas" width="400" height="300"/>
复制代码






拓展阅读:

相关帖子

发表于 2015-9-17 15:22:55 | 显示全部楼层
恩,排版更清晰点就更好了
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部