canvas實現(xiàn)繪制吃豆魚效果
更新時間：2017年01月12日 16:35:52 作者：君邪兒
本篇文章主要分享了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>
以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！
相關(guān)文章
各種音樂播放器上都有一個自動滾動播放歌詞的功能，當(dāng)前滾動到的歌詞會高亮居中顯示，即使歌詞被換行也能正常居中，那么這個功能基于JavaScript怎么實現(xiàn)讓歌詞滾動播放呢？感興趣的朋友一起看看吧2015-11-11
這個問題弄了我?guī)滋鞗]心思寫程序，問了論壇很多網(wǎng)友才搞定的。2008-07-07
js中offset,client , scroll 三大元素知識點(diǎn)總結(jié)
在本篇文章里小編給大家整理了關(guān)于js 元素offset,client , scroll 三大系列總結(jié)，有需要的朋友們可以學(xué)習(xí)下。2019-09-09
本文將詳細(xì)介紹a標(biāo)簽上的點(diǎn)擊事件的相關(guān)知識。具有很好的參考價值，下面跟著小編一起來看下吧2017-03-03
JavaScript中的null和undefined用法解析
這篇文章主要介紹了JavaScript中的null和undefined用法解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-09-09
這篇文章主要介紹了JavaScript中一些特殊的字符運(yùn)算的相關(guān)資料,需要的朋友可以參考下2017-08-08
這篇文章主要為大家介紹了Javascript 虛擬 DOM，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
這篇文章主要介紹了前端實現(xiàn)界面切換主題的相關(guān)資料,文中介紹了兩種方法,通過link標(biāo)簽的rel屬性和通過變量設(shè)置,前者適用于確定的主題樣式切換,后者則適用于在拾色器中任意選擇顏色更換主題的情況,需要的朋友可以參考下2025-02-02
本篇文章主要介紹了詳解為Bootstrap Modal添加拖拽的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
今天小編就為大家分享一篇layui清除radio的選中狀態(tài)實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11