教你如何利用canvas画布绘制哆啦A梦

爱被打了一巴掌 2023-02-17 03:43 12阅读 0赞

## 教你如何利用canvas画布绘制哆啦A梦 ##

最近一直在练习使用canvas画布标签，今天教大家如何使用canvas画布绘制哆啦A梦。如图：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTU1NjEx_size_16_color_FFFFFF_t_70_pic_center]

**HTML代码：**

**CSS代码：**

canvas { 
                display:block;
                margin:0 auto;
                background: pink
            }

**JavaScript代码：**

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();
        }

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

**视频讲解链接：  
https://www.bilibili.com/video/BV1454y1Q7Aq/**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTU1NjEx_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20200612013745694.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTU1NjEx,size_16,color_FFFFFF,t_70#pic_center