利用html5的canvas可以做出很多非常酷炫的效果，今天就利用canvas繪製一個見縫插針的小遊戲，遊戲效果如圖：

首先：
我們新建一個html檔案 使用canvas標籤

<canvas class="canvas" width="600" height="600px"></canvas>

畫布的大小 由個人決定 如果需要改變大小，小球的座標可能需要重新尋找。
接下來就開始寫javascript程式碼

定義接下來所需要的數值，大圓半徑，大圓的座標，連結大圓與小圓之間的線條長度，旋轉小球的半徑，關卡數，旋轉小球的陣列，等待小球的陣列，以及小球的數量和旋轉角度等；

var canvas = document.querySelector('.canvas');
var cxt = canvas.getContext('2d');
//var Rballs = parseInt(Math.random()*10+1);
//var RballWait = parseInt(Math.random()*20+1);

var arcX = 300; //大圓X
var arcY = 160;//大圓Y
var arcR = 30;//大圓半徑
var lineWidth = 100;//線條長度
var radius = 10;//小球半徑


//遊戲的等級 速度 等待小球
var LevelSpeed = [
    {
        "speed"
 
: 1,//速度
        "ballnum": 3,//旋轉小球
        "waitNum": 5//等待小球
    },
    {
        "speed": 1.5,
        "ballnum": 3,
        "waitNum": 6
    },
    {
        "speed": 2,
        "ballnum": 4,
        "waitNum": 7
    },
    {
        "speed": 2.5,
        "ballnum": 4,
        "waitNum": 7
    }
];

var
 
 balls = []; //定義一個旋轉的小球陣列
var waitBalls = []; //等待小球的陣列

//定義關卡
var level;
if (parseInt(window.location.href.split('#')[1])) {
    level = parseInt(window.location.href.split('#')[1]);
} else {
    level = 0;
}

var ballNum = LevelSpeed[level].ballnum;//定義旋轉小球的數量
var waitNum = LevelSpeed[level].waitNum;//定義等待小球的數量
var rotateAngle = LevelSpeed[level].speed;//定義旋轉的角度

繪製大圓和中間的關卡數

function ballBig() {
//大圓
    cxt.beginPath();
    cxt.arc(arcX, arcY, arcR, 0, Math.PI * 2);
    cxt.fillStyle = '#000';
    cxt.fill();
    cxt.closePath();
//字型
    cxt.fillStyle = '#fff';
    cxt.font = '30px 微軟雅黑';
    if (level == LevelSpeed.length) {
        level = LevelSpeed.length - 1;
    }
    var txt = (level + 1) + "";
    cxt.fillText(txt, arcX, arcY);
}

繪製旋轉的小球

function ballRotate() {
    cxt.clearRect(100, 20, 350, 280);
    ballBig();
    cxt.save();
    cxt.translate(arcX, arcY);
    balls.forEach(function (item) {
        cxt.save();
        cxt.rotate(Math.PI / 180 * item.angle);
        item.angle += rotateAngle;
        if (item.angle >= 360) item.angle = 0;
        //繪製小球和線條
        cxt.beginPath();
        cxt.moveTo(0, -arcR);
        cxt.lineTo(0, -(arcR + lineWidth));
        cxt.closePath();
        cxt.stroke();

        cxt.beginPath();
        cxt.arc(0, -(arcR + lineWidth), radius, 0, Math.PI * 2);
        cxt.fillStyle = '#000';
        cxt.fill();
        cxt.closePath();
        if (item.numStr != "") {
            cxt.fillStyle = '#fff';
            cxt.font = '10px 微軟雅黑';
            cxt.fillText(item.numStr, 0, -(arcR + lineWidth));
        }
        cxt.restore();
    });
    cxt.restore();
    window.requestAnimationFrame(ballRotate);
}

注意：在讓小球旋轉時，如果想要讓小球旋轉的更流暢，請使用
window.requestAnimationFrame();
此方法比定時函式流暢，不會出現卡頓的情況。每次旋轉開始不要忘記清空畫布。

繪製等待小球

//繪製等待小球
function ballWait() {
    //清空小球的等待區域
    cxt.clearRect(arcX - radius, 270, 20, 360);
    waitBalls.forEach(function (item, index) {
        cxt.save();
        cxt.beginPath();
        cxt.arc(arcX, arcY + lineWidth + arcR + radius * 3 + (radius * index * 2), radius, 0, Math.PI * 2);
        cxt.fillStyle = '#000';
        cxt.fill();
        cxt.fillStyle = '#fff';
        cxt.font = '10px 微軟雅黑';
        cxt.fillText(item.numStr, arcX, arcY + lineWidth + radius * 3 + arcR + (radius * index * 2));
        cxt.closePath();
        cxt.restore();
    })
}

當一切準備就緒時，我們最後需要的就是，通過點選畫布，來讓等待中的小球插入到旋轉中的小球中去，從而來實現我們的遊戲。

canvas.onclick = function () {
    //刪除等待小球，並且把刪除的小球插入到轉動小球的末尾處
    var obj = waitBalls.shift();
    if (waitBalls.length != 0) {
        //更改小球的角度
        obj.angle = 180;
        //判斷小球之間是否碰撞
        for (var i = 0; i < balls.length; i++) {
            if (balls[i].angle >= 171 && balls[i].angle <= 189) {
                alert('遊戲失敗');
                window.location.href = "index.html#" + level;
            }
        }
        balls.push(obj);
    } else if (waitBalls.length == 0) {
        alert('闖關成功！');
        level++;
        window.location.href = "index.html#" + level;
    }
    ballWait();
};

這裡主要用到了陣列的兩個方法：shift（）；和 push（）；
完整的程式碼請到GitHub上取：
使用canvas繪製見縫插針小遊戲
裡面寫好了遊戲的開始和結束。
如遊戲有不足之處請自行修改。