利用HTML5的canvas标签实现灰太狼图像的绘制

最新推荐文章于 2024-04-22 10:57:48 发布

VIP文章执笔写流年殇

最新推荐文章于 2024-04-22 10:57:48 发布

阅读量824

点赞数 1

文章标签： html5 canvas

本文链接：https://blog.csdn.net/fsfasgsfd/article/details/52642673

版权

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

最低0.47元/天解锁文章

执笔写流年殇

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
利用HTML5的canvas标签实现灰太狼图像的绘制

Canvas绘制的灰太狼 - 当前浏览器不支持canvasvar d = document.getElementById('demo');function funLoad(){ var cxt=d.getContext('2d') ; cxt.beginPath() ; cxt.lineWidth = 2 ;
复制链接

扫一扫