<!--
作者：1457225624@qq.com
时间：xxxx-xx-xx
描述：大家好！我是小张，今天我用html5，，canvas的画布画出了一个小作品，
画的不好看，，，还请原谅，，下面就是我的作品。如下图！！！
-->
<!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>
//http://www.j--d.com/bezier
var d = document.getElementById('demo');
function funLoad(){
//创建绘画环境,2d平面图;在这个环境里面进行绘画;
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) ;
最低0.47元/天 解锁文章
2347
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
