• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > HTML页面中添加Canvas标签示例

HTML页面中添加Canvas标签示例

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含HTML页面添加Canvas标签等相关知识,佚名 希望在学习及工作中可以帮助到您

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

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对象:

您可能想查找下面的文章:

相关文章

  • 2018-12-03html5上传图片IOS系统和Android系统下均显示摄像头拍照和图片选择
  • 2018-12-03HTML5实践-使用CSS实现弹性视频的代码分享
  • 2018-12-03Zepto.js 适合用来开发移动设备浏览器上的 HTML5 应用吗?
  • 2018-12-03HTML5 Canvas 图形组合是如何实现的?附代码
  • 2017-08-06HTML5通过调用canvas对象的getContext()方法来获取绘图环境
  • 2018-12-03H5怎样实现拖放功能
  • 2018-12-03全方位介绍HTML表格属性
  • 2018-12-0322个HTML5 技巧二
  • 2018-12-03HTML5实战与剖析之延迟脚本
  • 2018-12-03移动HTML5中MUI框架的使用方法

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • html5 兼容IE6结构的实现代码
    • 利用h5实现获取用户地理定位
    • input元素的url类型和email类型简介_html5教程技巧
    • HTML5的本地存储IndexedDB
    • 五分钟学会HTML5!(一)
    • 利用HTML5中的Canvas绘制一张笑脸的教程_html5教程技巧
    • 详细介绍H5弹性盒布局的使用(父容器属性)
    • html5在移动端的屏幕适应问题示例探讨
    • html5图片上传预览示例分享
    • html5中canvas学习笔记1-画板的尺寸与实际显示尺寸_html5教程技巧

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有