Question

我正在努力做下一件事（我试图通过css：http://jsfiddle.net/kyfha/74/来做，但用户建议我通过画布来做）。所以我试过画布：

当用户超出所有这些形状时，它将更改为：

当用户超出此形状时，它将更改为图像编号1。

如果在图像编号2中按下小灰色圆圈，图像将变为：

如果他按下小的浅蓝色圆圈，它将变为图像编号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>

任何帮助表示赞赏!!

Answer 1

我不太清楚为什么，但我对你的设计很感兴趣，所以................

这里有一些帮助在画布中完全绘制画布形状。

演示：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>

通过画布制作图像

1 个答案: