老版地址(仅作固定作用):old.jincong.net

HTML页面中添加Canvas标签示例

在HTML页面的&l;body&g;中,可以用像下面的代码来添加&l;cava&g;标签:复制代码代码如下:&l;cavaid=&quo;cavaOe&quo;widh=&quo;500&quo;heigh=&quo;300&quo;&g;YoubowedoeouppoHTML5Cava.&l;/cava&g;译注:对于cava,以下......
以下是【金聪采编】分享的内容全文:

在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页面中添加Canvas标签示例 ] 仅为会员分享交流,仅供学习、参考使用,请勿用于其他用途,如果想商业使用或者代理,请自行联系版权方获取授权。任何未获取授权的商业使用与本站无关,请自行承担相应责任。
本站不存储任何资源文件,敬请周知!
此资源仅供个人学习、研究使用,禁止非法转播或商业用途,请在获取后24小时内删除,如果你觉得满意,请寻求购买正版或获取授权!
免责申明:本站仅提供学习的平台,所有资料均来自于网络分享线索,版权归原创者所有!本站不提供任何保证,并不承担任何法律责任,如果对您的版权或者利益造成损害,请提供相应的资质证明,我们将于3个工作日内予以处理。版权申诉相关说明
本网站采用 BY-NC-SA 协议进行授权 转载请注明原文链接:HTML页面中添加Canvas标签示例
221381
领取福利

微信扫码领取福利

微信扫码分享