Click here to Skip to main content
15,886,137 members
Please Sign up or sign in to vote.
3.50/5 (2 votes)
See more:
hi

i am using the html5 along with javascript. here i want to achive the Rotating Circle , in html5 it is easy,ok actually problem arises with Images

I had Drawn the circle with 9 parts and sample code will be show in down
function drawRouletteWheel() {
               var canvas = document.getElementById("wheelcanvas");

               if (canvas.getContext) {
                   var outsideRadius = 250;
                   var textRadius = 160;
                   var insideRadius = 125;

                   ctx = canvas.getContext("2d");
                   ctx.clearRect(0, 0, 500, 500);


                   ctx.strokeStyle = "black";
                   ctx.lineWidth = 2;

                   ctx.font = 'bold 12px sans-serif';

                   for (var i = 0; i < 9; i++) {
                       var angle = startAngle + i * arc;
                       ctx.fillStyle = colors[i];

                       ctx.beginPath();
                       ctx.arc(250, 250, outsideRadius, angle, angle + arc, false);
                       ctx.arc(250, 250, insideRadius, angle + arc, angle, true);
                       ctx.stroke();
                       ctx.fill();

                       ctx.save();
                       ctx.shadowOffsetX = -1;
                       ctx.shadowOffsetY = -1;
                       ctx.shadowBlur = 0;
                       ctx.shadowColor = "rgb(220,220,220)";
                       ctx.fillStyle = "black";

                       ctx.translate(250 + Math.cos(angle + arc / 2) * textRadius, 250 + Math.sin(angle + arc / 2) * textRadius);
                                              ctx.rotate(angle + arc / 2 + Math.PI / 2);
                       var text = restaraunts[i];
                       ctx.fillText(text, -ctx.measureText(text).width / 2, 0);
                       ctx.restore();
                   }




so here i had 9 parts in circle so here i want to Fill each part with the different Image, that was to achive , i dont had much idea about adding the images to that particular each part in created circle.

please Help me out to add the Images to the Parts of the Circle
thankq in advanced.
Posted
Updated 18-Apr-12 1:29am
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900