新闻玩机教程博客养殖种植PC语言汽车人物风景知识库易经学故事会医药系统AI数据库

HTML<canvas>标签

	作者：CC	今阅(1)	3日(1)	7日(2)
	发表时间:2023-11-06 22:37:46		30日(2)	总阅(21)

文章摘要：

# HTML <canvas> 标签
  
## 实例
通过 <canvas> 元素来显示一个红色的矩形：```htm
<canvas id="myCanvas">
</canvas>
<script type="text/javascript">
 var
canvas=document.getElementById('myCanvas'); var ctx=canvas.getContext('2d');ctx.fillStyle='#FF0000'; ctx.fillRect(0,0,80,100);
</script>```
  
尝试一下 »
***
## 浏览器支持
![Internet Explorer](Wimg/oHCo5o9zyHl1a7PfdikFl8F46c/6de56157646f895dc3df5461415da44e.png)![Firefox](https://www.runoob.com/images/compatible_firefox.gif)![Opera](Wimg/oHCo5o9zyHl1a7PfdikFl8F46c/2fde4bf7adb5ab30bcc93bcca92fc96f.png) ![GoogleChrome](https://www.runoob.com/images/compatible_chrome.gif)![Safari](Wimg/oHCo5o9zyHl1a7PfdikFl8F46c/cb5ba57a8254753663d18a4a0a41dca1.png)
IE 9、Firefox、Opera、Chrome 和 Safari 支持 <canvas> 标签。
**注释：** IE 8 或更早版本的 IE 浏览器不支持 <canvas> 标签。
***
## 标签定义及使用说明
<canvas> 标签通过脚本（通常是 JavaScript）来绘制图形（比如图表和其他图像）。
<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。
***
## HTML 4.01 与 HTML5之间的差异
<canvas> 标签是 HTML5 中的新标签。
***
## 提示和注释
**注释：** <canvas> 元素中的任何文本将会被显示在不支持 <canvas> 的浏览器中。
**提示：** 如想了解 canvas 对象的所有属性和方法，请参阅HTML 画布参考手册。
***
## 属性
New : HTML5 中的新属性。
属性 | 值 | 描述  
---|---|---  
heightNew | _pixels_ | 规定画布的高度。  
widthNew | _pixels_ | 规定画布的宽度。  
  
## 全局属性
<canvas> 标签支持 HTML 的全局属性。
***
## 事件属性
<canvas> 标签支持 HTML 的事件属性。

前一篇:HTML<button>标签后一篇:HTML<caption>标签

豫ICP备16000183号-1