通過畫布製作圖像

我試圖做下一件事（我試圖通過CSS來做：http://jsfiddle.net/kyfha/74/，但用戶建議我通過畫布做到這一點）。通過畫布製作圖像

當用戶接管這一切的形狀，它會變成：

當用戶接管了這個形狀

，它會被改變，所以我通過帆布試着到圖像編號1.

如果在圖像編號2中他按下小灰圈，圖像將被更改爲：

如果他按下小lightblue圈，它會變成圖像號碼2

我試圖通過canvas，javascript和css使它和我得到的形狀。

我所要做的就是在灰色的形狀中間放一個淺藍色的圓圈（它總是在那裏），並在藍色形狀的末端放一個小的綠色圓圈。

藍色的形狀可以更長，更小或左側。

例如：

enter image description here

另外，當用戶按下小圓圈，我必須把在壓制小圓圈的線（對例如，圖像2和3）。

我將canvas定義爲：canvas（灰色形狀）和canvas2（灰色形狀內的藍色形狀）。

這是我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

非常感謝你！你幫了我很多！你真聰明！ –

通過畫布製作圖像

回答

相關問題