<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Canvas绘制的灰太狼 - </title>
</head>
<body>
<div id="num">
</div>
<canvas id="demo" width="400" height="500" style="position:absolute;left:30px;top:100px;border:1px solid #000;">当前浏览器不支持canvas</canvas>
<script>
var d = document.getElementById('demo');
function funLoad(){
var cxt=d.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(2
<html>
<head>
<meta charset="UTF-8">
<title>Canvas绘制的灰太狼 - </title>
</head>
<body>
<div id="num">
</div>
<canvas id="demo" width="400" height="500" style="position:absolute;left:30px;top:100px;border:1px solid #000;">当前浏览器不支持canvas</canvas>
<script>
var d = document.getElementById('demo');
function funLoad(){
var cxt=d.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(2