<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="html5/js/audio5.min.js" type="application/javascript"></script> <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script> <style> article,aside,dialog,footer,header,section,footer,nav,figure,menu{ display:block} </style></head><body><header>头部</header><footer>底部</footer><article> <audio id="media" src="html5/聪明的一休.mp3" controls></audio> <video src="html5/姐是老中医%20高清.mp4" controls></video> <canvas id="myCanvas" width="1300px" height="1300px" style="border: 1px #F00 solid"></canvas> <canvas id="myCanvas1" width="100px" height="100px" style="border: 1px #F00 solid"></canvas> <canvas id="myCanvas2" width="100px" height="100px" style="border: 1px #F00 solid"></canvas> <img src="img_the_scream.jpg" alt="" id="img1"></article><script> var mCanvas=document.getElementById("myCanvas"); var cxt=mCanvas.getContext("2d"); cxt.fillStyle="#F00"; cxt.strokeStyle="#0F0"; cxt.fillRect(10,10,100,100); cxt.beginPath(); cxt.moveTo(0,0); cxt.lineTo(100,100); cxt.stroke(); cxt.closePath(); cxt.strokeStyle="#F0F"; cxt.beginPath(); cxt.moveTo(100,100); cxt.lineTo(250,309); cxt.closePath(); cxt.stroke(); cxt.font='30px Arial'; cxt.fillText("ＨＥＬＬＯ ＷＯＲＬＤ",130,50,100,100); cxt.strokeText("heelo world",200,200,100,100); cxt.beginPath(); cxt.arc(95,50,40,0,2*Math.PI); cxt.stroke(); cxt.beginPath(); cxt.arc(300,300,100,0,2*Math.PI); cxt.fill(); cxt.beginPath(); cxt.arc(400,400,50,0,Math.PI*1.5); cxt.stroke(); // 线性渐变 var mCanvas1=document.getElementById("myCanvas1"); var cxt1=mCanvas1.getContext("2d"); // var xxjb1=cxt1.createLinearGradient(0,0,0,100); // createRadialGradient 径向渐变 var xxjb1=cxt1.createRadialGradient(0,0,50,100,100,50); xxjb1.addColorStop(0,"#F00"); xxjb1.addColorStop(1,"#0F0"); cxt1.fillStyle=xxjb1; cxt1.strokeStyle=xxjb1; cxt1.fillRect(0,0,100,100); var myCavas=document.getElementById("myCanvas2"); var cxt2=myCavas.getContext("2d"); cxt2.drawImage(document.getElementById("img1"),0,0); </script></body></html>
画布的平移缩放旋转
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 100px; padding: 0px; } </style></head><body onload="darw()"><canvas id="myCanvas" width="600px" height="600px" style="border: #F00 1px solid"></canvas><button onclick="canvasTranslate()">平移</button><button onclick="canvasScale()">缩放</button><button onclick="canvasRotate()">旋转</button><script> var myCanvas=document.getElementById("myCanvas"); var context = myCanvas.getContext("2d"); function darw(){ context.arc(150,150,10,0,Math.PI*2,true); context.fill() } function canvasTranslate(){ context.translate(20,20); darw(); } function canvasScale(){ context.scale(1/2,2); darw(); } function darwLine(){ context.moveTo(560,80); context.lineTo(590,90); context.stroke() } function canvasRotate(){ context.rotate(Math.PI/180*5); darwLine(); } </script></body></html>
雨点打透心脏的1/2处
我会带着你远行
╰+攻爆jí腚メ
还没有评论，来说两句吧...