用canvas 绘制一个灰太狼

最新推荐文章于 2024-01-02 10:48:37 发布

Oraice

最新推荐文章于 2024-01-02 10:48:37 发布

阅读量1.3k

点赞数 1

分类专栏： canvas 文章标签： canvas 灰太狼

本文链接：https://blog.csdn.net/Oraice/article/details/49700511

版权

用canvas 绘制一个灰太狼

摘要由CSDN通过智能技术生成

<!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.bezierCurve