canvas - 做一个有趣的妞儿

链接：https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes

<html>

<head>
    <title>Canvas tutorial</title>
    <script type="text/javascript">
        function draw() {
            var canvas = document.getElementById('canvas');
            if (canvas.getContext) {
                var ctx = canvas.getContext('2d');
                // 开始
                ctx.beginPath();
                // 圆
                ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // 绘制
                // 移动笔触到
                ctx.moveTo(110, 75);
                ctx.arc(75, 75, 35, 0, Math.PI, false);   // 口(顺时针)
                ctx.moveTo(65, 65);
                ctx.arc(60, 65, 5, 0, Math.PI * 2, true);  // 左眼
                ctx.moveTo(95, 65);
                ctx.arc(90, 65, 5, 0, Math.PI * 2, true);  // 右眼
                // 通过线条来绘制图形轮廓
                ctx.stroke();

                // 填充三角形
                ctx.beginPath();
                ctx.moveTo(25, 25);
                ctx.lineTo(105, 25);
                ctx.lineTo(25, 105);
                ctx.fill();

                // 描边三角形
                ctx.beginPath();
                ctx.moveTo(125, 125);
                ctx.lineTo(125, 45);
                ctx.lineTo(45, 125);
                ctx.closePath();
                ctx.stroke();

                
            }
        }
    </script>
    <style type="text/css">
        canvas {
            border: 1px solid black;
        }
    </style>
</head>

<body onload="draw();">
    <canvas id="canvas" width="150" height="150"></canvas>
</body>

</html>

posted on 2020-09-21 12:47 做一个有趣的妞儿阅读(177) 评论(0) 收藏举报