溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
話不多說，請看代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvas吃豆魚</title>
</head>
<style>
body{
text-align:center;
}
canvas{
background: #efefef;
}
</style>
<body>
<h2>
角度轉為弧度：<br />
弧度=2*PI*角度/360=角度*PI/180
</h2>
<!--畫布的寬和高只能使用屬性，不能使用樣式-->
<canvas id='a1' width="500" height="400"></canvas>
</body>
</html>
<script>
var ctx=a1.getContext('2d');//得到畫布上的畫筆并設置繪制方式
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>
以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持億速云！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
