天天看点

HTML5画布+jquery

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

继续阅读