`

鼠标滑动写字

阅读更多
<!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>

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

分享到:
评论

相关推荐

    仿写字板带滑动按钮_love4ss_Vc_

    标题“仿写字板带滑动按钮_love4ss_Vc_”揭示了这是一个基于VC++编程语言开发的应用程序,旨在模仿Windows系统中的写字板功能,并且特别强调了它包含滑动按钮的功能。滑动按钮(通常称为Slider或ScrollBar)是用户...

    易语言写字板颜色选择器

    在易语言中,颜色选择器通常会提供一个调色板,用户可以通过点击或滑动来选择RGB、HSV等色彩模式下的颜色。 3. **矩形外形框初始化**:在图形界面编程中,矩形外形框是常见的界面元素,用于框选或定义一个区域。...

    行业文档-设计装置-一种符合书写习惯的笔式鼠标.zip

    4. 操作方式:解释了笔式鼠标如何通过点击、滑动、旋转等动作来完成常规鼠标的功能,以及可能存在的额外功能,如压力感应,用于绘图软件的精细控制。 5. 设计细节:可能涵盖了外观设计、人体工程学考虑、材料选择等...

    可爱的鼠标指针-蓝色系^^

    5. "10水平_01.cur":这可能是指针在进行水平滚动操作时的特定形状,如在滚动条上左右滑动时。 6. "05精确定位_01.cur":当需要精细操作,如绘画或调整图像时,这个指针可能会被使用,提供更高的精度。 7. "12对角2_...

    易语言写字板颜色选择器源码-易语言

    自绘控件允许程序员根据需要定制控件的外观和行为,例如在这个颜色选择器中,用户可能可以通过点击或滑动来选择不同的颜色。自绘控件的绘图过程通常在“控件重绘”事件中完成,开发者需要利用易语言的绘图命令,如画...

    unity 签名留言,手写签名

    用户可以通过触摸屏或鼠标输入来模拟书写过程。Unity的EventSystem和InputManager组件是实现这种交互的关键。 2. **图形渲染**:Unity中的`CanvasRenderer`和`SpriteRenderer`可以用来绘制线条。我们可能需要创建一...

    全国计算机职称考试中文WindowsXP操作系统考试大纲.pdf

    熟悉窗口状态栏的显示隐藏,对话框的滑动杆操作,以及在窗口中创建快捷方式。 第3章涉及文件管理,包括文件、文件夹和文件系统的概念,使用“我的电脑”和“资源管理器”进行文件操作,如创建、选择、复制、移动、...

    行业分类-设备装置-指向装置、操作方法及相关多媒体互动系统.zip

    例如,在教育领域,互动白板结合电子笔,教师可以轻松地在大屏幕上写字、绘图,同时进行多媒体教学。在商业展示中,互动展示台可能包含触摸屏和体感控制器,使参观者能够通过自然的动作来浏览信息或参与互动游戏。 ...

    delphi简单的jpg特效

    用户可以通过鼠标点击或滑动来触发不同的特效。例如,可以监听鼠标事件,根据鼠标位置改变图像的透明度或应用特定的滤镜。 8. **内存中的图像处理**: 在内存中处理jpg图像可以提高效率,特别是在进行大量图像...

    易语言自绘颜色选择器

    “自绘颜色选择器”是模仿系统写字板中的颜色选择功能,它通常包含一个调色板,用户可以通过点击或滑动来选取不同的颜色。实现这个功能的核心在于理解和运用易语言的绘图命令,如填充颜色、绘制矩形、线条等,以及...

    这是一款使用HTML5Canvas制作的黑板特效

    为了实现粉笔书写的效果,开发者可能使用了鼠标或手指移动事件来追踪用户的输入。当用户在屏幕上滑动时,程序会记录下轨迹并用Canvas API绘制出来。在移动端,这通常涉及到监听`touchstart`、`touchmove`和`touchend...

    职称计算机2010考试大纲.pdf

    - **对话框操作**: 包括各种控件(如选项卡、按钮、文本框等)的使用,以及对话框的滑动杆操作。 - **应用程序管理**: 学习通过快捷方式、"开始"菜单或任务管理器来启动、切换和管理应用程序。 **第3章 Windows XP...

    多点触控模拟器MultiTouchVista

    这种技术超越了传统的单点触摸,如鼠标点击,让用户可以通过同时使用多个手指进行缩放、旋转、滑动等手势操作,极大地提升了与数字设备的互动性。 MultiTouchVista这款软件的核心功能是模拟触控输入。在不支持触控...

    wpf开发小例子

    用户可以在InkCanvas上使用鼠标或触笔绘制,而InkCanvas会自动记录下每一笔的轨迹。要实现清除功能,可以添加一个清除按钮,当点击此按钮时,InkCanvas的InkPresenter对象的Strokes属性会被清空,从而删除所有绘图。...

    Eclipse_Swt_Jface_核心应用_部分19

    第1章 Java语言的GUI历史 2 1.1 最初的AWT 2 1.2 Swing工具包 3 ...15.3.1 简单写字板程序示例 293 15.3.2 添加菜单栏的基本步骤 297 15.3.3 创建菜单项 297 15.3.4 菜单项的事件处理 298 ...

Global site tag (gtag.js) - Google Analytics