<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> canvas </title>
</head>
<body>
<script type="text/javascript">
var localx ;
var localy;
var mousestate=0;
function draw(ev)
{
mousestate =1;
localx = ev.clientX;
localy = ev.clientY;
}
function mouseup()
{
mousestate = 0;
}
function movedraw(ev)
{
if(mousestate==1 )
{
var localx2 = ev.clientX;
var localy2 = ev.clientY;
//alert("SF");
/* var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();
*/
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(localx,localy);
cxt.lineTo(localx2,localy2);
cxt.stroke();
/*
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(localx,localy,localx2,localy2);
*/
localx = ev.clientX;
localy = ev.clientY;
}
}
function cnvs_clearCoordinates()
{
mousestate = 0;
document.getElementById("xycoordinates").innerHTML="";
}
function clearCanvas()
{
var c=document.getElementById("myCanvas");
c.height=c.height;
}
</script>
<canvas id="myCanvas" onmousedown="draw(event)" onmouseup="mouseup()" onmousemove="movedraw(event)" width=800 height=600 margin-top =0px;margin-left=0px onmouseout="cnvs_clearCoordinates()"
style="border:1px solid #c3c3c3;"
>
</canvas>
<button onclick="clearCanvas()">清空画布</button>
</body>
</html>
利用html5画图
最新推荐文章于 2018-09-22 13:46:30 发布
