画布canvas基础 01

1. 什么是canvas

canvas是用来绘制图形的.它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。

<canvas width="500" height="500">
当前的浏览器版本不支持，请升级浏览器
</canvas>

判断浏览器是否支持画布 cnavas

canvas的标签属性只有两个，width和height，表示的是canvas画布的宽度和高度，不要用css来设置，而是用属性来设置，画布会失真变形。

标签的innerContent是用来提示低版本浏览器（IE6、7、8）并不能正常使用canvas，高版本的浏览器是看不到canvas标签内部的文字的。

上下问 -- 2d的上下文和3d的上下文

// 得到画布的上下文，上下文有两个，2d的上下文和3d的上下文

// 所有的图像绘制都是通过ctx属性或者是方法进行设置的，和canvas标签没有关系了

const ctx = myCanvas.getContext("2d")

if(ctx !== null) {

// 设置颜色

ctx.fillStyle = 'green'

// 绘制矩形

ctx.fillRect(100, 100, 200, 50)

}

绘制一个天空蓝的矩形

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <canvas id="context" width="500" height="600">当前的浏览器版本不支持，请升级浏览器</canvas>

    <script >

        const dom  = document.querySelector("#context");

        // console.log(dom.getContext);

        if(!dom.getContext) {

            alert("当前浏览器不支持")

        }

        const ctx = dom.getContext("2d");  // 获取2D上下文

        if(ctx != null) {

            ctx.fillStyle = "skyblue";  // 设置颜色

            // 绘制图形

            ctx.fillRect(100,100,100,100);

        }

    </script>

</body>

</html>

通过上面的代码我们发下canvas本质上就是利用代码在浏览器的页面上进行画画，比如上面的代码fillRect就代表在页面中绘制矩形，一共四个属性，前两个100，100代表(x, y), 即填充起始位置，200代表宽，50代表高，单位都是px。

canvas轻量化和flash重量化的比较

轻量化的原因：不能修改了，只能重新清除所有内容，然后重新渲染。

我们用canvas绘制了一个图形，一旦绘制成功了，canvas就像素化了他们。canvas没有能力，从画布上再次得到这个图形，也就是我们没有能力去修改已经在画布上的内容，这个就是canvas比较轻量的原因，Flash重的原因之一就有它可以通过对应的api得到已经上“画布”的内容然后再次绘制

如果我们想要这个canvas图形移动，必须按照：清屏——更新——渲染的逻辑进行编程。总之，就是重新再画一次

canvas的动画思想

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <canvas id="context" width="500" height="600">当前的浏览器版本不支持，请升级浏览器</canvas>

    <script >

        const dom  = document.querySelector("#context");

        // console.log(dom.getContext);

        if(!dom.getContext) {

            alert("当前浏览器不支持")

        }

        const ctx = dom.getContext("2d");  // 获取2D上下文

        if(ctx != null) {

            ctx.fillStyle = "skyblue";  // 设置颜色

            // 绘制图形

            let left = -200;

            setInterval(() => {

            // 清除画布,0,0代表从什么位置开始,600,600代表清除的宽度和高度

                ctx.clearRect(0,0,600,600); // 清屏

                // 更新信号量

                left++

                // 如果已经走出画布，则更新信号量为初始位置

                if(left > 600) {

                    left = -200

                }

                ctx.fillRect(left, 100, 200, 200)

            },10)

        }

    </script>

</body>

</html>

实际上，动画的生成就是相关静态画面连续播放，这个就是动画的过程。我们把每一次绘制的静态话面叫做一帧，时间的间隔（定时器的间隔）就是表示的是帧的间隔。

使用面向对象的思维制作动画

// 得到画布

const myCanvas:HTMLCanvasElement = document.getElementById("main_canvas") as HTMLCanvasElement

// 获取上下文

const ctx = myCanvas.getContext("2d")

class Rect {

    // 维护状态

    constructor(

        public x: number,

        public y: number,

        public w: number,

        public h: number,

        public color: string

    ) {

    }

    // 更新的方法

    update() {

        this.x++

        if(this.x > 600) {

            this.x = -200

        }

    }

    // 渲染

    render(ctx: CanvasRenderingContext2D) {

        // 设置颜色

        ctx.fillStyle = this.color

        // 渲染

        ctx.fillRect(this.x, this.y, this.w, this.h)

    }

}

// 实例化

let myRect1: Rect = new Rect(-100, 200, 100, 100, 'purple')

let myRect2: Rect = new Rect(-100, 400, 100, 100, 'pink')

// 动画过程

// 更新的办法

setInterval(() => {

    // 清除画布,0,0代表从什么位置开始,600,600代表清除的宽度和高度

    if(ctx !== null) {

        // 清屏

        ctx.clearRect(0,0,600,600)

        // 更新方法

        myRect1.update()

        myRect2.update()

        // 渲染方法

        myRect1.render(ctx)

        myRect2.render(ctx)

    }

},10)