javascript 使用 HTML5 Canvas 和 jQuery 绘制形状和线条
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9485238/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Drawing shapes and lines with HTML5 Canvas and jQuery
提问by Dirty Bird Design
I have an upcoming project that I would like to use the HTML5 canvas element to accomplish what would have had to be done in the past with either images and absolutely paced div's or Flash. Here is a basic example of the concept
我有一个即将到来的项目，我想使用 HTML5 画布元素来完成过去必须使用图像和绝对节奏的 div 或 Flash 完成的工作。这是该概念的基本示例
Here are my concerns:
以下是我的担忧：
- I am ok with using div's with corner radius to create the circles as they will be styled, and I'm not sure if I can do that with a mix of svg and the canvas element.
- My main concern is the stroke that joins the outer circles to the inner, I would like to do this with canvas but am not sure A) How to get multiple canvas elements on one page in one containing element (a wrapper div) and B) how to figure out the starting points, I would assume the ending point would just be the center of the wrapper div (IE if its 600x600 = x=300, y=300)
- 我可以使用带有圆角半径的 div 来创建圆圈，因为它们将被设置样式，我不确定我是否可以混合使用 svg 和 canvas 元素来做到这一点。
- 我主要关心的是将外圈连接到内圈的笔画，我想用画布来做这个，但我不确定 A）如何在一个包含元素（包装器 div）和 B 的一个页面上获取多个画布元素如何找出起点，我会假设终点只是包装器 div 的中心（即如果它的 600x600 = x=300, y=300）
Can anyone shed some light on this and offer any suggestions? Is there an advantage to using any of the jQuery canvas plugiins over vanilla JS?
任何人都可以对此有所了解并提供任何建议吗？与 vanilla JS 相比，使用任何 jQuery 画布插件是否有优势？
thank you!
谢谢！
回答by pimvdb
The canvas API consists of some functions which seem to do the job just fine:
画布 API 包含一些似乎可以很好地完成工作的函数：
.moveTo/.lineTofor a line path.arcfor a circle path.stroketo stroke a path (line).fillto fill a path (circle)
.moveTo/.lineTo对于线路径.arc对于圆形路径.stroke抚摸路径（线）.fill填充路径（圆圈）
Here's a very trivial proof of concept: http://jsfiddle.net/eGjak/275/.
这是一个非常简单的概念证明：http: //jsfiddle.net/eGjak/275/。
I've used (x, y)for both the lines and the circles, which means the lines go from and to the midpoint of two circles. ris the radius of a circle.
我已经用过(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);
});?
回答by Bshred8
You could just do all of these circles in CSS. Get some divs, style them as you like in CSS, and then apply border-radius: 100; to the object, and done. I hope this helped.
你可以在 CSS 中完成所有这些圆圈。获取一些 div，在 CSS 中按照你喜欢的方式设置它们的样式，然后应用 border-radius: 100; 到对象，并完成。我希望这有帮助。
