个人中心
gpt4 book ai didi

javascript - 通过 Canvas 制作图像

转载 作者：行者123 更新时间：2023-11-30 12:52:17 25 4
gpt4 key购买 nike

我正在尝试做下一件事(我尝试通过 css 来做:http://jsfiddle.net/kyfha/74/ 但用户建议我通过 Canvas 来做)。所以我尝试通过 Canvas :

IMAGE 1

当用户覆盖所有这个形状时，它会变成:

IMAGE 2

当用户超过这个形状时，它会变成图片编号1。

如果在图片 2 中，他按下灰色小圆圈，图片将变为:

IMAGE 3

如果他按下浅蓝色的小圆圈，它将变为图像编号 2。

我尝试通过 canvas、javascript 和 css 制作它，我得到了形状。

我要做的是在灰色形状的中间放一个淡蓝色的圆圈(它会一直在那里)，在蓝色形状的末端放一个绿色的小圆圈。

蓝色的形状可以更长、更小或更靠左。

例如:

enter image description here

enter image description here

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>

感谢任何帮助!!

最佳答案

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

这里有一些帮助完全在 Canvas 内绘制 Canvas 形状。

演示:http://jsfiddle.net/m1erickson/c4upM/

enter image description here

要使任何形状都可点击，请检查 context.isPointInPath 以进行 HitTest 。我将交互性留给您。

祝你的元素好运!

代码:

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

关于javascript - 通过 Canvas 制作图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20554076/

25 4 0
文章推荐： c# - 计算机锁定时 WebClient.DownloadFile 挂起
文章推荐： c# - DirectShow/WPF 线程问题
文章推荐： c# - itextsharp pdfpcell垂直对齐问题
文章推荐： C#/Salesforce : Must Constrain Generic, 无法约束通用
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com