HTML5利用canvas画布绘制哆啦A梦

最新推荐文章于 2024-04-03 22:40:57 发布

讲台催眠师明哥

最新推荐文章于 2024-04-03 22:40:57 发布

阅读量892

点赞数 4

文章标签： html5 html 前端有趣的前端案例 css

本文为明哥原创文章，未经本文博主允许不得转载，否则将追究法律责任

本文链接：https://blog.csdn.net/weixin_40845165/article/details/123536988

版权

效果图：

源码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>蓝胖子</title>
    <style>
        canvas {
            display:block;
            margin:0 auto;
        }

    </style>
</head>
<body>
<div><canvas id="canvas"></canvas></div>
<script>
    var oCanvas = document.getElementById("canvas");
    oCanvas.width = 600;
    oCanvas.height = 600;
    var context = oCanvas.getContext("2d");

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

    // 脸
    context.beginPath();
    context.ellipse(300, 380, 200, 170, 0, 0, Math.PI * 2);
    context.stroke();
    context.fillStyle = "white";
    context.fill();

    // 嘴
    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();


    // 眼
    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();
    // 鼻
    context.beginPath();
    context.lineWidth = "3";
    context.arc(300, 290, 30, 0, 2 * Math.PI);
    context.stroke();
    context.fillStyle = "red";
    context.fill();

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


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

讲台催眠师明哥

关注

4
点赞
踩
19

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML5利用canvas画布绘制哆啦A梦

效果图：源码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>蓝胖子</title> <style> canvas { display:block; margin:0 auto; } </style
复制链接

扫一扫