Блог

 // creates a blank image with 2d context
var createImage=function(w,h){var i=document.createElement("canvas");i.width=w;i.height=h;i.ctx=i.getContext("2d");return i;}

// create a canvas and add to dom
var can = createImage(512,512);
document.body.appendChild(can);
var ctx = can.ctx;

// create a image (canvas) to draw on the arc.
const textToDisplay = "<<Image on arc>>"

ctx.font = "64px arial";
var w = ctx.measureText(textToDisplay).width   8;
var text = createImage(w   64,84);
text.ctx.fillStyle = "#F90";
text.ctx.strokeStyle = "black";
text.ctx.lineWidth = 16;
text.ctx.fillRect(0,0,text.width,text.height);
text.ctx.strokeRect(0,0,text.width,text.height);
text.ctx.font = "64px arial";
text.ctx.fillStyle = "#0F0";
text.ctx.strokeStyle = "Black";
text.ctx.lineWidth = 4;
text.ctx.strokeText(textToDisplay,38,58);
text.ctx.fillText(textToDisplay,38,58);



// draws image on arc
// img image to render
// x,y  center of arc
// radius the inner edge (bottom of image) radius
// fromAng The angle to start drawing the image in radians
// toAng (optional if not given image width will be used to get toAng)
// returns undefined
function drawArcImage(img,x,y,radius,fromAng,toAng){
    
    // WARNING if you let the radius get to small the ratio between the inner and out circumference
    // gets very large. This will result in the image being stretched over a quintabazzilon pixels.
    // so must vet the radius or you will block the page and upset the browser gods.
    
    radius = Math.abs(radius); // only positive
    radius = radius < img.height / 8 ? img.height / 8 : radius;
    var outRad = radius   img.height;
    var cir = Math.PI * 2 * radius; // get inner circumference
    if(toAng === undefined){
        var toAng = (img.width / cir) * Math.PI * 2 ; // get the angle the image will cover
    }
    var cirOut = toAng * outRad;      // get the out edge distance in pixels
    var imgStep = img.width / cirOut; // the image step per slice
    var imgX = 0;                     // track the image line to draw
    var angStep = toAng / cirOut;     // the angle steps
    // For each pixel on the out edge draw a slice
    for(var i = 0; i < toAng; i  = angStep){
        var dx = Math.cos(fromAng   i);
        var dy = Math.sin(fromAng   i);
        // set up the transform to draw a slice from the inner to outer edges
        ctx.setTransform(dy,-dx,-dx,-dy,dx * radius   x,dy * radius   y); 
        // get and draw the slice. I stretch it a little (2pix) to cover imperfect rendering
        ctx.drawImage(img,imgX,0,imgStep,img.height,-1,-img.height,2,img.height);
        // move to next slice
        imgX  = imgStep;
    }
    ctx.setTransform(1,0,0,1,0,0);  // reset the transform
}


// animate the image to prove it is real.. LOL
var animTick = 0;
var animRate = 0.01;
var pos = 0;
// update function call via RAF
function update(){
    animTick  = animRate;   // update tick
    // random anim sin waves.
    var rad = Math.sin(animTick) * (256-text.height - 20)   20;
    pos  = Math.sin(animTick*10) * 0.02;
    pos  = Math.sin(animTick/ 3) * 0.02;
    pos  = Math.sin(animTick/ 7) * 0.05;
    // clear
    ctx.clearRect(0,0,can.width,can.height)
    // draw
    drawArcImage(text,256,256,rad,pos)
    // do again and again and again
    requestAnimationFrame(update);
}
update();