canvas實(shí)現(xiàn)繪制吃豆魚效果
更新時(shí)間：2017年01月12日 16:35:52 作者：君邪兒
本篇文章主要分享了canvas實(shí)現(xiàn)繪制吃豆魚效果的示例代碼，具有一定的參考價(jià)值，下面跟著小編一起來看下吧
話不多說，請(qǐng)看代碼：
<!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>
以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時(shí)也希望多多支持腳本之家！
相關(guān)文章
Bootstrap每天必學(xué)之工具提示（Tooltip）插件
Bootstrap每天必學(xué)之工具提示（Tooltip）插件，工具提示就是通過鼠標(biāo)移動(dòng)選定在特定的元素上時(shí)，顯示相關(guān)的提示語(yǔ)，感興趣的小伙伴們可以參考一下2016-04-04
JavaScript+html實(shí)現(xiàn)前端頁(yè)面滑動(dòng)驗(yàn)證(2)
這篇文章主要為大家詳細(xì)介紹了JavaScript+html實(shí)現(xiàn)前端頁(yè)面滑動(dòng)驗(yàn)證的第二種方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
關(guān)于javascript event flow 的一個(gè)bug詳解
描述了firefox，safari 有一個(gè)bug和DOM 3 規(guī)范不一致：在event.currentTarget等于event.target的時(shí)候（即event flow處于target phase時(shí)），會(huì)調(diào)用添加到currentTarget上的useCapture為true的listener2013-09-09
全面解讀TypeScript和JavaScript的區(qū)別
TypeScript和JavaScript是目前項(xiàng)目開發(fā)中較為流行的兩種腳本語(yǔ)言, TypeScript是JavaScript的一個(gè)超集,JavaScript是一種輕量級(jí)的解釋性腳本語(yǔ)言,本文主要介紹了兩者區(qū)別,感興趣的可以了解一下2023-09-09
JavaScrpt中如何使用 cookie 設(shè)置查看與刪除功能
這篇文章主要介紹了JavaScrpt中使用 cookie 設(shè)置查看與刪除功能的方法，文中通過實(shí)例代碼給大家介紹了js cookie常用的3個(gè)預(yù)設(shè)函數(shù)庫(kù),需要的朋友可以參考下2017-07-07
html的DOM中document對(duì)象images集合用法實(shí)例
這篇文章主要介紹了html的DOM中document對(duì)象images集合用法,實(shí)例分析了images集合的語(yǔ)法與使用技巧,需要的朋友可以參考下2015-01-01
在項(xiàng)目中遇到了一個(gè)困惑好久的問題，flash遮住div的問題,今天終于解決了 ,需要的朋友可以參考下2014-02-02
這篇文章主要介紹了詳解如何探測(cè)小程序返回到webview頁(yè)面，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
詳解JavaScript中扁平與樹形數(shù)據(jù)的轉(zhuǎn)換
這篇文章主要為大家想介紹了JavaScript中實(shí)現(xiàn)扁平與樹形數(shù)據(jù)相互轉(zhuǎn)換的方法，文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)JavaScript有一定的幫助，需要的可以參考一下2023-01-01
JS實(shí)現(xiàn)無限級(jí)網(wǎng)頁(yè)折疊菜單(類似樹形菜單)效果代碼
這篇文章主要介紹了JS實(shí)現(xiàn)無限級(jí)網(wǎng)頁(yè)折疊菜單(類似樹形菜單)效果代碼,涉及JavaScript基于鼠標(biāo)事件實(shí)現(xiàn)針對(duì)頁(yè)面元素結(jié)點(diǎn)的遍歷及樣式操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09