绘制灰太狼图像

学习了canvas之后，想着能不能画图呢，闲来无事画了一张，


效果图

感觉还不错吧

css：

*{ margin:0; padding:0; list-style:none;}

#demo{position: absolute; left: 50%; top: 50%; border: 1px solid #000; margin:-250px 0 0 -200px;}

html:

<canvas id="demo" width="400" height="500">当前浏览器不支持canvas</canvas>

js:

function funLoad(){

    var cxt = document.getElementById('demo').getContext('2d') ;

    cxt.beginPath() ;

    cxt.lineWidth = 2 ;

    cxt.strokeStyle = 'green' ;

    cxt.moveTo(33,43) ;

    cxt.quadraticCurveTo(55,40,124,73) ;

    cxt.moveTo(33,43) ;

    cxt.lineTo(68,140) ;

    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(61,235,76,243) ;

    cxt.bezierCurveTo(88,350,290,350,309,252) ;

    cxt.quadraticCurveTo(320,239,353,234) ;

    cxt.bezierCurveTo(338,223,354,215,371,214) ;

    cxt.quadraticCurveTo(360,169,325,144) ;

    cxt.lineTo(333,121) ;

    cxt.quadraticCurveTo(317,100,341,97) ;

    cxt.lineTo(361,43) ;

    cxt.quadraticCurveTo(307,48,266,75) ;

    cxt.moveTo(361,43) ;

    cxt.quadraticCurveTo(332,72,304,133) ;

    cxt.quadraticCurveTo(318,127,313,134) ;

    cxt.quadraticCurveTo(323,132,318,140) ;

    cxt.quadraticCurveTo(324,136,325,144)

    cxt.moveTo(266,75) ;

    cxt.quadraticCurveTo(265,90,243,94) ;

    cxt.lineTo(133,112) ;

    cxt.quadraticCurveTo(90,116,107,91) ;

    cxt.quadraticCurveTo(147,29,223,27) ;

    cxt.quadraticCurveTo(272,38,266,75) ;

    cxt.moveTo(107,91) ;

    cxt.quadraticCurveTo(111,110,144,100) ;

    cxt.lineTo(244,80) ;

    cxt.quadraticCurveTo(264,76,267,61) ;

    cxt.moveTo(196,30) ;

    cxt.lineTo(176,51) ;

    cxt.quadraticCurveTo(224,43,240,66) ;

    cxt.quadraticCurveTo(252,55,264,53) ;

    cxt.moveTo(186,38) ;

    cxt.lineTo(198,37) ;

    cxt.moveTo(176,43) ;

    cxt.lineTo(190,43) ;

    cxt.moveTo(186,53) ;

    cxt.lineTo(194,45) ;

    cxt.moveTo(200,45) ;

    cxt.lineTo(196,54) ;

    cxt.moveTo(210,47) ;

    cxt.lineTo(205,54) ;

    cxt.moveTo(219,49) ;

    cxt.lineTo(213,54) ;

    cxt.moveTo(229,50) ;

    cxt.lineTo(222,59) ;

    cxt.moveTo(237,52) ;

    cxt.lineTo(232,65) ;

    cxt.moveTo(244,56) ;

    cxt.lineTo(250,66) ;

    cxt.moveTo(252,52) ;

    cxt.lineTo(261,62) ;

    cxt.stroke() ;

    cxt.beginPath() ;

    cxt.lineWidth = 10 ;

    cxt.moveTo(99,123) ;

    cxt.lineTo(169,164) ;

    cxt.moveTo(220,172) ;

    cxt.lineTo(291,130) ;

    cxt.stroke() ;

    cxt.beginPath() ;

    cxt.lineWidth = 2 ;

    cxt.moveTo(88,168) ;

    cxt.lineTo(174,188) ;

    cxt.moveTo(212,180) ;

    cxt.lineTo(297,199) ;

    cxt.moveTo(87,173) ;

    cxt.lineTo(126,286) ;

    cxt.moveTo(80,204) ;

    cxt.lineTo(108,191) ;

    cxt.moveTo(91,220) ;

    cxt.lineTo(111,211) ;

    cxt.moveTo(96,236) ;

    cxt.lineTo(114,226) ;

    cxt.moveTo(106,248) ;

    cxt.lineTo(119,243) ;

    cxt.moveTo(106,267) ;

    cxt.lineTo(124,259) ;

    cxt.moveTo(117,276) ;

    cxt.lineTo(126,272) ;

    cxt.moveTo(106,171) ;

    cxt.bezierCurveTo(109,200,142,204,159,185) ;

    cxt.moveTo(230,184) ;

    cxt.bezierCurveTo(233,210,267,218,284,197) ;

    cxt.moveTo(123,253) ;

    cxt.quadraticCurveTo(193,275,272,253) ;

    cxt.bezierCurveTo(260,300,120,290,123,253) ;

    cxt.stroke() ;

    cxt.beginPath() ;

    cxt.lineWidth = 1 ;

    cxt.moveTo(125,260) ;

    cxt.lineTo(134,263) ;

    cxt.lineTo(136,259) ;

    cxt.lineTo(139,265) ;

    cxt.lineTo(155,270) ;

    cxt.moveTo(237,270) ;

    cxt.lineTo(252,266) ;

    cxt.lineTo(254,258) ;

    cxt.lineTo(258,264) ;

    cxt.lineTo(268,261) ;

    cxt.stroke() ;

    cxt.beginPath() ;

    cxt.lineWidth = 2 ;

    cxt.fillStyle = 'green' ;

    cxt.save() ;

    cxt.translate(133,179) ;

    cxt.rotate(Math.PI*2/20) ;

    cxt.arc(0,0,5,3,Math.PI*2,true) ;

    cxt.fill() ;

    cxt.restore() ;

    cxt.beginPath() ;

    cxt.save() ;

    cxt.translate(254,190) ;

    cxt.rotate(Math.PI*2/20) ;

    cxt.arc(0,0,5,3,Math.PI*2,true) ;

    cxt.fill() ;

    cxt.restore() ;

    cxt.beginPath() ;

    cxt.moveTo(190,212) ;

    cxt.bezierCurveTo(150,214,150,246,190,246) ;

    cxt.bezierCurveTo(230,246,230,214,190,212) ;

    cxt.fill() ;

    cxt.beginPath() ;

    cxt.fillStyle = '#fff' ;

    cxt.moveTo(162,224) ;

    cxt.quadraticCurveTo(171,212,180,224);

    cxt.quadraticCurveTo(171,234,162,224);

    cxt.fill() ;

    cxt.beginPath() ;

    cxt.moveTo(119,306) ;

    cxt.quadraticCurveTo(132,334,205,363) ;

    cxt.quadraticCurveTo(256,334,264,310) ;

    cxt.moveTo(110,300) ;

    cxt.quadraticCurveTo(86,334,81,370) ;

    cxt.quadraticCurveTo(67,371,66,394) ;

    cxt.bezierCurveTo(60,418,71,427,76,421) ;

    cxt.moveTo(76,399) ;

    cxt.bezierCurveTo(70,419,85,434,89,421) ;

    cxt.quadraticCurveTo(79,414,85,399) ;

    cxt.moveTo(89,421) ;

    cxt.bezierCurveTo(98,430,102,430,99,400) ;

    cxt.moveTo(101,410) ;

    cxt.quadraticCurveTo(119,419,112,400) ;

    cxt.bezierCurveTo(105,388,114,378,101,371) ;

    cxt.moveTo(100,376) ;

    cxt.quadraticCurveTo(109,324,126,315) ;

    cxt.moveTo(280,299) ;

    cxt.quadraticCurveTo(310,340,312,371) ;

    cxt.quadraticCurveTo(326,376,326,398) ;

    cxt.bezierCurveTo(330,415,326,426,318,420) ;

    cxt.moveTo(317,399) ;

    cxt.bezierCurveTo(323,419,313,433,305,422) ;

    cxt.moveTo(309,400) ;

    cxt.bezierCurveTo(310,425,291,442,292,403) ;

    cxt.moveTo(292,410) ;

    cxt.bezierCurveTo(284,416,274,413,282,397) ;

    cxt.quadraticCurveTo(280,375,293,371) ;

    cxt.moveTo(294,376) ;

    cxt.quadraticCurveTo(289,338,267,314) ;

    cxt.stroke() ;

    cxt.beginPath() ;

    cxt.lineWidth = 3 ;

    cxt.moveTo(127,319) ;

    cxt.bezierCurveTo(90,470,310,460,262,317) ;

    cxt.moveTo(188,389) ;

    cxt.lineTo(197,399) ;

    cxt.moveTo(190,402) ;

    cxt.lineTo(195,391) ;

    cxt.stroke() ;

    cxt.beginPath() ;

    cxt.save() ;

    cxt.translate(194,396) ;

    cxt.arc(0,0,10,1,Math.PI*2,false) ;

    cxt.restore() ;

    cxt.stroke() ;

    cxt.beginPath() ;

    cxt.lineWidth = 2 ;

    cxt.moveTo(144,406) ;

    cxt.lineTo(127,434) ;

    cxt.lineTo(136,449) ;

    cxt.moveTo(152,417) ;

    cxt.lineTo(142,434) ;

    cxt.moveTo(139,431) ;

    cxt.lineTo(151,450) ;

    cxt.bezierCurveTo(110,441,90,464,105,476) ;

    cxt.lineTo(156,476) ;

    cxt.bezierCurveTo(175,473,170,459,151,450) ;

    cxt.moveTo(126,455) ;

    cxt.quadraticCurveTo(106,456,108,474) ;

    cxt.moveTo(139,457) ;

    cxt.quadraticCurveTo(121,459,125,474) ;

    cxt.moveTo(244,416) ;

    cxt.lineTo(252,433) ;

    cxt.moveTo(255,430) ;

    cxt.lineTo(245,450) ;

    cxt.moveTo(254,406) ;

    cxt.lineTo(269,433) ;

    cxt.lineTo(261,448) ;

    cxt.bezierCurveTo(218,456,220,472,234,475) ;

    cxt.lineTo(289,475) ;

    cxt.bezierCurveTo(304,467,302,452,261,448) ;

    cxt.moveTo(255,457) ;

    cxt.quadraticCurveTo(275,461,268,474) ;

    cxt.moveTo(270,455) ;

    cxt.quadraticCurveTo(291,462,285,474) ;

    cxt.moveTo(198,428) ;

    cxt.quadraticCurveTo(203,453,228,458) ;

    cxt.moveTo(236,453) ;

    cxt.bezierCurveTo(213,440,214,437,248,448) ;

    cxt.bezierCurveTo(230,430,230,428,251,433) ;

    cxt.moveTo(275,450) ;

    cxt.quadraticCurveTo(287,432,287,416) ;

    cxt.quadraticCurveTo(270,420,255,412) ;

    cxt.stroke() ;

}

