檔案下載：39365159
<!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>
留言列表
