鼠标滑动写字

最新推荐文章于 2025-01-22 10:15:22 发布

原创最新推荐文章于 2025-01-22 10:15:22 发布 · 209 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#drawline

html5 专栏收录该内容

4 篇文章

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>

<BODY>
鼠标写字（写的使用要一笔一划来写，联系画直线的函数）谷歌浏览器测试
<input type="button" value="撤销" id="clearScreen"/><br>
<canvas id="myCanvans" width="1000" height="1000" style="border:1px solid green">浏览器不支持</canvas>

</BODY>
<script language="javascript">

//定义坐标类
function Poistion(){};

function Poistion(x,y){
this.x = x;
this.y = y;
}
Poistion.prototype.getX = function(){
return this.x
}
Poistion.prototype.getY = function(){
return this.y
};

//定义记载所划过的点
var posList=[];
var canvas = document.getElementById("myCanvans");
var context = canvas.getContext("2d");

//取得鼠标位置
function getPosition( ev ){
var e = ev || event;
if(e.pageX || e.page.pageY){
return new Poistion(e.pageX,e.pageY)
}else{
return new Position(e.clientX+document.body.scrollLeft-document.body.clientLeft,e.clientY+document.body.scrollTop-document.body.clientTop);
}
}

//鼠标按下按下函数
canvas.onmousedown= function( ev ){
var position = getPosition(ev);
posList.push(position);
}
//鼠标弹起函数
canvas.onmouseup= function( ev ){
var position = getPosition(ev);
posList.push(position);
//alert(posList[ posList.length-2].getX() );
drawLine(posList[ posList.length-2],posList[ posList.length-1] );
}

/*画线*/
function drawLine(startPos,endPos){
context.beginPath();
context.moveTo( startPos.x, startPos.y );
context.lineTo(endPos.x,endPos.y );
context.strokeStyle="black";
context.lineWidth=20;
context.lineCap="round";//端点为圆弧的
context.stroke();
}

//撤销上一次绘制
document.getElementById("clearScreen").onclick=function(ev){
clearScreen();

posList.pop(posList.length-1);
posList.pop(posList.length-2);

for( var i=0;i<posList.length-1;i=i+2 ){
if( posList[i] && posList[i+1]){
drawLine( posList[i],posList[i+1]);
}
}
}

/*清理屏幕*/
function clearScreen(){
var x = canvas.style.left;
var y = canvas.style.top;
var width = canvas.clientWidth;
var height = canvas.clientHeight;
context.fillStyle="white";
context.fillRect(x,y,width,height );
}

</script>

</HTML>

本文是自己练习使用，供大家分享。版权归个人所有。