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

板块导航

浏览  : 1907
回复  : 5

[HTML5] HTML页面中添加Canvas标签示例_html5教程技巧

[复制链接]
友美C_cup的头像 楼主
发表于 2015-7-15 10:46:27 | 显示全部楼层 |阅读模式
本帖最后由 友美C_cup 于 2015-7-15 10:49 编辑

在HTML页面的<body>中,可以用像下面的代码来添加<canvas>标签:


  1. <div style="text-align: left;"><span style="color: rgb(0, 0, 0); line-height: 1.5;"><canvas id="canvasOne" width="500" height="300"></span></div><font color="#000000"><div style="text-align: left;"><span style="line-height: 1.5;">Your browser does not support HTML5 Canvas.</span></div><div style="text-align: left;"><span style="line-height: 1.5;"></canvas></span></div></font>
复制代码

       译注:对于canvas,以下写法是不允许的

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

       让我们来看一下上述代码到底做了些什么。<canvas>标签有3个主要的属性,包括:

       1.id。我们可以在JavaScript代码中用id值来引用该<canvas>标签。在上述代码中,id值为canvasOne。

       2.width。canvas的宽度,以像素为单位。在上述代码中,width值为500个像素。

       3.height。canvas的高度,以像素为单位。在上述代码中,height值为300个像素。


在Canvas的开始标签<canvas>与结束标签</canvas>之间,我们可以放置任意一段文本;当打开HTML网页的浏览器不支持Canvas的时候,这段文本会显示在Canvas标签所在的地方。在上面的代码中,我们使用的文本为“Your browser does not support HTML5 Canvas.”。


在JavaScript中用document对象来引用canvas元素


当HTML页面加载后,document对象指代了该页面中的所有元素,因此我们可以用DOM来引用上述代码中定义的<canvas>。


我们需要Canvas对象的引用,这样就可以知道在哪里显示用Canvas接口进行的绘画。


首先,我们定义一个名为theCanvas的变量来保存Canvas对象的引用。


然后,我们调用document对象的getElementById()函数,将传入的参数设为canvasOne(HTML页面中<canvas>标签的id),来获取Canvas对象:


  1. var theCanvas = document.getElementById("canvasOne");
复制代码








相关帖子

发表于 2015-8-10 19:18:46 | 显示全部楼层
html5的时代快要到来了么
使用道具 举报

回复

发表于 2015-8-14 10:39:52 | 显示全部楼层
Very Good!
使用道具 举报

回复

发表于 2015-8-14 10:40:52 | 显示全部楼层
说是html5 其实都是js和css3
点评 ( 1 ) 收起 / 展开点评

友美C_cup 2015年08月14日 10:54 详情 回复

是哪是哪

使用道具 举报

回复

友美C_cup的头像 楼主
发表于 2015-8-14 10:53:52 | 显示全部楼层
使用道具 举报

回复

友美C_cup的头像 楼主
发表于 2015-8-14 10:54:00 | 显示全部楼层
中场灵魂 发表于 2015-8-14 10:40
说是html5 其实都是js和css3

是哪是哪
使用道具 举报

回复

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

本版积分规则

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