canvas实现绘制吃豆鱼效果

时间：2022-06-25 14:34:42 编辑：袖梨来源：一聚教程网

话不多说，请看代码：

代码如下复制代码

<html>

<head>

<meta charset="UTF-8">

<title>canvas吃豆鱼title>

head>

<style>

body{

text-align:center;

}

canvas{

background: #efefef;

}

style>

<body>

<h1>

角度转为弧度：<br />

弧度=2*PI*角度/360=角度*PI/180

h1>

<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>

推荐专题

最新下载

热门教程

canvas实现绘制吃豆鱼效果

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程