html5整理（二）

Canvas

上一章简单介绍了canvas，在这里展示一下其他的例子

var c=document.getElementById('myCanvas');//首先找到<canvas>对象
var ctx=c.getContext('2d');//然后创建contex对象
ctx.fillStyle="ff0000";
ctx.fillRect(0, 0, 150, 75);//绘制红色矩形

ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();//绘制线条

ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();//绘制圆形

ctx.font="30px Arial";
ctx.fillText('Hello World',10,50);//绘制实心文本
ctx.strokeText('Hello World',10,50);//绘制空心文本

//create gradient
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,'red');
grd.addColorStop(1,'white');

//fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

ctx.drawImage(img,10,10);//把一幅图像放置在画布上

SVG

什么是SVG?

SVG指可伸缩矢量图形、用于定义用于网络的基于矢量的图形、使用XML格式定义图形、SVG图像在放大或改变尺寸的情况下其图形质量不会有损失、SVG是万维网联盟的标准
SVG图像可被搜索、索引、脚本化或压缩

实例

<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:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
</svg>

SVG与Canvas的区别

MathML

MathML是数学标记语言，是一种基于XML的标准，用来在互联网上书写数学符号和公式的置标语言

实例

<math xmlns="http://www.w3.org/1998/Math/MathML">
    <mrow>
        <msup><mi>a</mi><mn>2</mn></msup>
        <mo>+</mo>
        <msup><mi>b</mi><mn>2</mn></msup>
        <mo>=</mo>
        <msup><mi>c</mi><mn>2</mn></msup>
    </mrow>
</math>

HTML5拖放

设置元素为可拖放
<img draggable="true">
拖动什么-ondragstart和setData()
function drag(ev){ev.dataTransfer.setData("Text",ev.targer.id);}
放到何处-ondargover
ondragover事件规定在何处放置被拖动的数据,默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式event.preventDefault();
进行放置-ondrop

function drop(ev){
    ev.preventDefault();
    var data = ev.dataTransfer.getData('Text');
    ev.target.appendChild(document.getElementById(data));
}

<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style type="text/css"> 
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;} 
</style> 
<script> 
function allowDrop(ev) 
{ 
    ev.preventDefault(); 
} 

function drag(ev) 
{ 
    ev.dataTransfer.setData("Text",ev.target.id); 
} 

function drop(ev) 
{ 
    ev.preventDefault(); 
    var data=ev.dataTransfer.getData("Text"); 
    ev.target.appendChild(document.getElementById(data)); 
} 
</script> 
</head> 
<body> 

<p>拖动 W3CSchool.cc 图片到矩形框中:</p> 

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 
<br> 
<img id="drag1" src="/images/logo.png" draggable="true" ondragstart="drag(event)" width="336" height="69"> 

</body> 
</html>

HTML5 Geolocation（地理定位）

getCurrentPosition()获得用户的位置

var x=document.getElementById('demo');
function getLocation(){
    if(navigator.geolocation){
        navigator.geolocation.getCurrentPosition(showPosition);
     }else{
         x.innerHTML="该浏览器不支持获取地理位置";
     }
}
function showPosition(position){
    x.innerHTML="纬度："+position.coords.latitude + "<br>经度："+position.coords.longitude;
}