话不多说,请看代码:
- <!DOCTYPE html>
- <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>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!
来源: