HTML最新标准HTML5总结(必看)

2020-04-25 08:07:43易采站长站整理

HTML5 Canvas & SVG

画布Canvas

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

XML/HTML Code复制内容到剪贴板

<canvas id="myCanvas" width="200" height="100" style="border:1px sopd #c3c3c3;">  

Your browser does not support the canvas element.   

</canvas>  

<script type="text/javascript">  

var c=document.getElementById("myCanvas");   

var ccxt=c.getContext("2d");   

cxt.moveTo(10,10);   

cxt.pneTo(150,50);   

cxt.pneTo(10,50);   

cxt.stroke();   

</script>  

如下,为效果图:

可伸缩矢量图形 (Scalable Vector Graphics)

XML/HTML Code复制内容到剪贴板

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">  

   <polygon points="100,10 40,180 190,60 10,60 160,180"  

   style="fill:red;stroke:blue;stroke-width:3;fill-rule:evenodd;" />  

</svg>  

Canvas & SVG 的常见应用

使用canvas和SVG可以实现很多小应用,特别是canvas,如下图例子:

HTML5 可编辑内容 & 拖放

Contenteditable全局属性

Contenteditable可用于实现网页编辑器,当前很多网页编辑器都用这个属性实现,如下图:

Drag 和 drop

HTML5 的拖放将会把与用户交互带向另一个等级,并将会对如何设计用户交互产生重大影响。

主要的事件函数:Ondragstart()、Ondragover()、Ondrop();

如下为一个代码示例,将一个p拖放到另一个p里:

JavaScript Code复制内容到剪贴板

<script type="text/javascript">   

function allowDrop(ev)