我有一个即将到来的项目,我想使用HTML5 canvas元素来完成过去必须使用图像和绝对步距div或Flash进行的操作。这是该概念的基本示例
这是我的担忧:
我可以使用带有圆角半径的div来创建将要设置样式的圆,并且我不确定是否可以将svg和canvas元素混合使用。
我主要关心的是将外部圆圈连接到内部圆圈的笔触,我想使用画布来完成此操作,但不确定如何计算起点,我假设终点将只是包装div的中心(即,如果600x600 = x = 300,y = 300,则为IE)
谁能对此有所启发并提出建议?与香草JS相比,使用任何jQuery canvas插件有优势吗?
谢谢!
最佳答案
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);
});