关于前端: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 第三节，之后会继续更新，大家感觉还实用的话，关注或者点个赞都能够，谢谢啦