Canvas

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

var c=document.getElementById('myCanvas');//首先找到
    
     对象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 gradientvar grd=ctx.createLinearGradient(0,0,200,0);grd.addColorStop(0,'red');grd.addColorStop(1,'white');//fill with gradientctx.fillStyle=grd;ctx.fillRect(10,10,150,80);ctx.drawImage(img,10,10);//把一幅图像放置在画布上
    

SVG

什么是SVG?

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

实例

SVG与Canvas的区别

MathML

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

实例

    $$
             
      
       
        a
       
       
        2
       
              
      
       +
              
      
       
        b
       
       
        2
       
              
      
       =
              
      
       
        c
       
       
        2
       
          
     
    

HTML5拖放

1. 设置元素为可拖放

   <img draggable="true">

2. 拖动什么-ondragstart和setData()

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

3. 放到何处-ondargover

   ondragover事件规定在何处放置被拖动的数据,默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式event.preventDefault();

4. 进行放置-ondrop

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

   
          
拖动 W3CSchool.cc 图片到矩形框中:
 
    
 
   

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 + "
经度："+position.coords.longitude;}