abstract：本篇文章主要分享了canvas實現(xiàn)繪制吃豆魚效果的示例代碼，具有一定的參考價值，下面跟著小編一起來看下吧<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>canvas吃豆魚</title&
本篇文章主要分享了canvas實現(xiàn)繪制吃豆魚效果的示例代碼，具有一定的參考價值，下面跟著小編一起來看下吧
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvas吃豆魚</title>
</head>
<style>
body{
text-align:center;
}
canvas{
background: #efefef;
}
</style>
<body>
<h1>
角度轉(zhuǎn)為弧度：<br />
弧度=2*PI*角度/360=角度*PI/180
</h1>
<!--畫布的寬和高只能使用屬性，不能使用樣式-->
<canvas id='a1' width="500" height="400"></canvas>
</body>
</html>
<script>
var ctx=a1.getContext('2d');//得到畫布上的畫筆并設(shè)置繪制方式
function openMouse(){
//繪制圓（3/4）
ctx.beginPath();//開始一條路徑
ctx.arc(250,200,100,45*Math.PI/180,315*Math.PI/180);//圓心為（250,200），半徑為100
ctx.lineTo(250,200);
ctx.closePath();
ctx.stroke();//勾勒輪廓/描邊
ctx.fillStyle='#00ffff';
ctx.fill();
eye();
}
//openMouse();
function closeMouse(){
ctx.beginPath();//開始一條路徑
ctx.arc(250,200,100,0*Math.PI/180,360*Math.PI/180);//圓心為（250,200），半徑為100
ctx.lineTo(250,200);
ctx.closePath();
ctx.stroke();//勾勒輪廓/描邊
ctx.fillStyle='#00ffff';
ctx.fill();
eye();
}
//closeMouse();
//繪制公共部分眼睛
function eye(){
//繪制眼睛
ctx.beginPath();
ctx.arc(250,200-100/2,25,0,2*Math.PI);//眼睛半徑為25
ctx.stroke();
ctx.fillStyle='#001900';
ctx.fill();
//繪制眼神光
ctx.beginPath();
ctx.arc(265,140,5,0,2*Math.PI);//眼神光半徑為5
ctx.stroke();
ctx.fillStyle='#ffffff';
ctx.fill();
}
var isOpen=true;//定義變量isOpen：是否張開
var timer=setInterval(function(){
var ctx=a1.getContext('2d');
ctx.clearRect(0,0,500,400);//清空畫布大小
if(isOpen){
closeMouse();
isOpen=false;
}else{
openMouse();
isOpen=true;
}
},500);
</script>更多關(guān)于canvas實現(xiàn)繪制吃豆魚效果請關(guān)注PHP中文網(wǎng)（ipnx.cn）其他文章！