canvas小练习之火柴人

ArmadaDK

已于 2023-04-26 14:49:05 修改

阅读量461

点赞数

分类专栏： web技术前端vue 文章标签： javascript java 前端

于 2023-04-26 14:48:17 首次发布

本文链接：https://blog.csdn.net/ArmadaDK/article/details/130386011

版权

web技术同时被 2 个专栏收录

28 篇文章

订阅专栏

前端vue

17 篇文章

订阅专栏

该代码示例展示了如何使用HTML5的canvas元素和JavaScript来绘制一个简单的火柴人图形，包括火柴人的身体和剑。通过beginPath、arc、lineTo等方法，实现了图形的路径创建和填充，以及颜色和边框的设定。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>canvas</title>
    <style type="text/css">
        #canvas {
            width: 100%;
            height: 100%;
            /* color: ; */
        }
    </style>

</head>

<body>
    <canvas id="canvas" width="1000" height="500">
        
    </canvas>
</body>
<script>
    var mycanvas = document.getElementById('canvas');
    var ctx = mycanvas.getContext("2d");
    // let id = 1
    ctx.beginPath();
    ctx.arc(250,100,50,0,2*Math.PI)
    ctx.moveTo(250,150);
    ctx.lineTo(250,300);
    ctx.moveTo(250,180);
    ctx.lineTo(100,300);
    ctx.moveTo(250,180);
    ctx.lineTo(400,300);
    ctx.moveTo(250,300);
    ctx.lineTo(120,600);
    ctx.moveTo(250,300);
    ctx.lineTo(380,600);
    ctx.closePath();
    ctx.fill();
    ctx.strokeStyle = "#000000";
    ctx.stroke();
    // 剑
    ctx.beginPath();
    ctx.moveTo(400,300);
    ctx.lineTo(600,100);
    
    ctx.closePath();
    ctx.strokeStyle = "#cccccc"
    ctx.stroke()
    // 剑柄
    ctx.beginPath();
    ctx.moveTo(400,300);
    ctx.lineTo(380,280);
    ctx.lineTo(420,320);
    ctx.moveTo(400,300);
    ctx.lineTo(360,340);
    ctx.closePath();
    ctx.strokeStyle = "#666666"
    ctx.stroke();

</script>
</html>