Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: Javascript HTML5
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 17-Apr-12 20:59pm
Edited 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)



Advertise | Privacy | Mobile
Web02 | 2.8.141015.1 | Last Updated 18 Apr 2012
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100