教你如何用Canvas绘制整身的哆啦A梦

喜欢ヅ旅行 2023-02-17 13:29 129阅读 0赞

教你如何用Canvas绘制整身的哆啦A梦

上牌你文章我们说到了如何使用canvas绘制哆啦A梦，但当时只是绘制了哆啦A梦的头部，之后有学员留言说可不可以教大家绘制整身的哆啦A梦，想了想，决定安排一下。如图：

在这里插入图片描述

HTML代码：

  1. <canvas id="my_canvas"></canvas>
  2.     <canvas id="my_canvas2"></canvas>

CSS代码：

  1. * { 
  2.             margin: 0;
  3.         }
  5.         #my_canvas { 
  6.             /* display: block; margin: 0 auto; */
  7.             background: pink;
  8.         }
  10.         #my_canvas2 { 
  11.             background: skyblue;
  12.         }

JS代码：

  1. var oCanvas = document.getElementById("my_canvas");
  2.     oCanvas.width = 680;
  3.     oCanvas.height = 840;
  4.     var context = oCanvas.getContext("2d");
  5.     // 1.大脑袋
  6.     context.beginPath();
  7.     context.arc(340, 260, 230, Math.PI / 3, Math.PI / 3 * 2, true);
  8.     context.lineWidth = "8";
  9.     context.closePath();
  10.     context.stroke();
  12.     context.fillStyle = "rgb(34,118,207)";
  13.     context.fill();
  15.     // 2.大脸蛋子
  17.     // context.ellipse(x,y,r1,r2,旋转的角度，起始角度，结束角度)
  18.     context.beginPath();
  19.     context.lineWidth = "8";
  20.     context.ellipse(340, 310, 200, 180, 0, Math.PI / 4, Math.PI / 4 * 3, true);
  21.     context.stroke();
  22.     context.fillStyle = "white";
  23.     context.fill();
  25.     // 3.大嘴巴子
  26.     context.beginPath();
  27.     context.lineWidth = "5";
  28.     context.moveTo(340, 245);
  29.     context.lineTo(340, 405);
  30.     context.stroke();
  31.     context.fillStyle = "black";
  32.     context.fill();
  33.     context.beginPath();
  34.     context.ellipse(340, 215, 200, 190, 0, Math.PI / 4, Math.PI / 4 * 3, );
  35.     context.stroke();
  38.     // 4.大眼珠子
  39.     // 左眼
  40.     context.beginPath();
  41.     context.lineWidth = "8";
  42.     context.ellipse(288, 160, 50, 60, 0, 0, Math.PI * 2);
  43.     context.stroke();
  44.     context.fillStyle = "white";
  45.     context.fill();
  46.     context.beginPath();
  47.     context.arc(295, 190, 20, 0, -Math.PI, true);
  48.     context.stroke();
  51.     // 右眼
  52.     context.beginPath();
  53.     context.ellipse(392, 160, 50, 60, 0, 0, Math.PI * 2);
  54.     context.stroke();
  55.     context.fillStyle = "white";
  56.     context.fill();
  57.     context.beginPath();
  58.     context.arc(385, 190, 20, 0, -Math.PI, true);
  59.     context.stroke();
  61.     // 5.大鼻子
  62.     context.beginPath();
  63.     context.lineWidth = "8";
  64.     context.arc(340, 235, 30, 0, 2 * Math.PI);
  65.     context.stroke();
  66.     context.fillStyle = "red";
  67.     context.fill();
  69.     // 6.画胡子
  70.     context.lineWidth = "5";
  71.     huzi(165, 224, 270, 265);
  72.     huzi(153, 280, 262, 280);
  73.     huzi(165, 320, 262, 300);
  74.     huzi(416, 265, 515, 224);
  75.     huzi(425, 280, 530, 280);
  76.     huzi(425, 300, 522, 320);
  79.     // 画胡子 函数
  80.     function huzi(x1, y1, x2, y2) { 
  81.         context.beginPath();
  82.         context.moveTo(x1, y1);
  83.         context.lineTo(x2, y2);
  84.         context.stroke();
  85.     }
  87.     // 胳膊
  88.     // 左臂
  89.     context.save();
  90.     context.beginPath();
  91.     context.moveTo(190, 439);
  92.     context.lineTo(80, 504);
  93.     context.lineTo(110, 562);
  94.     context.lineTo(180, 531);
  95.     context.lineTo(180, 500);
  96.     context.lineTo(180, 760);
  97.     context.lineTo(320, 760);
  98.     // 裆
  99.     context.arcTo(320, 750, 340, 720, 20);
  100.     context.arcTo(360, 720, 360, 750, 20);
  101.     context.lineTo(360, 760);
  102.     context.lineTo(500, 760);
  103.     context.lineTo(500, 500);
  104.     context.lineTo(500, 531);
  105.     context.lineTo(570, 562);
  106.     context.lineTo(600, 504);
  107.     context.lineTo(490, 439);
  108.     context.stroke();
  109.     context.closePath();
  110.     context.fillStyle = "rgb(12,162,231)";
  111.     context.fill();
  112.     context.stroke();
  113.     // 左拳
  114.     context.beginPath();
  115.     context.lineWidth = "8";
  116.     context.arc(70, 545, 45, 0, Math.PI * 2);
  117.     context.stroke();
  118.     context.fillStyle = "white";
  119.     context.fill();
  122.     // 右拳
  123.     context.beginPath();
  124.     context.lineWidth = "8";
  125.     context.arc(610, 545, 45, 0, Math.PI * 2);
  126.     context.stroke();
  127.     context.fillStyle = "white";
  128.     context.fill();
  131.     // 脚
  132.     // 左脚
  133.     context.save();
  134.     context.beginPath();
  135.     context.lineWidth = "8";
  136.     context.moveTo(180, 760);
  137.     context.lineTo(315, 760);
  138.     context.arc(315, 780, 20, -Math.PI / 2, Math.PI / 2);
  139.     context.lineTo(180, 800);
  140.     context.arc(180, 780, 20, -Math.PI / 2, Math.PI / 2, true);
  141.     context.fillStyle = "white";
  142.     context.lineCap = "round";
  143.     context.stroke();
  144.     context.fill();
  145.     context.restore();
  147.     // 右脚
  148.     context.save();
  149.     context.beginPath();
  150.     context.lineWidth = "8";
  151.     context.moveTo(500, 760);
  152.     context.lineTo(365, 760);
  153.     context.arc(365, 780, 20, -Math.PI / 2, Math.PI / 2, true);
  154.     context.lineTo(500, 800);
  155.     context.arc(500, 780, 20, -Math.PI / 2, Math.PI / 2);
  156.     context.fillStyle = "white";
  157.     context.lineCap = "round";
  158.     context.stroke();
  159.     context.fill();
  160.     context.restore();
  162.     // 肚子
  163.     context.beginPath();
  164.     context.lineWidth = "8";
  165.     context.arc(340, 550, 130, -Math.PI / 4, -Math.PI / 4 * 3);
  166.     context.closePath();
  167.     context.stroke();
  168.     context.fillStyle = "white";
  169.     context.fill();
  171.     context.beginPath();
  172.     context.arc(340, 550, 100, 0, -Math.PI);
  173.     context.closePath();
  174.     context.stroke();
  175.     context.fillStyle = "white";
  176.     context.fill();
  178.     // 领带
  179.     context.save();
  180.     context.beginPath();
  181.     context.lineWidth = "8";
  182.     context.moveTo(190, 430);
  183.     context.lineTo(490, 430);
  184.     context.arc(490, 450, 20, -Math.PI / 2, Math.PI / 2);
  185.     context.lineTo(190, 470);
  186.     context.arc(190, 450, 20, -Math.PI / 2, Math.PI / 2, true);
  187.     context.fillStyle = "red";
  188.     context.lineCap = "round";
  189.     context.stroke();
  190.     context.fill();
  191.     context.restore();
  193.     // 铃铛
  194.     context.beginPath();
  195.     context.arc(340, 470, 30, 0, Math.PI * 2);
  196.     context.stroke();
  197.     context.fillStyle = "yellow";
  198.     context.fill();
  200.     context.beginPath();
  201.     context.lineWidth = "5";
  202.     context.moveTo(312, 455);
  203.     context.lineTo(368, 455);
  204.     context.stroke();
  205.     context.beginPath();
  206.     context.moveTo(310, 462);
  207.     context.lineTo(370, 462);
  208.     context.stroke();
  209.     context.beginPath();
  210.     context.arc(340, 475, 5, 0, Math.PI * 2);
  211.     context.stroke();
  212.     context.fillStyle = "black";
  213.     context.fill();
  214.     context.beginPath();
  215.     context.moveTo(340, 480);
  216.     context.lineTo(340, 500);
  217.     context.stroke();
  219.     var oCanvas2 = document.getElementById("my_canvas2");
  220.     oCanvas2.width = 680;
  221.     oCanvas2.height = 840;
  222.     var context2 = oCanvas2.getContext("2d");
  224.     // 1.头
  225.     context2.beginPath();
  226.     context2.lineWidth = "8";
  227.     context2.arc(340, 260, 230, Math.PI / 3, Math.PI / 3 * 2, true);
  228.     context2.closePath();
  229.     context2.stroke();
  230.     context2.fillStyle = "yellow";
  231.     context2.fill();
  233.     // 2.脸 画椭圆
  234.     context2.beginPath();
  235.     context2.ellipse(340, 310, 200, 180, 0, Math.PI / 4, Math.PI / 4 * 3, true);
  236.     context2.closePath();
  237.     context2.stroke();
  238.     context2.fillStyle = "white";
  239.     context2.fill();
  241.     // 3.眼睛
  242.     // 左眼
  243.     context2.beginPath();
  244.     context2.ellipse(288,160,50,60,0,0,Math.PI*2);
  245.     context2.stroke();
  246.     context2.fillStyle="white";
  247.     context2.fill();
  248.     context2.beginPath();
  249.     context2.arc(295,190,20,0,Math.PI,true);
  250.     context2.stroke();
  251.     // 右眼
  252.     context2.beginPath();
  253.     context2.ellipse(392,160,50,60,0,0,Math.PI*2);
  254.     context2.stroke();
  255.     context2.fillStyle="white";
  256.     context2.fill();
  257.     context2.beginPath();
  258.     context2.arc(385,190,20,0,Math.PI,true);
  259.     context2.stroke();
  261.     // 4.鼻子
  262.     context2.beginPath();
  263.     context2.arc(340,235,30,0,Math.PI*2);
  264.     context2.stroke();
  265.     context2.fillStyle="red";
  266.     context2.fill();
  268.     // 5.嘴巴
  269.     context2.beginPath();
  270.     context2.lineWidth="5";
  271.     context2.moveTo(340,265);
  272.     context2.lineTo(340,405);
  273.     context2.stroke();
  274.     context2.beginPath();
  275.     context2.ellipse(340,215,200,190,0,Math.PI/4,Math.PI/4*3);
  276.     context2.stroke();
  278.     // 6.胡子
  279.     context2.lineWidth="5";
  280.     huzi2(165, 224, 270, 265);
  281.     huzi2(153, 280, 262, 280);
  282.     huzi2(165, 320, 262, 300);
  283.     huzi2(416, 265, 515, 224);
  284.     huzi2(425, 280, 530, 280);
  285.     huzi2(425, 300, 522, 320);
  288.     // 画胡子 函数
  289.     function huzi2(x1, y1, x2, y2) { 
  290.         context2.beginPath();
  291.         context2.moveTo(x1, y1);
  292.         context2.lineTo(x2, y2);
  293.         context2.stroke();
  294.     }
  297.     // 7.身体部分
  298.     // 左臂
  299.     context2.beginPath();
  300.     context2.moveTo(190,439);
  301.     context2.lineTo(80,504);
  302.     context2.lineTo(110,562);
  303.     context2.lineTo(180,531);
  304.     context2.lineTo(180, 500);
  305.     context2.lineTo(180, 760);
  306.     context2.lineTo(320, 760);
  307.     // 裆
  308.     context2.arcTo(320,750,360,720,20);
  309.     context2.arcTo(360,720,360,750,20);
  310.     context2.lineTo(360, 760);
  311.     context2.lineTo(500, 760);
  312.     context2.lineTo(500, 500);
  313.     context2.lineTo(500, 531);
  314.     context2.lineTo(570, 562);
  315.     context2.lineTo(600, 504);
  316.     context2.lineTo(490, 439);
  317.     context2.closePath();
  318.     context2.fillStyle="yellow";
  319.     context2.fill();
  320.     context2.stroke();
  322.     // 7.左手
  323.     context2.beginPath();
  324.     context2.arc(70,545,45,0,Math.PI*2);
  325.     context2.fillStyle="white";
  326.     context2.fill();
  327.     context2.stroke();
  328.     // 右手
  329.     context2.beginPath();
  330.     context2.arc(610,545,45,0,Math.PI*2);
  331.     context2.fillStyle="white";
  332.     context2.fill();
  333.     context2.stroke();
  335.     // 8.左脚
  336.     context2.save();
  337.     context2.beginPath();
  338.     context2.lineWidth="8";
  339.     context2.moveTo(180,760);
  340.     context2.lineTo(315,760);
  341.     context2.arc(315,780,20,-Math.PI/2,Math.PI/2);
  342.     context2.lineTo(180,800);
  343.     context2.arc(180,780,20,-Math.PI/2,Math.PI/2,true);
  344.     context2.stroke();
  345.     context2.fillStyle="white";
  346.     context2.fill();
  347.     context2.restore();
  348.     // 右脚
  349.     context2.save();
  350.     context2.beginPath();
  351.     context2.lineWidth="8";
  352.     context2.moveTo(500,760);
  353.     context2.lineTo(365,760);
  354.     context2.arc(365,780,20,-Math.PI/2,Math.PI/2,true);
  355.     context2.lineTo(500,800);
  356.     context2.arc(500,780,20,-Math.PI/2,Math.PI/2);
  357.     context2.stroke();
  358.     context2.fillStyle="white";
  359.     context2.fill();
  360.     context2.restore();
  363.     // 10.肚子
  364.     context2.beginPath();
  365.     context2.arc(340,550,130,-Math.PI/4,-Math.PI/4*3);
  366.     context2.closePath();
  367.     context2.fillStyle="white";
  368.     context2.fill();
  369.     context2.stroke();
  370.     // 口袋
  371.     context2.beginPath();
  372.     context2.arc(340,550,100,0,Math.PI);
  373.     context2.closePath();
  374.     context2.fillStyle="white";
  375.     context2.fill();
  376.     context2.stroke();
  378.     // 11.领带
  379.     context2.save();
  380.     context2.beginPath();
  381.     context2.lineWidth="8";
  382.     context2.moveTo(190,430);
  383.     context2.lineTo(490,430);
  384.     context2.arc(490,450,20,-Math.PI/2,Math.PI/2);
  385.     context2.lineTo(190,470);
  386.     context2.arc(190,450,20,-Math.PI/2,Math.PI/2,true);
  387.     context2.stroke();  
  388.     context2.fillStyle="red";
  389.     context2.fill();
  390.     context2.restore();
  392.     // 12.铃铛
  393.     context2.beginPath();
  394.     context2.arc(340,470,30,0,Math.PI*2);
  395.     context2.fillStyle="skyblue";
  396.     context2.fill();
  397.     context2.stroke();
  399.     context2.lineWidth = "5";
  400.     huzi2(312, 455,368, 455);
  401.     huzi2(310, 462,370, 462)
  402.     huzi2(340, 480,340, 500)
  403.     context2.beginPath();
  404.     context2.arc(340, 475, 5, 0, Math.PI * 2);
  405.     context2.fillStyle = "black";
  406.     context2.fill();
  407.     context2.stroke();

总结： 绘制整身的哆啦A梦主要涉及到了对画圆方法的使用，需要控制好角度才能绘制出来头部和口袋。同时还要注意绘制脚丫时是如何让拼接的路径。

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

发表评论

表情：
评论列表 （有 0 条评论，129人围观）

还没有评论，来说两句吧...

相关阅读