html5 css3 实现连线功能

最新推荐文章于 2025-06-28 16:59:04 发布
最新推荐文章于 2025-06-28 16:59:04 发布
阅读量1w 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： html5 文章标签： html5 css3 连线
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/yongwangzhiqian668/article/details/52387307
这篇博客展示了如何使用HTML5的canvas元素和CSS3来实现按钮之间的连线功能。用户点击带类名‘c1’或‘c2’的按钮时，如果之前点击过另一个按钮，则会在两个按钮间绘制红色连线。该示例用于演示简单的用户交互和图形绘制。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<!DOCTYPE html>
<html>


<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="js/jquery-3.1.0.min.js"></script>
</head>


<body>


<table style="text-align: center;width: 100%;">


<tr>
<td>
<button class="c1" style="background-color: #0f0; margin: 10px;height: 50px; width: 100px; border: solid 3px #f00;">
猫
</button>
</td>
<td>
<button class="c2" style="background-color: #0f0;margin: 10px;
            height: 50px; width: 100px; border: solid 3px #f00;">
dog
</button>
</td>
</tr>


<tr>
<td>
<button class="c1" style="background-color: #0f0;margin: 10px; height: 50px; width: 100px; border: solid 3px #f00;">
狗
</button>
</td>
<td>
<button class="c2" style="background-color: #0f0; margin: 10px;
            height: 50px; width: 100px; border: solid 3px #f00;">
cow
</button>
</td>
</tr>


<tr>
<td>
<button class="c1" style="background-color: #0f0;margin: 10px; height: 50px; width: 100px; border: solid 3px #f00;">
牛
</button>
</td>
<td>
<button class="c2" style="background-color: #0f0;margin: 10px;
            height: 50px; width: 100px; border: solid 3px #f00;">
cat
</button>
</td>
</tr>


<tr>
<td>
<button class="c1" style="background-color: #0f0; margin: 10px;height: 50px; width: 100px; border: solid 3px #f00;">
猪
</button>
</td>
<td>
<button class="c2" style="background-color: #0f0; margin: 10px;
            height: 50px; width: 100px; border: solid 3px #f00;">
pig
</button>
</td>
</tr>


</table>
<canvas id="myCanvas" width="400" height="600" style="position: absolute;top:0;left:0 ;z-index:-99 ;"></canvas>
<!--<canvas id="myCanvas1" style="position: absolute;top: 0;left:0 ;">
                                                                   </canvas>
<canvas id="myCanvas2" style="position: absolute;top: 0;left:0 ;">
                                                                    </canvas>
<canvas id="myCanvas3" style="position: absolute;top: 0;left:0 ;">
                                                                   </canvas>-->
<script type="text/javascript" charset="utf-8">
var prenum = {
"leftt": 0,
"topp": 0
}; //


$("button").click(function() {


var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.strokeStyle = "red";
if($(this).hasClass("c1")) {
prenum.leftt = $(this).offset().left + $(this).outerWidth();
prenum.topp = $(this).offset().top + $(this).outerHeight() / 2;
} else if($(this).hasClass("c2")) {
if(prenum.leftt != 0 && prenum.topp != 0) {
ctx.moveTo(prenum.leftt, prenum.topp);
ctx.lineTo($(this).offset().left, $(this).offset().top + $(this).outerHeight() / 2);
ctx.stroke();
prenum = {
"leftt": 0,
"topp": 0
}; //
}
}


});


</script>


</body>


