HTML5常用标签（2-5）绘图及时间标签

栏目: Html5 · 发布时间: 7年前

内容简介：绘图标签svgSVG 文件可通过以下标签嵌入 HTML 文档：

绘图标签

svg

SVG 文件可通过以下标签嵌入 HTML 文档： <object> 或者 <iframe> 。

SVG的代码可以直接嵌入到HTML页面中，或可以直接链接到SVG文件。

页面中的SVG

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>一个标题</title>
</head>
<body>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <circle cx="66" cy="50" r="40" stroke="black" stroke-width="2" fill="green" />
    </svg>
</body>
</html>

使用object标签

<object> 标签是 HTML 4 的标准标签，被所有较新的浏览器支持。它的缺点是不允许使用脚本。

语法：

<object data="fishc.svg" type="image/svg+xml"></object>

codebase 属性指向下载插件的 URL。

使用iframe标签

<iframe> 标签可工作在大部分的浏览器中。

语法：

<iframe src="rect.svg" width="300" height="100"></iframe>

canvas

<canvas> 标签定义图形，比如图表和其他图像。

<canvas> 标签只是图形容器，必须使用脚本来绘制图形。

语法

<canvas> 标签是 HTML 5 中的新标签。

属性值

属性	值	描述
height	pixels	设置 canvas 的高度。
width	pixels	设置 canvas 的宽度。

实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>一个标题</title>
</head>
<body>
    <canvas id="myCanvas" width="333" height="333"></canvas>
    <script type="text/javascript">
        //绘制伞帽
        function drawTop(ctx, fillStyle){
      ctx.fillStyle = fillStyle;
      ctx.beginPath();
      ctx.arc(0, 0, 30, 0,Math.PI,true);
      ctx.closePath();
      ctx.fill();
      }
        //绘制手柄
        function drawGrip(ctx){
      ctx.save();
      ctx.fillStyle = "cyan";//伞柄色
      ctx.fillRect(-1.5, 0, 1.5, 40);
      ctx.beginPath();
      ctx.strokeStyle="cyan";//伞柄下弧
      ctx.arc(2.5, 40, 4, Math.PI,0,true);
      ctx.stroke();
      ctx.closePath();
      ctx.restore();
      }
        //绘制
        function draw(){
        var ctx = document.getElementById('myCanvas').getContext("2d");
        //canvas,画布50，50坐标处
      ctx.translate(50,50);
      drawTop(ctx,"rgb(255,123,345)");
      drawGrip(ctx);
      }
    </script>
    <input type="button" value="开始绘制" onclick="draw()"/>
</body>
</html>

时间标签

time

<time> 标签用于定义日期或时间。

在任何主要浏览器中，time元素都不会呈现任何特殊内容。

属性

属性	值	描述
datetime	datetime	定义元素的日期和时间。如果未定义该属性，则必须在元素的内容中规定日期或时间。

实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>一个标题</title>
</head>
<body>
    <p>每天<time>00:00-08:00</time>进入机器职守高防状态</p>
    <p>时间<time datetime="2018-12-05">现在</time></p>
</body>
</html>

每天00:00-08:00进入机器职守高防状态

时间现在

以上所述就是小编给大家介绍的《HTML5常用标签（2-5）绘图及时间标签》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对码农网的支持！

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

计算机组成（第 6 版）

Andrew S. Tanenbaum、Todd Austin / 刘卫东、宋佳兴 / 机械工业出版社 / 2014-8-19 / CNY 99.00

本书采用结构化方法来介绍计算机系统，书的内容完全建立在“计算机是由层次结构组成的，每层完成规定的功能”这一概念之上。作者对本版进行了彻底的更新，以反映当今最重要的计算机技术以及计算机组成和体系结构方面的最新进展。书中详细讨论了数字逻辑层、微体系结构层、指令系统层、操作系统层和汇编语言层，并涵盖了并行体系结构的内容，而且每一章结尾都配有丰富的习题。本书适合作为计算机专业本科生计算机组成与结构课程的教......一起来看看《计算机组成（第 6 版）》这本书的介绍吧!

码农工具