canvas基础3 - 点阵式数据结构

canvas基础3 - 点阵式数据结构

本文是canvas基础2 - arc - 画弧线，通俗易懂，小白也没烦恼，根据慕课网liuyubobobo老师的视频课学习整理
视频课指路：慕课网 liuyubobobo老师 炫丽的倒计时效果Canvas绘图与动画基础

1. 结构

• 1代表实心
• 0代表空心

2、圆心位置

3、对屏幕画布进行刷新

context.clearRect(0, 0, WINDOW_WIDTH, WINDOW_HEIGHT)

4、canvas小球物理实验

<canvas id="canvas" style="background-color: rgb(200,200,200);display: block;margin: 20px auto;">
    当前浏览器不支持canvas，请更换浏览器后再试
</canvas>
<script>
    var ball = {
      x: 512,
      y: 100,
      r: 20,
      g: 2, //加速度
     vx: -4, //在x轴速度
     vy: 0, //在y轴速度
     color: '#058'
    }
    var canvas = document.getElementById('canvas')
    canvas.width = 1024
    canvas.height = 768
    if (canvas.getContext('2d')) {
      var context = canvas.getContext('2d')
      
      setInterval(function () {
        render(context)
        update()
      }, 50)
    }
    
    function update() {
      ball.x += ball.vx
      ball.y += ball.vy
      ball.vy += ball.g
    
      if (ball.y >= 768 - ball.r) {
        ball.y = 768 - ball.r
        ball.vy = -ball.vy * 0.5 // 添加摩擦系数
      }
    }
    
    function render(cxt) {
      cxt.clearRect(0, 0, cxt.canvas.width, cxt.canvas.height)
    
      cxt.fillStyle = ball.color
      cxt.beginPath()
      cxt.arc(ball.x, ball.y, ball.r, 0, 2 * Math.PI)
      cxt.closePath()
    
      cxt.fill()
    }
</script>

总结

本文为canvas第三节，之后会持续更新，大家感觉还实用的话，关注或者点个赞都可以，谢谢啦