javascript - Drawing shapes and lines with HTML5 Canvas and jQuery - Stack Overflow

admin管理员组

文章数量:1403506

I have an uping project that I would like to use the HTML5 canvas element to acplish 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!

I have an uping project that I would like to use the HTML5 canvas element to acplish 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!

• javascript
• jquery
• html
• svg
• html5-canvas

Share Improve this question Follow asked Feb 28, 2012 at 15:56 Dirty Bird DesignDirty Bird Design 5,5531313 gold badges6767 silver badges127127 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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/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);
});​

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.

本文标签： javascriptDrawing shapes and lines with HTML5 Canvas and jQueryStack Overflow