HTML页面中添加Canvas标签示例


Posted in HTML / CSS onJanuary 01, 2015

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

复制代码
代码如下:

<canvas id="canvasOne" width="500" height="300">
Your browser does not support HTML5 Canvas.
</canvas>

译注:对于canvas,以下写法是不允许的:
复制代码
代码如下:

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

复制代码
代码如下:

var theCanvas = document.getElementById("canvasOne");

HTML / CSS 相关文章推荐
详解CSS3 用border写 空心三角箭头 (两种写法)
Sep 29 HTML / CSS
HTML5时代CSS设置漂亮字体取代图片
Sep 04 HTML / CSS
CSS3制作炫酷的自定义发光文字
Mar 28 HTML / CSS
css3实现元素环绕中心点布局的方法示例
Jan 15 HTML / CSS
用HTML5 Canvas API中的clearRect()方法实现橡皮擦功能
Mar 15 HTML / CSS
Html5移动端获奖无缝滚动动画实现示例
Jun 25 HTML / CSS
html5构建触屏网站之网站尺寸探讨
Jan 07 HTML / CSS
HTML5 placeholder(空白提示)属性介绍
Aug 07 HTML / CSS
html特殊符号示例 html特殊字符编码对照表
Jan 14 HTML / CSS
HTML5 HTMLCollection和NodeList的区别详解
Apr 29 HTML / CSS
Html5页面获取微信公众号的openid的方法
May 12 HTML / CSS
使用 CSS 构建强大且酷炫的粒子动画效果
Aug 14 HTML / CSS
HTML5 Canvas之测试浏览器是否支持Canvas的方法
Jan 01 #HTML / CSS
HTML5 Canvas中绘制矩形实例
Jan 01 #HTML / CSS
HTML5 Canvas中使用用路径描画圆弧
Jan 01 #HTML / CSS
HTML5 Canvas中使用路径描画二阶、三阶贝塞尔曲线
Jan 01 #HTML / CSS
HTML5制作酷炫音频播放器插件图文教程
Dec 30 #HTML / CSS
html5实现完美兼容各大浏览器的播放器
Dec 26 #HTML / CSS
html5中 media(播放器)的api使用指南
Dec 26 #HTML / CSS
You might like
用PHP产生动态的影像图
2006/10/09 PHP
防止MySQL注入或HTML表单滥用的PHP程序
2009/01/21 PHP
安装ImageMagick出现error while loading shared libraries的解决方法
2014/09/23 PHP
php画图实例
2014/11/05 PHP
Document对象内容集合(比较全)
2010/09/06 Javascript
jQuery Animation实现CSS3动画示例介绍
2013/08/14 Javascript
javascript实现瀑布流自适应遇到的问题及解决方案
2015/01/28 Javascript
jQuery菜单插件superfish使用指南
2015/04/21 Javascript
最实用的jQuery分页插件
2016/10/09 Javascript
浅谈javascript中遇到的字符串对象处理
2016/11/18 Javascript
JavaScript Uploadify文件上传实例
2017/02/28 Javascript
使用grunt合并压缩js和css文件的方法
2017/03/02 Javascript
微信小程序之网络请求简单封装实例详解
2017/06/28 Javascript
浅谈pc端rem字体设置的问题
2017/08/03 Javascript
新手入门带你学习JavaScript引擎运行原理
2019/06/24 Javascript
JS计算斐波拉切代码实例
2019/09/12 Javascript
js实现星星打分效果
2020/07/05 Javascript
[12:51]71泪洒现场!是DOTA2让经典重现
2014/03/24 DOTA
python获取元素在数组中索引号的方法
2015/07/15 Python
Python自定义进程池实例分析【生产者、消费者模型问题】
2016/09/19 Python
Python爬虫之正则表达式的使用教程详解
2018/10/25 Python
django admin.py 外键,反向查询的实例
2019/07/26 Python
django基于cors解决跨域请求问题详解
2019/08/06 Python
Django使用消息提示简单的弹出个对话框实例
2019/11/15 Python
不到20行实现Python代码即可制作精美证件照
2020/04/24 Python
解决pytorch 交叉熵损失输出为负数的问题
2020/07/07 Python
用python批量移动文件
2021/01/14 Python
selenium+超级鹰实现模拟登录12306
2021/01/24 Python
main 函数执行以前,还会执行什么代码
2013/04/17 面试题
大学四年个人的自我评价
2014/02/26 职场文书
食堂厨师岗位职责
2014/08/25 职场文书
秦始皇兵马俑导游词
2015/02/02 职场文书
个人政治思想总结
2015/03/05 职场文书
工作态度检讨书范文
2015/05/06 职场文书
2017新年晚会开幕词
2016/03/03 职场文书
浅析Python OpenCV三种滤镜效果
2022/04/11 Python