canvas

canvas介绍

是HTML5重要元素，不需要外部插件支持，提供了强大的图形处理功能，常用于移动端web的开发，基于现代浏览器都支持，IE8以下不支持。进行绘制，是通过context环境进行操作的。
坐标系：横轴向右为正，纵轴向下为正

代码及其作用

//1.获取canvas标签
let canvas = document.querySelector("canvas");
//2.获取canvas的上下文环境
let ctx = canvas.getContext('2d');

canvas不能在css样式里修改宽高，画布会被缩放
画布默认（300px * 150px）

基本图形绘制

绘制直线

context.beginPath() 开始绘制
context.moveTo(x,y) 设置起点
context.lineTo(x2,y2) 设置下一个点
context.closePath() 结束绘制
context.stroke() 描边绘制

绘制“眩晕环”

let canvas = document.querySelector("canvas");
    let ctx = canvas.getContext('2d');
    let sw = window.innerWidth;
    let sh = window.innerHeight;


    canvas.width = sw;
    canvas.height = sh;


    let timer = null;

    //绘制圆
    function Circle(obj) {
        this.x = obj.x;
        this.y = obj.y;
        this.r = 4;
        this.color = 'deepskyblue';
    }

    Circle.prototype.draw = function () {
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2, true);
        ctx.fillStyle = this.color;
        ctx.fill();
    }

    //自定义圆心
    let x = sw/2;
    let y = sh/2;
    let r = 250;


    let speed = Math.PI/180;
    let na = 0;

    timer = setInterval(() => {
        na += speed;
        r -= 0.05;
        if (r <= 0) {
            clearInterval(timer);
        }
        // if (na >= Math.PI*2) {
        //     r -=40;
        //     na = 0;
        //     if (r <= 0) {
        //         clearInterval(timer);
        //     }
        // }

        let cx = Math.cos(na) * r + x;
        let cy = Math.sin(na) * r + y;
        let c = new Circle({
           x:cx,
           y:cy
        })
        c.draw();
    },5)