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