H5新特新--canvas

canvas

描述：canvas标签是H5版本中提出的新标签

目的：替换像flash等其他做动画或游戏的插件的一个标签，能够大大减小页面的结构大小。让页面加载速度变快。

 说明:

• canvas标签可以理解为一个‘div’

只不过div是存放元素的，而canvas则是提供了一个区域用来绘制图形。

• canvas标签习惯上在标签内部对其大小进行设置

<canvas  width=’300’  height=’300’>您的浏览器不支持canvas标签，请变更支持cnavas标签的浏览器</canvas>

• canvas标签本身就是一个普通的画板，除此之外没有任何多余的功能

内部的多有内容或图形都需要通过js脚本来完成。

使用：

首先创建canvas画布，而如果想要在画布上进行操作，则需要通过脚本来创建一个‘画家’，来帮助我们进行内容绘制。

画家的生成：

Var huaban=document.querySelector(‘canvas’);

Var ctx=huaban.getContext(‘2d’);

示例：

canvas {
            border: 1px solid;
        }
           

<canvas width="300" height="300">您的浏览器不支持canvas标签，请更换支持canvas标签的浏览器</canvas>
           

<script>
        var huaban = document.querySelector('canvas');
        var ctx = huaban.getContext('2d');

        ctx.fillRect(10, 20, 50, 100); //绘制实心是矩形
        // ctx.strokeRect(10, 20, 50, 50);//绘制空心的矩形
</script>
           

特征：

上屏即像素化（内部绘制的图形一旦完成，就不能更改）

1. 绘制矩形方法：ctx.fillRect(左上角横坐标,左上角纵坐标,矩形宽度，矩形高度);
2. 设置画笔的颜色：ctx.fillStyle=’颜色’;
3. 察除矩形方法：ctx.clearRect(左上角横坐标,左上角纵坐标,察除宽度，察除高度);

示例：

canvas {
            border: 1px solid;
        }
           

<canvas width="300" height="300">您的浏览器不支持canvas标签，请更换支持canvas标签的浏览器</canvas>
           

<script>
    // fps  30 40 20 15  60
        // 描述：frame  per second（每秒/每帧要加载的画面）
        // 公式：1s/帧数=间隔调用时间                                                             

        var huaban = document.querySelector('canvas');
        var ctx = huaban.getContext('2d');

        var distance = 10;

        var fangxiang = 1; //用来控制方向   +1代表向右  -1代表向左

        var timer = setInterval(function() {
            // 正向移动/向右移动
            if (distance == 0) {
                fangxiang = 1;
            }

            // 反向移动/向左移动
            if (distance == 250) {
                fangxiang = -1;
            }

            //根据方向进行位移
            switch (fangxiang) {
                case 1:
                    {
                        // 擦除画布
                        ctx.clearRect(0, 0, 300, 300);

                        // 修改颜色
                        ctx.fillStyle = 'blue';

                        // 运动
                        ctx.fillRect(++distance, 50, 50, 50);
                    }
                    break;
                case -1:
                    {
                        // 擦除画布
                        ctx.clearRect(0, 0, 300, 300);

                        // 修改颜色
                        ctx.fillStyle = 'orange';

                        // 运动
                        ctx.fillRect(--distance, 50, 50, 50);
                    }
                    break;
            }


        }, 25);
</script>