funLoad() ;

一幅完整的灰太狼就完成了

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 202,529评论 5赞 475
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,015评论 2赞 379
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 149,409评论 0赞 335
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,385评论 1赞 273
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,387评论 5赞 364
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,466评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,880评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,528评论 0赞 256
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,727评论 1赞 295
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,528评论 2赞 319
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,602评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,302评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,873评论 3赞 306
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,890评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,132评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,777评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,310评论 2赞 342

推荐阅读更多精彩内容

  • canvas画doraemon
    html部分： 快去升级你的浏览器吧！ js 部分： var ctx = document.getElementB...
    吸猫群众阅读 452评论 0赞 0
  • H5新特性Canvas画最爱的哆啦A梦^_^
    最近在学H5的一些新特性,尤其对其中的canvas特别感兴趣,自己画了一个哆啦A梦,纪念一下童年最爱的那个大蓝猫🐱...
    熊小猫爱唱歌阅读 1,648评论 1赞 2
  • Canvas：绘制线段
    在Canvas中，线段也是路径中的一种，被称之为线性路径。在Canvas中绘制线性路径主要用到moveTo(x,y...
    王叮叮当当响阅读 2,851评论 0赞 2
  • 第9期拆书训练营第七次作业
    全部复制本篇文章内容到自己的简书中，然后写I便签、A1和A2便签。 I重述原文： 根据自己写的I撰写A，包含： A...
    Sonnar阅读 115评论 0赞 0
  • 2017-05-29
    这是今天中午随意抽的牌，跟我这些天的状况非常像，这几天我真的很懒，除了洗漱，做饭必须的事情，我什么也没干，而且特不...
    赚爱阅读 111评论 1赞 1