<!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.οnmοusedοwn= function( ev ){
var position = getPosition(ev);
posList.push(position);
}
//鼠标弹起函数
canvas.οnmοuseup= 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").οnclick=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>
本文是自己练习使用,供大家分享。版权归个人所有。
<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.οnmοusedοwn= function( ev ){
var position = getPosition(ev);
posList.push(position);
}
//鼠标弹起函数
canvas.οnmοuseup= 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").οnclick=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>
本文是自己练习使用,供大家分享。版权归个人所有。