使用HTML5 Canvas和jQuery绘制形状和线条

Question

我有一个即将推出的项目，我想使用HTML5 canvas元素来完成过去必须要完成的任务，无论是图像还是绝对节奏的div或Flash。这是概念的基本示例

以下是我的担忧：

1. 我可以使用带有圆角半径的div来创建圆圈，因为它们将被设计样式，我不确定我是否可以使用svg和canvas元素的混合来做到这一点。
2. 我主要担心的是将外圈连接到内部的笔划，我想用canvas进行此操作但不确定A）如何在一个包含元素的一个页面上获取多个canvas元素（包装div）和B）如何弄清楚起点，我会假设终点只是包装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;到了对象，并完成了。我希望这会有所帮助。