探究JS Canvas庫

一、Canvas簡介

Canvas是HTML5中新增的一個標準組件，它提供了一種在網頁上繪製圖形的方式，通過在JavaScript中繪製2D圖像或利用WebGL的API製作3D場景。Canvas提供了非常豐富的繪圖能力，可以畫線、矩形、弧線、曲線、文本、圖像等，還支持多種動畫、交互效果和圖形變換，是實現Web應用高品質可視化效果的關鍵技術之一。

二、Canvas組成

Canvas是由HTML的canvas標籤和JavaScript的API組成的。HTML5規定了canvas標籤的width和height屬性的默認值分別為300和150，表示畫布的大小。在canvas中，每個像素由一個或多個位元組組成，可以通過ImageData對象讀取或修改像素的值。

    <canvas id="myCanvas" width="500" height="500"></canvas>
    <script>
        var canvas = document.getElementById('myCanvas');
        var ctx = canvas.getContext('2d');
        ctx.fillStyle = 'red';
        ctx.fillRect(0, 0, 50, 50);
    </script>

三、Canvas繪圖基礎

在Canvas中，繪製圖形需要用到CanvasRenderingContext2D對象，簡稱為ctx，通過調用該對象的方法來繪製圖形。比如，通過調用fillRect(x, y, width, height)方法繪製一個填充的矩形，並通過設置fillStyle屬性來設置顏色。

    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');
    ctx.fillStyle = 'red';
    ctx.fillRect(0, 0, 50, 50);

四、Canvas繪製圖形

Canvas可繪製多種圖形，以下是其中一些的繪製方法。

1. 繪製矩形

使用fillRect(x, y, width, height)方法繪製填充的矩形，rect(x, y, width, height)方法繪製矩形路徑，strokeRect(x, y, width, height)方法繪製矩形邊框。

    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');
    ctx.fillStyle = 'red';
    ctx.fillRect(0, 0, 50, 50);
    ctx.rect(100, 0, 50, 50);
    ctx.strokeRect(200, 0, 50, 50);

2. 繪製圓形

使用arc(x, y, radius, startAngle, endAngle, anticlockwise)方法繪製圓形路徑，並通過設置fillStyle屬性來設置顏色，並使用fill()方法填充顏色。

    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');
    ctx.beginPath();
    ctx.fillStyle = 'red';
    ctx.arc(75, 75, 50, 0, Math.PI * 2, true);
    ctx.fill();

3. 繪製直線

使用moveTo(x, y)方法設置直線的起點，使用lineTo(x, y)方法繪製直線，並通過設置strokeStyle屬性來設置顏色。

    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');
    ctx.beginPath();
    ctx.strokeStyle = 'red';
    ctx.moveTo(0, 100);
    ctx.lineTo(200, 100);
    ctx.stroke();

五、Canvas動畫效果

Canvas不僅可以繪製靜態的圖形，還可以實現動畫效果。Canvas的動畫實際上是通過在畫布上連續地繪製多幅圖像，形成動態變化的效果。

1. 實現動畫基本原理

實現動畫的基本原理是通過設置一個定時器，每隔一段時間重新繪製新圖像，從而實現畫布上圖像變換的效果。

    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');
    var x = 0;
    setInterval(function(){
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.fillStyle = 'red';
        ctx.fillRect(x, 0, 50, 50);
        x += 5;
    }, 50);

2. 實現簡單動畫效果

使用Canvas可以實現各種複雜的動畫效果，其中比較簡單的動畫效果包括移動、旋轉、縮放等。比如，實現一個移動方塊的動畫效果。首先，在畫布上繪製一個方塊，並使用requestAnimationFrame()方法來實現動畫。

    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');
    var x = 0;
    function draw() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.fillStyle = 'red';
        ctx.fillRect(x, 0, 50, 50);
        x += 5;
        requestAnimationFrame(draw);
    }
    requestAnimationFrame(draw);

3. 實現複雜動畫效果

使用Canvas可以實現各種複雜動畫效果，比如漸變、閃爍、路徑運動等。以下是一個簡單的使用貝塞爾曲線實現的動畫效果。

    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');

    var startX = 50;
    var startY = 200;
    var endX = 450;
    var endY = 200;
    var controlX = 250;
    var controlY = -100;

    var t = 0;

    function draw() {
        t += 0.002;
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.beginPath();
        ctx.lineWidth = 5;
        ctx.strokeStyle = 'red';

        ctx.moveTo(startX, startY);
        quadraticBezierCurve(startX, startY, endX, endY, controlX, controlY, t);

        ctx.stroke();
        if(t < 1) {
            requestAnimationFrame(draw);
        }
    }
    requestAnimationFrame(draw);

    function quadraticBezierCurve(startX, startY, endX, endY, controlX, controlY, t) {
        var x = Math.pow((1-t), 2)*startX + 2*(1-t)*t*controlX + Math.pow(t, 2)*endX;
        var y = Math.pow((1-t), 2)*startY + 2*(1-t)*t*controlY + Math.pow(t, 2)*endY;
        ctx.lineTo(x, y);
    }

六、Canvas與其他庫的結合

Canvas可以與其他庫結合使用，實現更強大的功能。比如，與D3.js結合使用可以繪製各種複雜圖表，與three.js結合使用可以實現3D圖像渲染，與拖拽庫結合使用可以實現拖拽功能等。

1. 與D3.js結合使用

以下是一個使用D3.js和Canvas結合繪製柱狀圖的示例代碼：

    var data = [1, 2, 3, 4, 5];
    var canvas = d3.select('body').append('canvas').attr('width', 500).attr('height', 500).node();
    var ctx = canvas.getContext('2d');
    var x = 50;
    var y = 450;
    var width = 50;
    var height;
    var padding = 10;
    for(var i = 0; i < data.length; i++) {
        height = data[i] * 50;
        ctx.fillStyle = 'red';
        ctx.fillRect(x, y - height, width, height);
        x += width + padding;
    }

2. 與three.js結合使用

以下是一個使用three.js和Canvas結合繪製3D立方體的示例代碼：

    var canvas = document.getElementById('myCanvas');
    var renderer = new THREE.WebGLRenderer({canvas: canvas});
    renderer.setClearColor(0x000000);

    var scene = new THREE.Scene();

    var geometry = new THREE.BoxGeometry(100, 100, 100);
    var material = new THREE.MeshBasicMaterial({color:0xffffff, wireframe:true});

    var cube = new THREE.Mesh(geometry, material);
    scene.add(cube);

    camera = new THREE.PerspectiveCamera(45, canvas.width / canvas.height, 1, 1000);
    camera.position.z = 200;

    var clock = new THREE.Clock();

    function render() {
        var delta = clock.getDelta();
        cube.rotation.x += 2 * delta;
        cube.rotation.y += 2 * delta;
        renderer.render(scene, camera);
        requestAnimationFrame(render);
    }
    requestAnimationFrame(render);

七、總結

Canvas作為HTML5的基本組件之一，提供了豐富的繪圖功能和動畫效果，並且可以與其他庫結合使用。通過學習和使用Canvas，既可以提高Web應用的可視化效果，也可以拓展自己的技術能力。