</html>
使用HTML5、Canvas和jQuery实现的连线题示例
Book_Sea的博客
10-01 513
在本篇文章中，我们将介绍如何使用HTML5、Canvas和jQuery来创建一个简单的连线题示例。我们将使用HTML5的Canvas元素来呈现绘图区域，并使用jQuery库来处理用户的交互操作。通过在Canvas上绘制元素，并使用鼠标交互来绘制连线，用户可以完成连线题的挑战。在上面的代码中，我们创建了一个具有标题和Canvas元素的基本HTML结构。的脚本文件，我们将在其中编写我们的JavaScript代码。函数中，我们获取鼠标移动的坐标，并绘制当前的连线。最后，在文档加载完成后，我们通过jQuery的。
网页基础样式及网页布局
qq_51745142的博客
12-18 1083
//文本 color 设置文字颜色 text-align 文本对齐方式 center居中 left居左 right居右 justify两端对齐 text-indent 文本缩进 font-size 控制文字大小 line-height 当文本的行高和盒子的高度一致时，文本垂直居中 //文本的修饰 text-decoration 文本修饰none underline下划线 overline上划线 line-through删除线 blink设置文本闪烁 font-weight
css 任意两个点连接成一条线
12-12
css 任意两个点连接成一条线，没有使用到canvas。纯css实现。这个只是一个demo。您可以参考
画线 css,用CSS3画的接口线
weixin_29432775的博客
08-03 370
CSS语言：CSSSCSS确定.container {width: 50%;height: 300px;position: fixed;left: 50%;bottom: 0;-webkit-transform: translate(-50%, 0%);transform: translate(-50%, 0%);display: -webkit-box;display: -webkit-flex...
Vue3 实现两个元素之间连线
最新发布
qq_45651201的博客
06-28 394
本文介绍了使用Vue实现两个div元素之间动态连线的解决方案。通过计算两个div的中心点坐标，使用勾股定理计算连线长度和角度，并通过CSS动态调整连线样式。关键步骤包括：1)在模板中添加连线元素；2)使用ref获取div元素引用；3)在getLineStyle方法中计算中心点坐标、连线长度和旋转角度；4)通过transform属性实现连线旋转效果。该方法适用于需要可视化元素关系的场景，代码简洁高效。
vue css实现两个元素之间连线箭头,v-for循环每两个直接添加连线箭头
qq_35968173的博客
01-12 5172
通过css伪元素实现连线箭头
用css3绘制你需要的几何图形
weixin_30767921的博客
08-09 166
1、圆形 示例:　　　　　　　　　 思路：给任何正方形元素设置一个足够大的 border-radius ，就可以把它变成一个圆形.代码如下： html: <div class="size example1"></div> css: .size{ width:200px; height: 200px; backgro...
HTML5 Canvas实现连线题特效特效代码
03-20
本话题聚焦于利用HTML5 Canvas实现的连线题特效，这是一种常见的教育或者娱乐应用，用户可以通过拖动线段将对应的元素连接起来，通常用于训练记忆力或者逻辑思维。 首先，我们要理解Canvas的基本使用。在HTML中，...
纯css3实现思维导图样式示例
09-22
但随着技术的发展，利用纯CSS3来设计思维导图也成为可能，这主要是因为CSS3中的Flexbox布局提供了强大的布局功能，能够非常方便地实现复杂的布局需求。 在Flexbox布局中，最核心的属性包括flex-direction、justify-...
Html使用SVG实现连线功能
08-04
在HTML中使用SVG实现连线功能，可以为网页增添动态交互性，比如在图表、流程图或者网络图中创建连接线。以下将详细介绍如何使用SVG来实现这一功能。 1. SVG基本结构 SVG文件由一系列的图形元素构成，如矩形（rect）...
HTML5 Canvas实现连线题特效.zip
11-18
这个压缩包文件“HTML5 Canvas实现连线题特效.zip”显然包含了一个使用Canvas技术来实现连线题效果的示例。连线题是一种常见的教育或测试工具，用户需要将指定的元素通过线条正确连接起来，常用于记忆训练或逻辑思维...
canvas实现js、html连线
02-19
本话题主要围绕如何使用canvas技术来实现JavaScript与HTML之间的连线功能，包括左右连线和上下连线。 首先，我们需要了解HTML5中的`<canvas>`元素。这是一个矩形区域，可以用于绘制2D图形，如线条、形状、文字等。...
js+css实现两个dom元素之间的连线
热门推荐
u598975767的专栏
02-20 1万+
刷论坛时，看到有小伙伴提问不依赖图形化工具，怎么实现两个div之间的连线， 看着追问的人不少，顺题发挥了下， 下面代码实现两个dom元素中心坐标的连线，首先引入jquery（任意版本），主要是为了方便dom操作，当然改成原生js也可以 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width
css3直线运动_css3实现 两个点之间有一条线，循环运动
weixin_39621185的博客
12-20 564
*{margin:0;padding:0;}.outer{position:relative;width:800px;height:500px;margin:0 auto;}.target{position:absolute;width:60px;height:60px;border-radius:50%;}.target1{top:300px;left:100px;}.target2{top:1...
CSS3 画线
weixin_34405925的博客
06-03 595
<style> div { border: 1px solid; } div .line { width: 2px; height: 2px; background-color: red; color: red; border-radius: 2px; } #container{ width: 800p...
css 定位连线_使用纯CSS从一个点到另一个点绘制线（路径）
weixin_42382558的博客
01-13 1575
I have a image animating in this path below and would like the path to be visible.CSSdiv {width:10px;height:10px;background:red;position:relative;-webkit-animation-name:Player1;-webkit-animation-durat...
关于css连接方式
qq_67740819的博客
11-14 1824
css的三种连接方式
css一个点,用纯CSS从一个点到另一个点绘制一条线（路径）
weixin_39913105的博客
08-03 3019
我在下面的这条路径中有一个动画图像，并希望路径可见。CSSdiv {width:10px;height:10px;background:red;position:relative;-webkit-animation-name:Player1;-webkit-animation-duration:100s;-webkit-animation-timing-function:cubic-bezier(...
position: sticky
weixin_43978427的博客
10-23 159
position: sticky定位时，父元素不能设置overflow:hidden
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值