我有一个即将到来的项目,我想使用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);
});​

10-05 20:17
查看更多