标签：canvas PI fillStyle 画布 stroke context beginPath 绘制 Math

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

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

HTML代码：

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

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/

标签：canvas,PI,fillStyle,画布,stroke,context,beginPath,绘制,Math
来源： https://blog.csdn.net/qq_39155611/article/details/106701766

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。