Javascript 使用鼠标上下移动绘制画布
我是画布新手，写一个例子作为标题 这是我的密码：Javascript 使用鼠标上下移动绘制画布,javascript,canvas,Javascript,Canvas,我是画布新手，写一个例子作为标题 这是我的密码： <DOCTYPE html> <html> <head> <title>Canvas Test</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="//ajax.googleapis.com/ajax/libs/jqu
<DOCTYPE html>
<html>
<head>
<title>Canvas Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<form name="Show">
X <input type="text" name="MouseX" value="0" size="4"><br>
Y <input type="text" name="MouseY" value="0" size="4"><br>
</form>
<canvas id="canvas" width="300" height="300">
Your browser does not support Canvas !!
</canvas>
<script language="JavaScript">
var IE = document.all?true:false;
if (!IE) document.captureEvents(Event.MOUSEMOVE)
document.onmousemove = getMouseXY;
var tempX = 0;
var tempY = 0;
var pos= new Array();
function getMouseXY(e) {
if (IE) { // grab the x-y pos.s if browser is IE
tempX = event.clientX + document.body.scrollLeft;
tempY = event.clientY + document.body.scrollTop;
}
else { // grab the x-y pos.s if browser is NS
tempX = e.pageX;
tempY = e.pageY;
}
if (tempX < 0) {
tempX = 0;
}
if (tempY < 0) {
tempY = 0;
}
document.Show.MouseX.value = tempX;
document.Show.MouseY.value = tempY;
pos[0]= tempX;
pos[1]= tempY;
return true;
}
$("#canvas").mousedown(function(){
getMouseXY;
startX= pos[0];
startY= pos[1];
})
$("#canvas").mouseup(function(){
getMouseXY;
endX= pos[0];
endY= pos[1];
draw(startX, startY, endX, endY);
})
function draw(startX, startY, endX, endY) {
ctx= $("#canvas")[0].getContext('2d');
ctx.beginPath();
ctx.moveTo(startX, startY);
ctx.lineTo(endX, endY);
ctx.stroke();
}
</script>
</body>
</html>
帆布试验
X
Y
您的浏览器不支持画布！！
var IE=文件。全部？真：假；
if（！IE）document.captureEvents（Event.MOUSEMOVE）
document.onmousemove=getMouseXY；
var-tempX=0；
var-tempY=0；
var pos=新数组（）；
函数getMouseXY（e）{
如果（IE）{//如果浏览器是IE，则抓取x-y位置
tempX=event.clientX+document.body.scrollLeft；
tempY=event.clientY+document.body.scrollTop；
}
否则{//如果浏览器为NS，则抓取x-y位置
tempX=e.pageX；
tempY=e.pageY；
}
if（tempX<0）{
tempX=0；
}
if（tempY<0）{
tempY=0；
}
document.Show.MouseX.value=tempX；
document.Show.MouseY.value=tempY；
pos[0]=tempX；
pos[1]=tempY；
返回true；
}
$（“#画布”）.mousedown（函数（）{
getMouseXY；
startX=位置[0]；
startY=pos[1]；
})
$（“#画布”）.mouseup（函数（）{
getMouseXY；
endX=位置[0]；
endY=pos[1]；
绘制（开始、开始、结束、结束）；
})
功能图（startX、startY、endX、endY）{
ctx=$（“#画布”）[0].getContext（'2d'）；
ctx.beginPath（）；
ctx.moveTo（startX，startY）；
ctx.lineTo（endX，endY）；
ctx.stroke（）；
}
tempX -= $("#canvas").offset().left;
tempY -= $("#canvas").offset().top;
tempX -= $("#canvas").offset().left;
tempY -= $("#canvas").offset().top;