Сделайте снимок с изображения

Я пытаюсь сделать следующее (я попытался сделать это через css: http://jsfiddle.net/kyfha/74/, но пользователи предложили мне сделать это с помощью холста). поэтому я попытался с помощью холста:Сделайте снимок с изображения

, когда за кадром пользователя все это формы, оно будет изменено на:

когда пользователь кадром эту форму, он будет изменен к изображению номер 1.

если на изображении № 2 он нажимает маленький серый круг, изображение будет изменено на:

, если он прижимает маленький LightBlue круг, он будет изменен на номер изображений 2.

Я пытался сделать это с помощью canvas, javascript и css и я получил форму.

Что мне нужно сделать, это поставить светлый круг в середине серой формы (он будет всегда там) и положить небольшой зеленый круг в конце синей формы.

Синяя форма может быть более длинной, меньшей или с левой стороны.

, например:

enter image description here

Кроме того, когда пользователь нажимает на кружочки, я должен поместить строку в прессованном малом круге (для пример, изображение 2 и 3).

Я определил для холста: холст (серая форма) и холст2 (синяя форма внутри серой формы).

это мой jsfiddle:

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

это мой 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>

любая помощь приветствуется !!

источник

2013-12-12 Alon Shmiel

Я не совсем уверен, почему, но я был заинтригован с вашим дизайном, так ................

Вот некоторая помощь рисования холст формы полностью внутри холста.

Демо: http://jsfiddle.net/m1erickson/c4upM/

enter image description here

Чтобы сделать любую форму кликабельным, проверить context.isPointInPath сделать хит-тестирования. Я оставляю интерактивность до вас.

Удачи вам в вашем проекте!

Код:

<!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>

источник

2013-12-12 22:10:54 markE

большое спасибо !! Вы мне очень помогли! ты такой умный! –

Сделайте снимок с изображения

ответ

Смежные вопросы