HTML5画布+jquery

<!DOCTYPEhtml>

<html>

<head>

<metacharset="utf-8"/>

<title></title>

</head>

<scripttype="text/javascript"src="js/jquery-1.6.4.min.js"></script>

<body>

<header>

<canvasid="chacktext"style="border:#00FF001pxsolid;">

</canvas><br/>

<script>

functiondwa(){

//获取文本框的值;

varstractx=$("#chackbox").val();

varstactY=$("#caackbox1").val();

varendx=$("#chackbox2").val();

varendy=$("#chackbox3").val();

//获取画布的信息;

varc=document.getElementById("chacktext");

//进行2d绘画

varmyc=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:<inputtype="text"id="chackbox"/><br/>

确定开始的B节点:<inputtype="text"id="caackbox1"/><br/>

开始的节点a:<inputtype="text"id="chackbox2"/><br/>

开始的B节点:<inputtype="text"id="chackbox3"/>

<inputtype="button"onclick=dwa()value="dwa">

</header>

</body>

</html>

相关推荐