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

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

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

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

在这里插入图片描述

HTML代码：

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

CSS代码：

  1. canvas { 
  2.             display:block;
  3.             margin:0 auto;
  4.             background: pink
  5.         }

JavaScript代码：

  1. var oCanvas = document.getElementById("my_canvas");
  2.     oCanvas.width = 600;
  3.     oCanvas.height = 600;
  4.     var context = oCanvas.getContext("2d");
  5.     // document.onclick = function (ev) { 
  6.     // console.log(ev.pageX, ev.pageY)
  7.     // }
  9.     // 1.大脑袋
  10.     context.beginPath();
  11.     context.arc(300, 300, 250, 0, Math.PI * 2);
  12.     context.lineWidth = "5";
  13.     context.stroke();
  14.     context.fillStyle = "rgb(34,118,207)";
  15.     context.fill();
  17.     // 2.大脸蛋子
  18.     // context.scale(1,0.9);
  19.     // context.beginPath();
  20.     // context.arc(300,410,200,0,Math.PI*2);
  21.     // context.lineWidth="5";
  22.     // context.stroke();
  24.     // context.ellipse(x,y,r1,r2,旋转的角度，起始角度，结束角度)
  25.     context.beginPath();
  26.     context.ellipse(300, 380, 200, 170, 0, 0, Math.PI * 2);
  27.     context.stroke();
  28.     context.fillStyle = "white";
  29.     context.fill();
  31.     // 3.大嘴巴子
  32.     context.beginPath();
  33.     context.arc(300, 460, 50, 0, Math.PI * 2);
  34.     context.stroke();
  35.     context.fillStyle = "black";
  36.     context.fill();
  38.     context.beginPath();
  39.     context.ellipse(300, 470, 48, 40, 0, 0, Math.PI * 2);
  40.     context.stroke();
  41.     context.fillStyle = "red";
  42.     context.fill();
  45.     // 4.大眼珠子
  46.     context.beginPath();
  47.     context.ellipse(248, 230, 50, 60, 0, 0, Math.PI * 2);
  48.     context.stroke();
  49.     context.fillStyle = "white";
  50.     context.fill();
  51.     context.beginPath();
  52.     context.ellipse(270, 230, 20, 30, 0, 0, Math.PI * 2);
  53.     context.stroke();
  54.     context.fillStyle = "black";
  55.     context.fill();
  56.     context.beginPath();
  57.     context.ellipse(270, 230, 5, 10, 0, 0, Math.PI * 2);
  58.     context.stroke();
  59.     context.fillStyle = "white";
  60.     context.fill();
  63.     context.beginPath();
  64.     context.ellipse(352, 230, 50, 60, 0, 0, Math.PI * 2);
  65.     context.stroke();
  66.     context.fillStyle = "white";
  67.     context.fill();
  68.     context.beginPath();
  69.     context.ellipse(330, 230, 20, 30, 0, 0, Math.PI * 2);
  70.     context.stroke();
  71.     context.fillStyle = "black";
  72.     context.fill();
  73.     context.beginPath();
  74.     context.ellipse(330, 230, 5, 10, 0, 0, Math.PI * 2);
  75.     context.stroke();
  76.     context.fillStyle = "white";
  77.     context.fill();
  78.     // 5.大鼻子
  79.     context.beginPath();
  80.     context.lineWidth = "3";
  81.     context.arc(300, 290, 30, 0, 2 * Math.PI);
  82.     context.stroke();
  83.     context.fillStyle = "red";
  84.     context.fill();
  86.     // 6.画胡子
  87.     context.lineWidth="5";
  88.     huzi(125,294,230,335);
  89.     huzi(113,370,222,366);
  90.     huzi(125,434,222,398);
  91.     huzi(376,335,465,282);
  92.     huzi(385,369,490,354);
  93.     huzi(385,400,488,420);
  96.     // 画胡子的方法
  97.     function huzi(x1, y1, x2, y2) { 
  98.         context.beginPath();
  99.         context.moveTo(x1, y1);
  100.         context.lineTo(x2, y2);
  101.         context.stroke();
  102.     }

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

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

发表评论

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

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

相关阅读