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>