HTML5 -- API学习

1.浏览器的支持

<!--[if lt IE 9]>
  <script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->

2.新元素Canvas(画布)

①基本概念

画布：<canvas width="" height="" id="" style=""></canvas>

画画：使用js进行画画

       var c=document.getElementById("myCanvas");        获取id实例
                  var ctx=c.getContext("2d");       获取画布对象

②矩形

 var c=document.getElementById("myCanvas");
            var ctx=c.getContext("2d");
            ctx.fillStyle="#FF0000";
            ctx.fillRect(0,0,150,75);

           效果：

③圆形

 var c=document.getElementById("myCanvas");
            var ctx=c.getContext("2d");
            ctx.beginPath();
            ctx.arc(50,50,50,0,2*Math.PI);
            ctx.stroke();

            效果：

④线

var c=document.getElementById("myCanvas");
            var ctx=c.getContext("2d");
            ctx.moveTo(0,0);
            ctx.lineTo(170,70);
            ctx.stroke();

            效果：

⑤实心文本

 var c=document.getElementById("myCanvas");
            var ctx=c.getContext("2d");
            ctx.font="30px Arial";
            ctx.fillText("实心文本",0,25);

           效果：

⑥空心文本

 var c=document.getElementById("myCanvas");
            var ctx=c.getContext("2d");
            ctx.font="30px Arial";
            ctx.strokeText("实心文本",0,25);

            效果：

⑦线性渐变

var grd=ctx.createLinearGradient(0,0,100,100);
           grd.addColorStop(0,"red");
           grd.addColorStop(1,"blue");

            效果：

⑧圆形渐变

var grd=ctx.createRadialGradient(75,50,5,90,60,100);
           grd.addColorStop(0,"red");
           grd.addColorStop(1,"blue");

            效果：

⑨画图片

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

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

var img=document.getElementById("scream");

ctx.drawImage(img,10,10);

            效果：

3.拖拽效果

draggable:是否可以拖拽

ondragstart:拖拽时触发的函数

ondragover:拖拽之后触发的函数

ondrop:进行放置

例子：

<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> <p>拖动 RUNOOB.COM 图片到矩形框中:</p> <div id="div1" οndrοp="drop(event)" οndragοver="allowDrop(event)"></div> <br> <img id="drag1" src="/images/logo.png" draggable="true" οndragstart="drag(event)" width="336" height="69">

 

 

 

 

 

 

 

 

 

 

 

4.Input新类型

            

 

 

   其他的使用的时候在查手册