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

Question

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

Here are my concerns:

1. 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.
2. 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)

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?

thank you!

Answer 1

The canvas API consists of some functions which seem to do the job just fine:

• .moveTo / .lineTo for a line path
• .arc for a circle path
• .stroke to stroke a path (line)
• .fill to fill a path (circle)

Here's a very trivial proof of concept: 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. r is the radius of a circle.

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

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.