<!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_”揭示了这是一个基于VC++编程语言开发的应用程序，旨在模仿Windows系统中的写字板功能，并且特别强调了它包含滑动按钮的功能。滑动按钮（通常称为Slider或ScrollBar）是用户...
在易语言中，颜色选择器通常会提供一个调色板，用户可以通过点击或滑动来选择RGB、HSV等色彩模式下的颜色。 3. **矩形外形框初始化**：在图形界面编程中，矩形外形框是常见的界面元素，用于框选或定义一个区域。...
4. 操作方式：解释了笔式鼠标如何通过点击、滑动、旋转等动作来完成常规鼠标的功能，以及可能存在的额外功能，如压力感应，用于绘图软件的精细控制。 5. 设计细节：可能涵盖了外观设计、人体工程学考虑、材料选择等...
5. "10水平_01.cur"：这可能是指针在进行水平滚动操作时的特定形状，如在滚动条上左右滑动时。 6. "05精确定位_01.cur"：当需要精细操作，如绘画或调整图像时，这个指针可能会被使用，提供更高的精度。 7. "12对角2_...
自绘控件允许程序员根据需要定制控件的外观和行为，例如在这个颜色选择器中，用户可能可以通过点击或滑动来选择不同的颜色。自绘控件的绘图过程通常在“控件重绘”事件中完成，开发者需要利用易语言的绘图命令，如画...
用户可以通过触摸屏或鼠标输入来模拟书写过程。Unity的EventSystem和InputManager组件是实现这种交互的关键。 2. **图形渲染**：Unity中的`CanvasRenderer`和`SpriteRenderer`可以用来绘制线条。我们可能需要创建一...
熟悉窗口状态栏的显示隐藏，对话框的滑动杆操作，以及在窗口中创建快捷方式。 第3章涉及文件管理，包括文件、文件夹和文件系统的概念，使用“我的电脑”和“资源管理器”进行文件操作，如创建、选择、复制、移动、...
例如，在教育领域，互动白板结合电子笔，教师可以轻松地在大屏幕上写字、绘图，同时进行多媒体教学。在商业展示中，互动展示台可能包含触摸屏和体感控制器，使参观者能够通过自然的动作来浏览信息或参与互动游戏。 ...
用户可以通过鼠标点击或滑动来触发不同的特效。例如，可以监听鼠标事件，根据鼠标位置改变图像的透明度或应用特定的滤镜。 8. **内存中的图像处理**： 在内存中处理jpg图像可以提高效率，特别是在进行大量图像...
4. **笔触宽度调节**：为了让用户自定义线条的粗细，我们需要提供一个滑动条或输入框供用户设定。Unity的UI系统，如Slider组件，可以很好地实现这一功能。根据用户的选择，我们可以动态调整Line Renderer的...
“自绘颜色选择器”是模仿系统写字板中的颜色选择功能，它通常包含一个调色板，用户可以通过点击或滑动来选取不同的颜色。实现这个功能的核心在于理解和运用易语言的绘图命令，如填充颜色、绘制矩形、线条等，以及...
为了实现粉笔书写的效果，开发者可能使用了鼠标或手指移动事件来追踪用户的输入。当用户在屏幕上滑动时，程序会记录下轨迹并用Canvas API绘制出来。在移动端，这通常涉及到监听`touchstart`、`touchmove`和`touchend...
- **对话框操作**: 包括各种控件（如选项卡、按钮、文本框等）的使用，以及对话框的滑动杆操作。 - **应用程序管理**: 学习通过快捷方式、"开始"菜单或任务管理器来启动、切换和管理应用程序。 **第3章 Windows XP...
这种技术超越了传统的单点触摸，如鼠标点击，让用户可以通过同时使用多个手指进行缩放、旋转、滑动等手势操作，极大地提升了与数字设备的互动性。 MultiTouchVista这款软件的核心功能是模拟触控输入。在不支持触控...
用户可以在InkCanvas上使用鼠标或触笔绘制，而InkCanvas会自动记录下每一笔的轨迹。要实现清除功能，可以添加一个清除按钮，当点击此按钮时，InkCanvas的InkPresenter对象的Strokes属性会被清空，从而删除所有绘图。...
第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 ...