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

绘图标签

svg

SVG 文件可通过以下标签嵌入 HTML 文档：

或者 

。

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

页面中的SVG

一个标题

使用object标签

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

语法：

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

使用iframe标签

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

语法：

canvas

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

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

语法

标签是 HTML 5 中的新标签。

属性值

属性

值

描述

height

pixels

设置 canvas 的高度。

width

pixels

设置 canvas 的宽度。

实例

一个标题

//绘制伞帽

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);

}

时间标签

time

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

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

属性

属性

值

描述

datetime

datetime

定义元素的日期和时间。

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

实例

一个标题

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

时间现在

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

时间现在