HTML5 canvas

来源：互联网发布：单片机开发板工作原理编辑：程序博客网时间：2024/06/03 23:00

<!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>

0 0