canvas绘制小人开口和闭口

标签：ext   path   element   sem   round   func   yellow   contex   center   

css：
<style>
body{
text-align: center;
}
canvas{
background: #ddd;
}
</style>
canvas标签：
<canvas id="canvas" width="500" height="400"></canvas>
js：
var elem = document.getElementById("canvas");
var canvas = elem.getContext("2d");
//开始路径

//张嘴函数
function openMouth(){
canvas.beginPath();
canvas.arc(250,200,100,30*Math.PI/180,330*Math.PI/180);
canvas.lineTo(250,200);
canvas.fillStyle = "yellow";
canvas.fill();
canvas.closePath();
canvas.stroke();
//眼睛
canvas.beginPath();
canvas.arc(270,150,25,Math.PI*2,false);
canvas.fillStyle = "#38f";
canvas.fill();
canvas.stroke();
//眼神
canvas.beginPath();
canvas.arc(275,140,8,Math.PI*2,false);
canvas.fillStyle = "white";
canvas.fill();
canvas.stroke();
}
//openMouth();
//闭嘴函数
function closeMouth(){
canvas.beginPath();
canvas.arc(250,200,100,0,2*Math.PI);
canvas.fillStyle = "orange";
canvas.fill();
canvas.lineTo(250,200);
canvas.stroke();
//眼睛
canvas.beginPath();
canvas.arc(260,150,25,Math.PI*2,false);
canvas.fillStyle = "#38f";
canvas.fill();
canvas.stroke();
//眼神
canvas.beginPath();
canvas.arc(270,145,8,Math.PI*2,false);
canvas.fillStyle = "white";
canvas.fill();
canvas.stroke();
}
// closeMouth();
//定是闭嘴或者张嘴
var index = 1 ;
var timer = setInterval(function(){
canvas.clearRect(0,0,500,400);
index ++;
if(index%2==0){
openMouth();
}else{
closeMouth();
}
},1000);

canvas绘制小人开口和闭口

标签：ext   path   element   sem   round   func   yellow   contex   center   

原文地址：http://www.cnblogs.com/wangruifang/p/7509586.html