使用HTML5 Canvas和jQuery繪制形狀和線條

Question

我有一個即將推出的項目，我想使用HTML5 canvas元素來完成過去必須要做的事情，無論是圖像還是絕對節奏的div或Flash。 這是該概念的基本示例

以下是我的擔憂：

1. 我可以使用帶有圓角半徑的div來創建圓圈，因為它們將被設計樣式，我不確定我是否可以使用svg和canvas元素的混合來做到這一點。
2. 我主要擔心的是將外圈連接到內部的筆划，我想用canvas進行此操作但不確定A）如何在一個包含元素（包裝div）和B）的一個頁面上獲取多個canvas元素如何弄清楚起點，我會假設終點只是包裝div的中心（IE如果600x600 = x = 300，y = 300）

任何人都可以對此有所了解並提供任何建議嗎？ 使用任何jQuery canvas插件而不是vanilla JS是否有優勢？

謝謝！

Answer 1

canvas API包含一些似乎可以正常工作的函數：

• .moveTo / .lineTo表示行路徑
• .arc為圓形路徑
• .stroke描邊路徑（線）
• .fill填充路徑（圓圈）

這是一個非常簡單的概念證明： http ： //jsfiddle.net/eGjak/275/ 。

我已經將(x, y)用於線條和圓圈，這意味着線條從兩個圓圈的中點開始。 r是圓的半徑。

var ctx = $('#cv').get(0).getContext('2d');

var circles = [ // smaller circles
    { x:  50, y:  50, r: 25 },
    { x: 250, y:  50, r: 25 },
    { x: 250, y: 250, r: 25 },
    { x:  50, y: 250, r: 25 },
];

var mainCircle = { x: 150, y: 150, r: 50 }; // big circle

function drawCircle(data) {
    ctx.beginPath();
    ctx.arc(data.x, data.y, data.r, 0, Math.PI * 2); // 0 - 2pi is a full circle
    ctx.fill();
}

function drawLine(from, to) {
    ctx.beginPath();
    ctx.moveTo(from.x, from.y);
    ctx.lineTo(to.x, to.y);
    ctx.stroke();
}

drawCircle(mainCircle); // draw big circle

$.each(circles, function() { // draw small circles and lines to them
    drawCircle(this);
    drawLine(mainCircle, this);
});​

Answer 2

你可以在CSS中完成所有這些圈子。 獲取一些div，在CSS中根據需要設置樣式，然后應用border-radius：100; 到了對象，並完成了。 我希望這有幫助。