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

【问题标题】：Drawing shapes and lines with HTML5 Canvas and jQuery使用 HTML5 Canvas 和 jQuery 绘制形状和线条
【发布时间】：2012-03-18 02:52:02
【问题描述】：

我有一个即将进行的项目，我想使用 HTML5 画布元素来完成过去必须使用图像和绝对节奏的 div 或 Flash 完成的工作。这是该概念的基本示例

这是我的担忧：

我可以使用带圆角半径的 div 来创建圆形，因为它们将被设置样式，但我不确定是否可以混合使用 svg 和 canvas 元素。
我主要关心的是连接外圈和内圈的笔划，我想用画布做到这一点，但不确定 A）如何在一个包含元素的一页上获取多个画布元素（包装 div）和 B）如何找出起点，我假设终点只是包装 div 的中心（即，如果它的 600x600 = x=300，y=300）

任何人都可以对此有所了解并提供任何建议吗？使用任何 jQuery 画布插件比 vanilla JS 有优势吗？

谢谢！

【问题讨论】：

标签： javascript jquery html svg html5-canvas

【解决方案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);
});

【讨论】：

太棒了！如何将内容添加到圈子？是否可以向它们添加一个 id 然后 $("#ID").html(stuff)？
@Dirty Bird Design：不，使用画布，您最终只会得到某些像素已着色，而没有其他内容（没有元素等）。如果您想要各种交互，那么画布可能不是要走的路。
我很感激这个教训！我将研究为线条混合画布元素，并使用 css 设置构成圆圈的 div 样式。

【解决方案2】：

您可以在 CSS 中完成所有这些圆圈。获取一些 div，在 CSS 中根据需要设置样式，然后应用border-radius: 100;到对象，并完成。我希望这会有所帮助。

【讨论】：