使用html5 canvas 绘制Android机器人

来源：互联网发布：淘宝助手怎么上架宝贝编辑：程序博客网时间：2024/06/09 13:58
练习使用Html5 canvas 绘制Android机器人。
要点：当对画布进行变换的时候，需要使用 save() 方法和 restore() 方法，它们应该成对使用，且 restore() 方法不能比 save() 方法多。我们只需要每次在画布变换前使用 save() 方法保存其初始状态，之后使用 restore() 方法恢复到上一次保存的状态即可。
    <!DOCTYPE html>    <html>    <head lang="en">        <meta charset="UTF-8">        <title></title>        <style type="text/css">            * {                margin: 0;                padding: 0;            }            #canvas {                border: 1px solid #000;                margin: 0 auto;                display: block;            }            #show {                position: fixed;                top: 10px;                left: 10px;            }        </style>    </head>    <body>        <canvas width="1000" height="1024" id="canvas" onmousemove="go(event)" onmouseout="out()">            您的浏览器不支持canvas，请升级你的浏览器！        </canvas>        <div id="show"></div>    </body>    <script type="text/javascript">        //获得坐标，便于查找        var show=document.getElementById("show");        document.getElementById("show").innerHTML='ds'        function go(e){            var x=e.clientX;            var y=e.clientY;            document.getElementById("show").innerHTML=x+" "+y;        }        function out(){            show.innerHTML="";        }        //获得canvas对象        var oCanvas = document.getElementById('canvas');        var ctx = oCanvas.getContext('2d');        //头        ctx.beginPath();        ctx.fillStyle = '#99FE00';        ctx.arc(500, 300, 137, Math.PI * (-18 / 180), Math.PI * (-175 / 180), 1);        ctx.fill();        ctx.closePath();        //身子        ctx.beginPath();        ctx.restore();        ctx.fillStyle = '#99FE00';        ctx.save();        ctx.rotate(-7 * Math.PI / 180);        ctx.fillRect(325, 350, 268, 200);        ctx.closePath();        //左眼        ctx.restore();        ctx.beginPath();        ctx.fillStyle = '#fff';        ctx.arc(430, 230, 16, 0, Math.PI * 2, 1);        ctx.fill();        ctx.closePath();        //右眼        ctx.beginPath();        ctx.fillStyle = '#fff';        ctx.arc(535, 220, 16, 0, Math.PI * 2, 1);        ctx.fill();        ctx.closePath();        //左腿        ctx.beginPath();        ctx.fillStyle = '#99FE00';        ctx.fillRect(460, 470, 48, 100);        ctx.closePath();        ctx.beginPath();        ctx.fillStyle = '#99FE00';        ctx.moveTo(483, 562);        ctx.arc(484, 562, 25, Math.PI * (15 / 180), Math.PI * (165 / 180), 0);        ctx.fill();        ctx.closePath();        //右腿        ctx.beginPath();        ctx.fillStyle = '#99FE00';        ctx.fillRect(550, 450, 48, 120);        ctx.closePath();        ctx.beginPath();        ctx.fillStyle = '#99FE00';        ctx.moveTo(573, 562);        ctx.arc(574, 562, 25, Math.PI * (15 / 180), Math.PI * (165 / 180), 0);        ctx.fill();        ctx.closePath();        //左手        ctx.save();        ctx.rotate(55 * Math.PI / 180);        ctx.translate(145, -430);        ctx.beginPath();        ctx.fillStyle = '#99FE00';        ctx.moveTo(340, 355);        ctx.arc(340, 355, 24, 0, Math.PI, 1);        ctx.fill();        ctx.closePath();        ctx.beginPath();        ctx.fillStyle = '#99FE00';        ctx.fillRect(316, 355, 48, 100);        ctx.closePath();        ctx.beginPath();        ctx.fillStyle = '#99FE00';        ctx.moveTo(340, 450);        ctx.arc(340, 450, 24, 0, Math.PI, 0);        ctx.fill();        ctx.closePath();        //右手        ctx.restore();        ctx.save();        ctx.rotate(30 * Math.PI / 180);        ctx.translate(370, -545);        ctx.beginPath();        ctx.fillStyle = '#99FE00';        ctx.moveTo(340, 355);        ctx.arc(340, 355, 24, 0, Math.PI, 1);        ctx.fill();        ctx.closePath();        ctx.beginPath();        ctx.fillStyle = '#99FE00';        ctx.fillRect(316, 355, 48, 100);        ctx.closePath();        ctx.beginPath();        ctx.fillStyle = '#99FE00';        ctx.moveTo(340, 450);        ctx.arc(340, 450, 24, 0, Math.PI, 0);        ctx.fill();        ctx.closePath();        //左触角        ctx.restore();        ctx.beginPath();        ctx.strokeStyle = "#99FE00";        ctx.moveTo(430,190);        ctx.lineTo(390,140);        ctx.lineWidth = 10;        ctx.stroke();        ctx.closePath();        ctx.beginPath();        ctx.fillStyle = '#99FE00';        ctx.arc(390, 140, 5, 0, Math.PI * 2, 1);        ctx.fill();        ctx.closePath();        //左触角        ctx.beginPath();        ctx.strokeStyle = "#99FE00";        ctx.moveTo(530,180);        ctx.lineTo(550,120);        ctx.lineWidth = 10;        ctx.stroke();        ctx.closePath();        ctx.beginPath();        ctx.fillStyle = '#99FE00';        ctx.arc(550, 120, 5, 0, Math.PI * 2, 1);        ctx.fill();        ctx.closePath();        //滑板        ctx.beginPath();        ctx.fillStyle = '#000';        ctx.fillRect(400, 584, 300, 40);        ctx.closePath();        ctx.beginPath();        ctx.fillStyle = '#000';        ctx.arc(400, 604, 20, 0, Math.PI * 2, 1);        ctx.fill();        ctx.closePath();        ctx.beginPath();        ctx.fillStyle = '#000';        ctx.arc(700, 604, 20, 0, Math.PI * 2, 1);        ctx.fill();        ctx.closePath();        //滑板轮        ctx.beginPath();        ctx.fillStyle = '#000';        ctx.arc(450, 658, 20, 0, Math.PI * 2, 1);        ctx.fill();        ctx.closePath();        ctx.beginPath();        ctx.fillStyle = '#000';        ctx.arc(640, 658, 20, 0, Math.PI * 2, 1);        ctx.fill();        ctx.closePath();        //Android渐变文字        ctx.beginPath();        ctx.font = '60px Arial';        var grd=ctx.createLinearGradient(400, 0, 600, 0);        grd.addColorStop(0,"black");        grd.addColorStop(0.3,"magenta");        grd.addColorStop(0.5,"blue");        grd.addColorStop(0.6,"green");        grd.addColorStop(0.8,"yellow");        grd.addColorStop(1,"red");        ctx.fillStyle=grd;        ctx.fillText('Android', 400, 750);        ctx.closePath();    </script>    </html>
下面是代码效果：
这里写图片描述
0 0