教你如何用Canvas绘制整身的哆啦A梦_用canvas画哆啦a梦-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_39155611/article/details/106745183

本文介绍如何利用HTML Canvas元素，结合JavaScript来绘制哆啦A梦的全身图像，重点在于画圆方法的运用和角度控制，以实现头部、口袋及脚部的精确描绘。

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

教你如何用Canvas绘制整身的哆啦A梦

上牌你文章我们说到了如何使用canvas绘制哆啦A梦，但当时只是绘制了哆啦A梦的头部，之后有学员留言说可不可以教大家绘制整身的哆啦A梦，想了想，决定安排一下。如图：

在这里插入图片描述

HTML代码：

    <canvas id="my_canvas"></canvas>
    <canvas id="my_canvas2"></canvas>

CSS代码：

        * {
   
            margin: 0;
        }

        #my_canvas {
   
            /* display: block;
            margin: 0 auto; */
            background: pink;
        }

        #my_canvas2 {
   
            background: skyblue;
        }

JS代码：

    var oCanvas = document.getElementById("my_canvas");
    oCanvas.width = 680;
    oCanvas.height = 840;
    var context = oCanvas.getContext("2d");
    // 1.大脑袋
    context.beginPath();
    context.arc(340, 260, 230, Math.PI / 3, Math.PI / 3 * 2, true);
    context.lineWidth = "8";
    context.closePath();
    context.stroke();

    context.fillStyle = "rgb(34,118,207)";
    context.fill();

    // 2.大脸蛋子

    // context.ellipse(x,y,r1,r2,旋转的角度，起始角度，结束角度)
    context.beginPath();
    context.lineWidth = "8";
    context.ellipse(340, 310, 200, 180, 0, Math.PI / 4, Math.PI / 4 * 3, true);
    context.stroke();
    context.fillStyle = "white";
    context.fill();

    // 3.大嘴巴子
    context.beginPath();
    context.lineWidth = "5";
    context.moveTo(340, 245);
    context.lineTo(340, 405);
    context.stroke();
    context.fillStyle = "black";
    context.fill();
    context.beginPath();
    context.ellipse(340, 215, 200, 190, 0, Math.PI / 4, Math.PI / 4 * 3, );
    context.stroke();


    // 4.大眼珠子
    // 左眼
    context.beginPath();
    context.lineWidth = "8";
    context.ellipse(288, 160, 50, 60, 0, 0, Math.PI * 2);
    context.stroke();
    context.fillStyle = "white";
    context.fill();
    context.beginPath();
    context.arc(295, 190, 20, 0, -Math.PI, true);
    context.stroke();


    // 右眼
    context.beginPath();
    context.ellipse(392, 160, 50, 60, 0, 0, Math.PI * 2);
    context.stroke();
    context.fillStyle = "white";
    context.fill();
    context.beginPath();
    context.arc(385, 190, 20, 0, -Math.PI, true);
    context.stroke();

    // 5.大鼻子
    context.beginPath();
    context.lineWidth = "8";
    context.arc(340, 235, 30, 0, 2 * Math.PI);
    context.stroke();
    context.fillStyle = "red";
    context.fill();

    // 6.画胡子
    context.lineWidth = "5";
    huzi(165, 224, 270, 265);
    huzi(153, 280, 262, 280);
    huzi(165, 320, 262, 300);
    huzi(416, 265, 515, 224);
    huzi(425, 280, 530, 280);
    huzi(425, 300