likes
comments
collection
share

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

作者站长头像
站长
· 阅读数 38

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

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

1. 结构

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

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

2、圆心位置

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

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第三节,之后会持续更新,大家感觉还实用的话,关注或者点个赞都可以,谢谢啦

转载自:https://segmentfault.com/a/1190000041998251
评论
请登录