HTML5画布+jquery

最新推荐文章于 2021-09-15 15:26:13 发布

iteye_2837

最新推荐文章于 2021-09-15 15:26:13 发布

阅读量538

点赞数

分类专栏： html5 文章标签： html5 画布 jquery ViewUI

本文链接：https://blog.csdn.net/iteye_2837/article/details/82635805

版权

html5 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<script type="text/javascript" src="js/jquery-1.6.4.min.js" ></script>
<body>
<header>
<canvas id="chacktext"style="border: #00FF00 1px solid;">
</canvas><br/>
<script >
function dwa(){
//获取文本框的值；
var stractx=$("#chackbox").val();
var stactY=$("#caackbox1").val();
var endx=$("#chackbox2").val();
var endy=$("#chackbox3").val();
//获取画布的信息;
var c = document.getElementById("chacktext");

//进行2d绘画
var myc =c.getContext("2d");
myc.beginPath();
myc.moveTo(stractx,stactY);
myc.lineTo(endx,endy);
myc.closePath();
myc.stroke();

//交换文本框的值
$("#chackbox").val(endx);
$("#caackbox1").val(endy);
$("#chackbox2").val("");
$("#chackbox3").val("");

}
</script>

确定开始的节点a：<input type="text" id="chackbox" /><br />
确定开始的B节点：<input type="text" id="caackbox1" /><br />
开始的节点a：<input type="text" id="chackbox2"/><br />
开始的B节点：<input type="text" id="chackbox3"/>
<input type="button"οnclick=dwa() value="dwa">

</header>
</body>
</html>