HTML5 canvas 模拟吃豆子

最新推荐文章于 2021-10-06 01:09:29 发布

actionstar

最新推荐文章于 2021-10-06 01:09:29 发布

阅读量453

点赞数

分类专栏： HTML5 文章标签： html5 function browser div button border

本文链接：https://blog.csdn.net/actionstar/article/details/8064200

版权

<!DOCTYPE HTML>
<html>
<head>
    <title>Eat Beans</title>
</head>
<body>
    <div>
      Welcome ! <input type="button" value="again" onclick ="drawBeans();"/>
    <div>
    <div id="log"></div>
    <canvas id="myCanvas" width="800" height="600" style="border:1px solid #c3c3c3;">
      Your browser does not support the canvas element.
    </canvas>

    <script type="text/javascript">
      try{
        var bodyX =60;//鱼身坐标X值
        var bodyY = 40;//鱼身坐标Y值
        var bodyRadius = 30;//鱼身半径
        var bodyStartAngleRight =1.8;//鱼身向右起始弧度
        var bodyEndAngleRigth = 0.2 //鱼身向右终止弧度。
        var bodyStartAngleLeft = 0.8;//鱼身向左起始弧度
        var bodyEndAngleLeft = 1.2;//鱼身向左终止弧度。
        var bodyStartAngleDown = 0.3;//鱼身向下起始弧度
        var bodyEndAngleDown = 0.7;//鱼身向下终止弧度
        var bodyStartAngleUp = 1.3;
        var bodyEndAngleUp = 1.7
        var shutUpRigth = true; //正在闭嘴向右
        var shutUpLeft = true; //正在闭嘴向左
        var shutUpDown = true;//闭嘴向下
        var shutUpUp = true;
        var isEat = false;

        var moveToLeft = true; //正在向左移动，向左或移动时，转身鱼眼的位置是不一样的
        var eyeX = 60;//鱼眼坐标X
        var eyeY =20;//鱼眼坐标Y
        var canvas=document.getElementById("myCanvas");
         var context = canvas.getContext('2d');
         context.beginPath();

        context.arc(bodyX,bodyY,bodyRadius,Math.PI*bodyStartAngleRight,Math.PI*bodyEndAngleRigth,true);
        context.lineTo(bodyX,bodyY);
        context.arc(bodyX,bodyY,bodyRadius,Math.PI*bodyStartAngleRight,Math.PI*bodyEndAngleRigth,true);

        context.fillStyle='#FFCC33';
        context.fill();
        context.stroke();
        context.closePath();

        context.beginPath();
        context.moveTo(eyeX,eyeY);
        context.arc(eyeX,eyeY,5,0,Math.PI*2,true);
        context.fillStyle='#FF0000';
        context.fill();
        context.stro

最低0.47元/天解锁文章

actionstar

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML5 canvas 模拟吃豆子

Authors: Liu,XinRevision history:Date Author Description08-21-2012 Liu,Xin Eat Beans--> Eat Beans
复制链接

扫一扫