老师，看一下

来源：3-11 编程练习

陈子长

2018-11-21 15:52:51

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    canvas {
        border: 1px solid red;
        background: #add8e6;
    }
</style>
<body>
    <canvas id="myCanvas" width="350" height="415">
        浏览器不支持
    </canvas>
    <script>
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.strokeStyle='transparent';
        // face
        context.strokeRect(120, 96, 100, 70);       
        context.fillStyle='#ffdab9';
        context.fillRect(120, 96, 100, 70);
        // ear
        context.strokeRect(107, 110, 13, 26);
        context.strokeRect(220, 110, 13, 26);
        context.fillStyle='yellow';
        context.fillRect(107, 110, 13, 26);
        context.fillRect(220, 110, 13, 26);
        // mouse
        context.strokeRect(154, 142, 35, 15);
        context.fillStyle='red';
        context.fillRect(154, 142, 35, 15);
        // body
        context.strokeRect(135, 166, 70, 103);
        context.fillStyle='#ffb6c1';
        context.fillRect(135, 166, 70, 103);
        // arm
        context.strokeRect(35, 200, 100, 14);
        context.strokeRect(205, 200, 100, 14);
        context.fillStyle='#20b2aa';
        context.fillRect(35, 200, 100, 14);
        context.fillRect(205, 200, 100, 14);
        // leg
        context.strokeRect(150, 269, 14, 105);
        context.strokeRect(175, 269, 14, 105);
        context.fillStyle='#20b2aa';
        context.fillRect(150, 269, 14, 105);
        context.fillRect(175, 269, 14, 105);

        // eye
        context.beginPath();
        context.arc(150, 125, 7, 0, Math.PI*2, true);
        context.fillStyle='black';
        context.fill();
        context.beginPath();
        context.arc(195, 125, 7, 0, Math.PI*2, true);
        context.fillStyle='black';
        context.fill();
        // line
        context.beginPath();
        context.moveTo(120, 27);
        context.lineTo(155, 96);
        context.lineWidth=4;
        context.strokeStyle='orange';
        context.stroke();

        context.beginPath();
        context.moveTo(190, 96);
        context.lineTo(224, 27);
        context.lineWidth=4;
        context.strokeStyle='orange';
        context.stroke();
    </script>
</body>
</html>

写回答

1回答