CODEWITHSUNDEEP
javascriptcsscanvas
Alon Shmiel
Alon Shmiel

Reputation: 7121

Make an image via canvas

I am trying to make the next thing (I tried to do it via css: http://jsfiddle.net/kyfha/74/ but the users suggested me to do it via canvas). so I tried via canvas:

IMAGE 1

when the user overs all this shape, it will be changed to:

IMAGE 2

when the user overs out this shape, it will be changed to the image number 1.

if, in image number 2, he presses the small gray circle, the image will be changed to:

IMAGE 3

if he presses the small lightblue circle, it will be changed to image number 2.

I tried to make it via canvas, javascript and css and I got the shapes.

what I have to do is to put a lightBlue circle in the middle of the gray shape (it will be always there) and put a small green circle in the end of the blue shape.

the blue shape can be more longer, smaller or to the left side.

for example:

enter image description here

enter image description here

enter image description here

In addition, when the user presses the small circles, I have to put a line in the pressed small circle (for example, image 2 and 3).

I defined to canvas: canvas (the gray shape) and canvas2 (the blue shape inside the gray shape).

this is my jsfiddle:

http://jsfiddle.net/Ht6Ym/2250/

this is my html:

<div>
    <canvas id="myCanvas" width="578" height="250" style="position: absolute;">
    </canvas>
    <canvas id="myCanvas2" width="578" height="250" style="position: absolute;">
    </canvas>
</div>

<a href="#" class="button">Hello</a>

<a href="#" class="css-shapes-preview">Bye</a>

any help appreciated!!

Upvotes: 1

Views: 98

Answers (1)

markE
markE

Reputation: 105015

I'm not quite sure why, but I was intrigued with your design, So................

Here's some help drawing your canvas shapes entirely within canvas.

Demo: http://jsfiddle.net/m1erickson/c4upM/

enter image description here

To make any shape clickable, check out context.isPointInPath to do hit-testing. I leave the interactivity up to you.

Good luck with your project!

Code: 

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    #canvas{border:1px solid red;}
</style>

<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    var cx=150;
    var cy=100;
    var radius=75;
    var linewidth=15;
    var PI=Math.PI;

    roundRect("Bye");
    grayArc("gray");
    blueArc("blue",PI*1.25,PI*1.5);
    circleInArc("skyblue",PI*1.5);
    lineThruArc("skyblue",PI*1.5);
    circleInArc("lightgray",PI*1.25);
    lineThruArc("lightgray",PI*1.25);

    cy+=150;
    lightblueCircle("Hello");
    grayArc("gray");
    blueArc("blue",PI*1.25,PI*1.5);
    circleInArc("skyblue",PI*1.5);
    lineThruArc("skyblue",PI*1.5);
    circleInArc("lightgray",PI*1.25);
    lineThruArc("lightgray",PI*1.25);

    function grayArc(strokeColor){
        ctx.beginPath();
        ctx.arc(cx,cy,radius,Math.PI,Math.PI*2);
        ctx.lineWidth=linewidth;
        ctx.strokeStyle=strokeColor;
        ctx.stroke();
    }

    function blueArc(strokeColor,radianStart,radianEnd){
        ctx.beginPath();
        ctx.arc(cx,cy,radius,radianStart,radianEnd);
        ctx.lineWidth=linewidth;
        ctx.strokeStyle=strokeColor;
        ctx.stroke();
    }

    function circleInArc(fillColor,radianAngle){
        var x=cx+radius*Math.cos(radianAngle);
        var y=cy+radius*Math.sin(radianAngle);
        ctx.beginPath();
        ctx.arc(x,y,linewidth/2,0,Math.PI*2);
        ctx.closePath();
        ctx.fillStyle=fillColor;
        ctx.fill();
    }

    function lineThruArc(strokeColor,radianAngle){
        var length=40;
        var x1=cx+(radius-length/2)*Math.cos(radianAngle);
        var y1=cy+(radius-length/2)*Math.sin(radianAngle);
        var x2=cx+(radius+length/2)*Math.cos(radianAngle);
        var y2=cy+(radius+length/2)*Math.sin(radianAngle);
        ctx.beginPath();
        ctx.moveTo(x1,y1);
        ctx.lineTo(x2,y2);
        ctx.strokeStyle=strokeColor;
        ctx.lineWidth=2;
        ctx.stroke();
    }

    function lightblueCircle(text){
        ctx.beginPath();
        ctx.arc(cx,cy,radius-25,0,Math.PI*2);
        ctx.closePath();
        ctx.fillStyle="skyblue";
        ctx.fill();
        ctx.fillStyle="white";
        ctx.font="18px verdana";
        var halfWidth=ctx.measureText(text).width/2
        ctx.fillText(text,cx-halfWidth,cy);
    }

    function roundRect(text){
        var x=cx-radius+20;
        var y=cy-25-5;
        var width=radius*2-40;
        var height=radius*.66;
        var cornerRadius=15;
        ctx.beginPath();
        ctx.moveTo(x+cornerRadius,y);
        ctx.lineTo(x+width-cornerRadius,y);
        ctx.quadraticCurveTo(x+width,y,x+width,y+cornerRadius);
        ctx.lineTo(x+width,y+height-cornerRadius);
        ctx.quadraticCurveTo(x+width,y+height,x+width-cornerRadius,y+height);
        ctx.lineTo(x+cornerRadius,y+height);
        ctx.quadraticCurveTo(x,y+height,x,y+height-cornerRadius);
        ctx.lineTo(x,y+cornerRadius);
        ctx.quadraticCurveTo(x,y,x+cornerRadius,y);
        ctx.closePath();
        ctx.fillStyle="skyblue";
        ctx.fill();
        ctx.fillStyle="white";
        ctx.font="18px verdana";
        var halfWidth=ctx.measureText(text).width/2
        ctx.fillText(text,cx-halfWidth,cy);
    }


}); // end $(function(){});
</script>

</head>

<body>
    <canvas id="canvas" width=300 height=325></canvas>
</body>
</html>

Upvotes: 3

Related Questions