用canvas 绘制一个灰太狼
<!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);
cxt.stroke();
cxt.beginPath();
cxt.moveTo(100,130);
cxt.lineTo(160,160);
cxt.moveTo(210,170);
cxt.lineTo(270,140);
cxt.lineWidth=8;
cxt.closePath();
cxt.stroke();
cxt.beginPath();
cxt.moveTo(90,180);
cxt.lineTo(170,190);
cxt.moveTo(200,183);
cxt.lineTo(280,193);
cxt.lineWidth=1;
cxt.moveTo(102,183);
cxt.bezierCurveTo(120,215,150,200,160,188);
cxt.moveTo(212,186);
cxt.bezierCurveTo(230,213,260,203,273,193);
cxt.stroke();
cxt.beginPath();
cxt.arc(130,184,7,0.1*Math.PI,Math.PI);
cxt.fillStyle="#6f6f6f";
cxt.fill();
cxt.beginPath();
cxt.arc(240,187,7,0.1*Math.PI,Math.PI);
cxt.fillStyle="#6f6f6f";
cxt.closePath();
cxt.stroke();
cxt.fill();
cxt.beginPath();
cxt.moveTo(160,235);
cxt.quadraticCurveTo(180,210,205,233);
cxt.lineTo(205,238);
cxt.quadraticCurveTo(180,255,160,239);
cxt.closePath();
cxt.fillStyle = "black";
cxt.stroke();
cxt.fill();
cxt.beginPath();
cxt.moveTo(165,229);
cxt.quadraticCurveTo(173,223,180,233);
cxt.quadraticCurveTo(169,243,161,232);
cxt.fillStyle = "white";
cxt.stroke();
cxt.fill();
cxt.moveTo(120,255);
cxt.quadraticCurveTo(182,285,255,255);
cxt.bezierCurveTo(250,300,130,300,120,255);
cxt.moveTo(123,263);
cxt.lineTo(133,268);
cxt.lineTo(133,263);
cxt.lineTo(138,269);
cxt.lineTo(153,274);
cxt.moveTo(252,265);
cxt.lineTo(240,270);
cxt.lineTo(238,263);
cxt.lineTo(236,272);
cxt.lineTo(223,274);
cxt.moveTo(88,188);
cxt.lineTo(120,280);
cxt.moveTo(75,210);
cxt.lineTo(104,198);
cxt.moveTo(81,220);
cxt.lineTo(105,210);
cxt.moveTo(83,230);
cxt.lineTo(110,218);
cxt.moveTo(95,240);
cxt.lineTo(115,230);
cxt.moveTo(95,255);
cxt.lineTo(124,240);
cxt.moveTo(103,265);
cxt.lineTo(120,255);
cxt.moveTo(110,273);
cxt.lineTo(122,265);
//绘制的是头上缝补的那个地方
cxt.moveTo(190,55);
cxt.lineTo(175,75);
cxt.quadraticCurveTo(210,68,227,80);
cxt.quadraticCurveTo(235,66,241,66);
cxt.lineTo(241,66);
cxt.moveTo(180,61);
cxt.lineTo(192,61);
cxt.moveTo(173,67);
cxt.lineTo(186,67);
cxt.moveTo(180,80);
cxt.lineTo(191,67);
cxt.moveTo(189,78);
cxt.lineTo(199,67);
cxt.moveTo(200,78);
cxt.lineTo(205,67);
cxt.moveTo(205,78);
cxt.lineTo(213,67);
cxt.moveTo(212,78);
cxt.lineTo(224,67);
cxt.moveTo(225,73);
cxt.lineTo(236,78);
cxt.moveTo(229,67);
cxt.lineTo(240,73);
cxt.moveTo(100,307);
cxt.quadraticCurveTo(160,356,210,360);
cxt.quadraticCurveTo(250,350,281,300);
cxt.moveTo(115,320);
cxt.quadraticCurveTo(120,430,220,427);
cxt.quadraticCurveTo(305,410,275,310);
cxt.stroke();
cxt.closePath();
//肚子上的圆圈
cxt.beginPath();
cxt.arc(210,395,10,0,Math.PI*0.3,true);
cxt.moveTo(200,390);
cxt.lineTo(213,398);
cxt.moveTo(208,390);
cxt.lineTo(208,400);
cxt.lineWidth = 2;
cxt.stroke();
//左腿
cxt.beginPath();
cxt.lineWidth = 1;
cxt.moveTo(150,408);
cxt.lineTo(139,433);
cxt.lineTo(148,450);
cxt.quadraticCurveTo(110,451,126,473);
cxt.moveTo(160,413);
cxt.lineTo(151,435);
cxt.lineTo(161,453);
cxt.lineTo(148,450);
cxt.quadraticCurveTo(193,460,166,473);
cxt.lineTo(126,473);
cxt.moveTo(145,455);
cxt.quadraticCurveTo(122,458,130,470);
cxt.moveTo(155,458);
cxt.quadraticCurveTo(138,458,140,470);
cxt.stroke();
//右腿
cxt.moveTo(250,415);
cxt.lineTo(258,435);
cxt.lineTo(247,450);
cxt.moveTo(262,409);
cxt.lineTo(272,435);
cxt.lineTo(262,450);
cxt.quadraticCurveTo(204,458,242,469);
cxt.moveTo(262,450);
cxt.quadraticCurveTo(294,448,276,469);
cxt.lineTo(242,469);
cxt.moveTo(260,455);
cxt.quadraticCurveTo(274,456,273,469);
cxt.moveTo(247,458);
cxt.quadraticCurveTo(260,456,263,469);
//左手
cxt.moveTo(97,307);
cxt.quadraticCurveTo(77,330,74,380);
cxt.quadraticCurveTo(63,380,64,403);
cxt.quadraticCurveTo(68,440,77,417);
cxt.moveTo(74,400);
cxt.quadraticCurveTo(80,440,86,420);
cxt.moveTo(84,400);
cxt.quadraticCurveTo(78,420,93,420);
cxt.quadraticCurveTo(97,410,93,400);
cxt.moveTo(95,410);
cxt.quadraticCurveTo(113,430,100,395);
cxt.quadraticCurveTo(104,387,91,380);
cxt.quadraticCurveTo(90,357,116,318);
//右脚
cxt.moveTo(285,295);
cxt.quadraticCurveTo(315,330,330,370);
cxt.moveTo(275,310);
cxt.quadraticCurveTo(295,330,310,375);
cxt.quadraticCurveTo(302,380,305,396);
cxt.quadraticCurveTo(303,420,316,403);
cxt.moveTo(316,399);
cxt.quadraticCurveTo(322,426,325,393);
cxt.moveTo(325,400);
cxt.quadraticCurveTo(329,428,333,395);
cxt.moveTo(333,400);
cxt.quadraticCurveTo(344,425,341,390);
cxt.quadraticCurveTo(338,368,330,370);
cxt.stroke();
</script>
</head>
</html>
用canvas 绘制一个灰太狼相关推荐
- 用canvas绘制一个圆形，实现绕着一个中心运动
实现效果 使用canvas绘制一个圆形,实现绕着一个中心,轨迹类似于走一个椭圆的轨迹那样路线,并且实现漂浮的效果. 这里只是一个实例Demo,直接运行就可以,下面附上代码: <!doctype ...
- html页面画一个矩形,使用HTML5 canvas绘制一个矩形的方法
使用HTML5 canvas绘制一个矩形的方法 发布时间:2020-08-29 11:23:12 来源:亿速云 阅读:102 作者:小新 这篇文章将为大家详细讲解有关使用HTML5 canvas绘制一 ...
- canva五角星空html,使用canvas绘制一个五角星
一.了解canvas canvas 是HTML5新增的元素,用于在网页上绘制图形.但 canvas 只是图形的容器,必须要通过脚本(通常是JavaScript)来绘制图形. 可以通过多种方法使用can ...
- Canvas绘制一个时钟
Canvas绘制一个时钟 Canvas:一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素.它可以用来制作照片集或者制作简单(也不是那么简单)的动画,甚至可以进行实时视频处 ...
- 使用canvas绘制一个动态的表盘
使用canvas绘制一个动态的表盘 技术要求 需要一点点数学基础 需要对 canvas 的常见的方法熟悉 一点点数学基础 角度转弧度的计算公式 canvas 常见的方法 菜鸟教程 扬帆起航 首先创建一 ...
- 使用canvas 绘制一个有限度的斐波那契数列的曲线
昨天看到"前端面试中的常见的算法问题"的一篇文章,感觉有点挑战,所以才要实现使用canvas 绘制一个有限度的斐波那契数列的曲线,刚开始真是想破脑袋也实现不了,被下图中交接的线条搞 ...
- 【Canvas】js用canvas绘制一个钟表时钟动画效果
学习JavaScript的看过来,有没有兴趣用Canvas画图呢,可以画很多有趣的事物,自由发挥想象,收获多多哦,旋转角度绘图这个重点掌握到了吗,这里有一个例子,如何用canvas画钟表时钟动图效果, ...
- 通过Canvas绘制一个小型太阳系
绘制一个地球绕太阳转,月球绕地球转的小型太阳系 运行效果如下 代码如下 <!DOCTYPE html> <html><head><meta ...
- 前端:用canvas绘制一个烟花动画
关注并将「趣谈前端」设为星标 每日定时推送技术干货/优秀开源/技术思维 前言 在我们日常开发中贝塞尔曲线无处不在: svg 中的曲线(支持 2阶. 3阶) canvas 中绘制贝塞尔曲线 几乎所有前端 ...
最新文章
- 人工智能听了很多遍，都应用在哪些领域了你知道吗？
- python数据库更新消息提醒_用Python实现校园通知更新提醒功能
- 第三课——MFC编程
- 如是院长说：买不起房就多买两套，大家怎么看
- 18. javacript高级程序设计-JavaScript与XML
- waring Release版本
- ubuntu 下openkore的运行
- cad中拖动文字时卡顿_cad移动图时卡顿 - 卡饭网
- 2020第三届中青杯问题总结
- r语言和python哪个难学_明明R语言比python容易学的多，为什么还有那么多人说R语言学起来陡峭?...
- codeigniter.php,CodeIgniter.php在做什么
- WebSocket通信原理和在Tomcat中实现源码详解（万字爆肝）
- 【vscode简单入门(三)】vscode巨实用的基础插件推荐（不定期更新）
- 七号信令中TUP协议的主要消息和故障问题
- 三炮的三舅走了，才发觉日子真的不经念叨呀！
- 数据禾|甘肃省国家湿地公园功能区划数据
- python3制作中文词云_Python_制作中文词云
- cf Educational Codeforces Round 54 C. Meme Problem
- 计算机网络具备哪些要素,一个计算机网络必须具备以下3个基本要素
- LaTex 常用符号和操作整理~~未完待续