麻烦老师检查，谢谢

来源：3-8 编程练习

qq_慕移动3101913

2020-02-27 22:39:03

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
    <style>
        canvas{background-color:lightblue;}
    </style>
</head>
<body>
    <canvas id="canvas" width="800" height="800">
        您的浏览器不支持canvas
    </canvas>
    
    <script>
        //获取元素
        var canvas = document.getElementById('canvas');
        var ctx = canvas.getContext('2d');

        //左毛
        ctx.moveTo(270,50);
        ctx.lineTo(350,180);
        ctx.stroke();
        //右毛
        ctx.beginPath();    //清除之前的路径，重新开始新的路径
        ctx.moveTo(520,50);
        ctx.lineTo(430,180);
        ctx.stroke();
        //头
        ctx.beginPath();
        ctx.strokeRect(270,180,240,140);
        //左耳朵
        ctx.beginPath();
        ctx.strokeRect(240,220,30,50);
        //右耳朵
        ctx.beginPath();
        ctx.strokeRect(510,220,30,50);
        //左眼睛
        ctx.beginPath();
        ctx.arc(330,230,20,0,2*Math.PI,true);
        ctx.stroke();
        // //右眼睛
        ctx.beginPath();
        ctx.arc(450,230,20,0,2*Math.PI,true);
        ctx.stroke();
        //嘴巴
        ctx.beginPath();
        ctx.strokeRect(350,270,80,30);
        //身体
        ctx.beginPath();
        ctx.strokeRect(310,320,160,200);
        //左手
        ctx.beginPath();
        ctx.strokeRect(70,380,240,30);
        //右手
        ctx.beginPath();
        ctx.strokeRect(470,380,240,30);
        //左腿
        ctx.beginPath();
        ctx.strokeRect(340,520,35,200);
        //右腿
        ctx.beginPath();
        ctx.strokeRect(410,520,35,200);
    </script>
</body>

</html>

写回答

1回答