用canvas画出可爱的哆啦A梦

用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())

该处使用的工具为vscode。

---

总结

提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了canvas的使用，主要用canvas画了一个哆啦A梦。@用canvas画哆啦A梦

欢迎使用vscode编辑器

vscode官方下载地址：https://code.visualstudio.com/

显示效果图片

总结： 绘制哆啦A梦的头部其实很简单，只需要知道人如何绘制圆形和线条即可，同时要知道图层的前后顺序。

百度网盘链接：
链接：https://pan.baidu.com/s/1G5-DfS7Iuf7gUN4U0ZXSow
提取码：0987
复制这段内容后打开百度网盘手机App，操作更方便哦