繪制灰太狼圖像

學(xué)習(xí)了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">當(dāng)前瀏覽器不支持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() ;

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

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • html部分： 快去升級你的瀏覽器吧！ js 部分： var ctx = document.getElementB...
    吸貓群眾閱讀 544評論 0贊 0
  • 最近在學(xué)H5的一些新特性,尤其對其中的canvas特別感興趣,自己畫了一個哆啦A夢,紀(jì)念一下童年最愛的那個大藍貓??...
    熊小貓愛唱歌閱讀 1,772評論 1贊 2
  • 在Canvas中，線段也是路徑中的一種，被稱之為線性路徑。在Canvas中繪制線性路徑主要用到moveTo(x,y...
    王叮叮當(dāng)當(dāng)響閱讀 3,198評論 0贊 2
  • 全部復(fù)制本篇文章內(nèi)容到自己的簡書中，然后寫I便簽、A1和A2便簽。 I重述原文： 根據(jù)自己寫的I撰寫A，包含： A...
    Sonnar閱讀 134評論 0贊 0
  • 這是今天中午隨意抽的牌，跟我這些天的狀況非常像，這幾天我真的很懶，除了洗漱，做飯必須的事情，我什么也沒干，而且特不...
    賺愛閱讀 149評論 1贊 1

友情鏈接更多精彩內(nèi)容