用canvas画出可爱的哆啦A梦_前端用canvas画一个动漫人物-优快云博客

本文链接：https://blog.youkuaiyun.com/FleshyAPP/article/details/116647477

这篇博客介绍如何利用HTML5的canvas元素通过JavaScript绘制可爱的哆啦A梦。内容包括canvas的基本概念，以及绘制哆啦A梦的步骤，提供了一个简单的代码示例，并在总结中鼓励使用VSCode编辑器。同时，提供了哆啦A梦绘制效果的展示和百度网盘资源链接。

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

用canvas画出可爱的哆啦A梦

本文就介绍了如何用canvas案例画出哆啦A梦的基础内容。

提示：以下是本篇文章正文内容，下面案例可供参考

一、canvas是什么？

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

二、使用步骤

1.哆啦A梦基本代码

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        canvas {
            display: block;
            margin: 0 auto;
            /* background: pink */
        }
    </style>
</head>

<body>
    <canvas id="my_canvas"></canvas>
    <script>
        var oCanvas = document.getElementById("my_canvas");
        oCanvas.width = 600;
        oCanvas.height = 600;
        var context = oCanvas.getContext("2d");
        // document.onclick = function (ev) {
        //     console.log(ev.pageX, ev.pageY)
        // }

        // 1.大脑袋
        context.beginPath();
        context.arc(300, 300, 250, 0, Math.PI * 2);
        context.lineWidth = "5";
        context.stroke();
        context.fillStyle = "rgb(34,118,207)";
        context.fill();

        // 2.大脸蛋子
        // context.scale(1,0.9);
        // context.beginPath();
        // context.arc(300,410,200,0,Math.PI*2);
        // context.lineWidth="5";
        // context.stroke();

        // context.ellipse(x,y,r1,r2,旋转的角度，起始角度，结束角度)
        context.beginPath();
        context.ellipse(300, 380, 200, 170, 0, 0, Math.PI * 2);
        context.stroke();
        context.fillStyle = "white";
        context.fill();

        // 3.大嘴巴子
        context.beginPath();
        context.arc(300, 460, 50, 0, Math.PI * 2);
        context.stroke();
        context.fillStyle = "black";
        context.fill();

        context.beginPath();
        context.ellipse(300, 470, 48, 40, 0, 0, Math.PI * 2);
        context.stroke();
        context.fillStyle = "red";
        context.fill();


        // 4.大眼珠子
        context.beginPath();
        context.ellipse(248, 230, 50, 60, 0, 0, Math.PI * 2);
        context.stroke();
        context.fillStyle = "white";
        context.fill();
        context.beginPath();
        context.ellipse(270, 230, 20, 30, 0, 0, Math.PI * 2);
        context.stroke();
        context.fillStyle = "black";
        context.fill();
        context.beginPath();
        context.ellipse(270, 230, 5, 10, 0, 0, Math.PI * 2);
        context.stroke();
        context.fillStyle = "white";
        context.fill();


        context.beginPath();
        context.ellipse(352, 230, 50, 60, 0, 0, Math.PI * 2);
        context.stroke();
        context.fillStyle = "white";
        context.fill();
        context.beginPath();
        context.ellipse(330, 230, 20, 30, 0, 0, Math.PI * 2);
        context.stroke();
        context.fillStyle = "black";
        context.fill();
        context.beginPath();
        context.ellipse(330, 230, 5, 10, 0, 0, Math.PI * 2);
        context.stroke();
        context.fillStyle = "white";
        context.fill();
        // 5.大鼻子
        context.beginPath();
        context.lineWidth = "3";
        context.arc(300, 290, 30, 0, 2 * Math.PI);
        context.stroke();
        context.fillStyle = "red";
        context.fill();

        // 6.画胡子
        context.lineWidth = "5";
        huzi(125, 294, 230, 335);
        huzi(113, 370, 222, 366);
        huzi(125, 434, 222, 398);
        huzi(376, 335, 465, 282);
        huzi(385, 369, 490, 354);
        huzi(385, 400, 488, 420);


        // 画胡子的方法
        function huzi(x1, y1, x2, y2) {
            context.beginPath();
            context.moveTo(x1, y1);
            context.lineTo(x2, y2);
            context.stroke();
        }
    </script>
</body>

</html>
## 2.读入数据

<font color=#999AAA >代码如下（示例）：



```c
data = pd.read_csv(
    'https://labfile.oss.aliyuncs.com/courses/1283/adult.data.csv')
print(data.head())