HTML5的画布实例

Han_Zhou_Z

于 2021-11-12 15:24:47 发布

阅读量378

点赞数 1

本文链接：https://blog.csdn.net/Han_Zhou_Z/article/details/121288953

版权

<body>
    <canvas id="cas" width="1000" height="1000">浏览器不支持</canvas>
    <script type="text/javascript">
        var context = document.getElementById('cas').getContext('2d');

        //绘制头部
        context.arc(400,100,30,0,2*Math.PI);
        context.lineWidth = '5';
        context.stroke();

        //绘制躯干
        context.beginPath();
        context.moveTo(400,130);
        context.lineTo(400,140);
        context.lineWidth = '5';
        context.stroke();

        context.beginPath();
        context.moveTo(400,140);
        context.lineTo(400,260);
        context.lineWidth= 25;
        context.stroke();


        //绘制文件夹
        context.beginPath();
        context.moveTo(360,200);
        context.lineTo(440,200);
        context.lineTo(440,250);
        context.lineTo(360,250);
        context.closePath();
        context.fillStyle = 'red';
        context.fill();
        context.lineWidth = '2';
        context.stroke();

        //绘制手臂
        context.beginPath();
        context.moveTo(400,140);
        context.lineTo(400,260);
        context.lineTo(400,240);
        context.lineWidth = '10';
        context.stroke();

        //绘制手掌
        context.beginPath();
        context.arc(400,240,10,0,2*Math.PI);
        context.fillStyle = "#000";
        context.fill();

        //绘制腿部
        context.beginPath();
        context.moveTo(380,400);
        context.lineTo(400,260);
        context.lineTo(420,400);
        context.lineTo(400,240);
        context.lineWidth = '10';
        context.stroke();

        //绘制前脚
        context.beginPath();
        context.arc(365,400,15,0,1*Math.PI,true);
        context.closePath();
        context.lineWidth = '5';
        context.stroke();

        //绘制后脚
        context.beginPath();
        context.arc(405,400,15,0,1*Math.PI,true);
        context.closePath();
        context.lineWidth = '5';
        context.stroke();
    </script>
</body>

Han_Zhou_Z

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML5的画布实例

<body> <canvas id="cas" width="1000" height="1000">浏览器不支持</canvas> <script type="text/javascript"> var context = document.getElementById('cas').getContext('2d'); //绘制头部 context.arc(400,100,30,0,2*Ma.
复制链接

扫一扫