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新类型
其他的使用的时候在查手册