话不多说,请看代码:
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title>画布吃豆鱼& lt;/title>
& lt;/head>
& lt; style>
身体{
text-align:中心;
}
帆布{
背景:# efefef;
}
& lt;/style>
& lt; body>
& lt; h2>
角度转为弧度:& lt; br/比;
弧度=2 *π*角度/360=角度*π/180
& lt;/h2>
& lt; !——画布的宽和高只能使用属性,不能使用样式——比;
& lt;帆布id=癮1”宽度==?00”“500”高度祝辞& lt;/canvas>
& lt;/body>
& lt;/html>
& lt; script>
var ctx=a1.getContext (2 d);//得到画布上的画笔并设置绘制方式
函数openMouse () {//绘制圆(3/4)
ctx.beginPath();//开始一条路径
ctx.arc(250200100年,45 * Math.PI/180315 * Math.PI/180);//圆心为(250200),半径为100
ctx.lineTo (250200);
ctx.closePath ();
ctx.stroke();//勾勒轮廓/描边
ctx.fillStyle=? 00飞行符”;
ctx.fill ();
眼睛();
}//openMouse ();
函数closeMouse () {
ctx.beginPath();//开始一条路径
ctx.arc (250200100 0 * Math.PI/180360 * Math.PI/180);//圆心为(250200),半径为100
ctx.lineTo (250200);
ctx.closePath ();
ctx.stroke();//勾勒轮廓/描边
ctx.fillStyle=? 00飞行符”;
ctx.fill ();
眼睛();
}//closeMouse ();//绘制公共部分眼睛
函数的眼睛(){//绘制眼睛
ctx.beginPath ();
ctx.arc(0 250200 - 100/2, 25日,2 * Math.PI);//眼睛半径为25
ctx.stroke ();
ctx.fillStyle=? 001900”;
ctx.fill ();//绘制眼神的光
ctx.beginPath ();
ctx.arc (265140 5 0 2 * Math.PI);//眼神光半径为5
ctx.stroke ();
ctx.fillStyle=? ffffff”;
ctx.fill ();
}
var isOpen=true;//定义变量isOpen:是否张开
var计时器=setInterval(函数(){
var ctx=a1.getContext (2 d);
ctx.clearRect(0, 0500400);//清空画布大小
如果(isOpen) {
closeMouse ();
isOpen=false;
其他}{
openMouse ();
isOpen=true;
}
}, 500);
& lt;/script>
之前
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!
