Skip to content

Latest commit

 

History

History
126 lines (111 loc) · 3.41 KB

20210922-Canvas动画案例.md

File metadata and controls

126 lines (111 loc) · 3.41 KB

20210922-Canvas动画案例

案例教程地址 https://codeplayer.vip/p/j7sd1

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>html5 canvas绘制可移动的小球入门示例</title>
  </head>
  <body onkeydown="moveBall(event)">
    <!-- 添加canvas标签，并加上红色边框以便于在页面上查看 -->
    <canvas
      id="myCanvas"
      width="400px"
      height="300px"
      style="border: 1px solid red"
    >
      您的浏览器不支持canvas标签。
    </canvas>

    <script type="text/javascript">
      //获取Canvas对象(画布)
      var canvas = document.getElementById("myCanvas")

      //表示圆球的类
      function Ball(x, y, radius, speed) {
        this.x = x || 10 //圆球的x坐标，默认为10
        this.y = y || 10 //圆球的y坐标，默认为10
        this.radius = radius || 10 //圆球的半径，默认为10
        this.speed = speed || 5 //圆球的移动速度，默认为5

        //向上移动
        this.moveUp = function () {
          this.y -= this.speed
          if (this.y < this.radius) {
            //防止超出上边界
            this.y = this.radius
          }
        }

        //向右移动
        this.moveRight = function () {
          this.x += this.speed
          var maxX = canvas.width - this.radius//画布的宽度 - 球的半径
          if (this.x > maxX) {//如果球的x坐标 > 最大右边界
            //防止超出右边界
            this.x = maxX
          }
        }

        //向左移动
        this.moveLeft = function () {
          this.x -= this.speed
          if (this.x < this.radius) { //x坐标 < 球的半径
            //防止超出左边界
            this.x = this.radius
          }
        }

        //向下移动
        this.moveDown = function () {
          this.y += this.speed
          var maxY = canvas.height - this.radius //画布的高度 - 圆的半径
          if (this.y > maxY) {
            //防止超出下边界
            this.y = maxY
          }
        }
      }

      //绘制小球
      function drawBall(ball) {
        if (typeof ctx != "undefined") {
          ctx.beginPath()
          ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2, false)
          ctx.fill()
        }
      }

      //清空canvas画布
      function clearCanvas() {
        if (typeof ctx != "undefined") {
          ctx.clearRect(0, 0, 400, 300)
        }
      }

      var ball = new Ball()
      //简单地检测当前浏览器是否支持Canvas对象，以免在一些不支持html5的浏览器中提示语法错误
      if (canvas.getContext) {
        //获取对应的CanvasRenderingContext2D对象(画笔)
        var ctx = canvas.getContext("2d")
        drawBall(ball)
      }

      //onkeydown事件的回调处理函数
      //根据用户的按键来控制小球的移动
      function moveBall(event) {
        switch (event.keyCode) {
          case 37: //左方向键
            ball.moveLeft()
            break
          case 38: //上方向键
            ball.moveUp()
            break
          case 39: //右方向键
            ball.moveRight()
            break
          case 40: //下方向键
            ball.moveDown()
            break
          default:
            //其他按键操作不响应
            return
        }

        clearCanvas() //先清空画布
        drawBall(ball) //再绘制最新的小球
      }
    </script>
  </body>
</html>