用canvas 绘制一个灰太狼

最新推荐文章于 2023-04-16 15:57:53 发布

原创

最新推荐文章于 2023-04-16 15:57:53 发布 · 1.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#canvas #灰太狼

这篇博客通过HTML5的canvas元素，使用JavaScript代码详细绘制了一个灰太狼的形象，包括脸部、身体、四肢等特征，展示了canvas在图形绘制方面的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8"/>
       <canvas id="canvas" style="border:1px solid; display:block; margin:50px auto;">当前浏览器不支持canvascanvas</canvas>
       <script>

           var canvas = document.getElementById("canvas");
           canvas.height = 500;
           canvas.width = 400;
           var cxt = canvas.getContext("2d");
           cxt.moveTo(33,43) ;
           cxt.quadraticCurveTo(55,40,120, 83);
           cxt.moveTo(33,43);
           cxt.lineTo(64,145);
           cxt.moveTo(33,43);
           cxt.quadraticCurveTo(73,92, 89,130);
           cxt.quadraticCurveTo(75,127,81,136);
           cxt.lineTo(73,136) ;
           cxt.lineTo(74,139);
           cxt.quadraticCurveTo(36,164,24,213);
           cxt.bezierCurveTo(52,215,49,223,41,233) ;
           cxt.quadraticCurveTo(45,228,71,260);
           cxt.bezierCurveTo(71,350,300,350,300,260);
           cxt.quadraticCurveTo(310,245,330,240);
           cxt.bezierCurveTo(320,238,325,225,345,220);
           cxt.quadraticCurveTo(335,190,300,145);
           cxt.lineTo(305,120);
           cxt.bezierCurveTo(290,114,299,100,310,100);
           cxt.lineTo(330,50);
           cxt.quadraticCurveTo(288,100,277,137);
           cxt.quadraticCurveTo(297,122,286,137);
           cxt.quadraticCurveTo(303,128,293,142);
           cxt.quadraticCurveTo(303,130,300,142);



           cxt.moveTo(330,50);
           cxt.quadraticCurveTo(280,60,246,83);
           cxt.moveTo(247,89);
           cxt.quadraticCurveTo(250,50,180,56);
           cxt.quadraticCurveTo(140,60,100,105);
           cxt.bezierCurveTo(90,145,250,120,247,89);
           cxt.moveTo(105,100);
           cxt.quadraticCurveTo(120,115,145,113);
           cxt.quadraticCurveTo(240,110,243,74);