canvas坐标 欢迎大家有好点建议可以提。js高级扣扣群:170798851 欢迎来交流学习
git项目地址:https://github.com/Jonavin/HTML5_Study
/** * Created by wsf on 2014-11-22. * */ ; (function(win){ //局部变量(这样定义变量会增加链深,但管理集中 var doc = win.document,_cvs = doc.getElementById("canvas"); var prop = { cvs:_cvs, readout:doc.getElementById("readout"), width:_cvs.width,// height:_cvs.height, ctx:_cvs.getContext("2d"), imgsheet:new Image()//显示结果的表 }; var _functions = { //窗口坐标转为换cvs坐标 winPos2CvsPos:function(cvs,_x,_y){ var _box = cvs.getBoundingClientRect();//获得cvs元素相对于浏览器圆点的坐标 return { x:_x-_box.left*(cvs.width/_box.width), y:_y-_box.top*(cvs.height/_box.height) } }, //画背景 drawBg:function(){ var VERTICAL_LINE_SPACING = 12,i = prop.height,ctx = prop.ctx; ctx.clearRect(0,0,prop.width,prop.height);//清空画布 ctx.strokeStyle = 'lightgray'; ctx.lineWidth = 0.5; while(i>VERTICAL_LINE_SPACING*4){ ctx.beginPath();//开始作画 ctx.moveTo(0,1);//移动圆点 ctx.lineTo(prop.width,i); ctx.stroke(); i-=VERTICAL_LINE_SPACING; } }, //画表 drawImgSheet: function () { prop.ctx.drawImage(prop.imgsheet,0,0); }, //画导航线 drawGuideLines:function(x,y){ prop.ctx.strokeStyle='lightblue'; prop.ctx.lineWidth=1; this.drawVerticalLine(x); this.drawHorizontalLine(y); }, //更新显示结果 updateReadout: function (x,y) { prop.readout.innerText = '('+ x.toFixed(0)+','+ y.toFixed(0)+')'; }, //画水平线 drawHorizontalLine:function(y){ prop.ctx.beginPath(); prop.ctx.moveTo(0,y+.5); prop.ctx.lineTo(prop.width,y+.5); prop.ctx.stroke(); }, //画垂直线 drawVerticalLine: function (x) { prop.ctx.beginPath(); prop.ctx.moveTo(x +.5,0) prop.ctx.lineTo(x +.5,prop.height); prop.ctx.stroke(); } } //鼠标滑过画布 prop.cvs.onmousemove = function(e){ var _loc = _functions.winPos2CvsPos.call(_functions,_cvs, e.clientX, e.clientY); _functions.drawBg.call(_functions); _functions.drawImgSheet.call(_functions); _functions.drawGuideLines.call(_functions,_loc.x,_loc.y); _functions.updateReadout.call(_functions,_loc.x,_loc.y); } //初始化 prop.imgsheet.src = "img.jpg"; prop.imgsheet.onload = function(){ _functions.drawImgSheet.call(_functions); } _functions.drawBg.call(_functions);//调用 })(window);
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>将鼠标坐标转换为canvas坐标</title> <link rel="stylesheet/less" type="text/css" href="style.less"> </head> <body> <div id = "readout"></div> <canvas id="canvas" width = "400" height="250"> 您的浏览器不支持canvas。 </canvas> </body> <script src="../common/less.js"></script> <script src="mousePos2CanvasPos.js"></script> </html>
相关推荐
canvas例子,如何获取鼠标在canvas中的位置。html+js。下载双击即可在浏览器运行,F12可查看源代码。
4.4_屏幕坐标和canvas坐标的转换|使用鼠标和canvas交互|canvas项目综合实战|Canvas图形、动画、游戏开发
HTML5 canvas 精灵坐标
canvas案例,判断鼠标位置是否在物体内。html+js实现。可直接运行
根据HTML5中的Canvas,同时根据鼠标的移动来画矩形,可以成功运行,刚开始学,不会,折腾了好久,希望对需要的人有帮助。
3.1 写字 点击后会把本地的坐标位置数据以点的形式显示在画布上,在某点按下,拖动到另外一点,会把这两点链上。如果过某一点不松鼠标也会链上。 3.2 检测 会检测你所链接的点的是完全和本地位置数组是否一致。只有...
152 3.4 实现文本编辑控件 154 3.4.1 指示文本输入位置的光标 154 3.4.2 在canvas中编辑文本 159 3.4.3 文本段的编辑 163 3.5 总结 174 第4章 图像与视频 175 4.1 图像的绘制 176 4.1.1 在canvas之中绘制...
canvas 实现点击画线/打点画闭合多边形,靠近元素高亮
清晰简洁的api,,文件不大,但功能完善;...带坐标,节点,鼠标接触节点的动态显示坐标的事件、、、至于传值方面、所用的方式是json格式(类似数组),可以显示多个canvas图和每个图的多个颜色的折线、、、功能可谓完全
分享一个使用canvas写的时间轴插件 这是一个使用canvas写的时间轴插件,可以实现拖动、点击返回时间点、增加录像块、放大缩小等功能 在我工作项目中用在了视频回放时间轴部分 项目开发刚好用到,找了很久终于合适
本文的主要母的是演示HTML5 Canvas鼠标事件,获取Canvas对象上的鼠标坐标,演示键盘事件通过键盘控制Canvas上对象移动,感兴趣的朋友可以参考下哈,希望对大家有所帮助
vue实现在图片中画矩形框,并得到图片中的对角坐标,测试可用版本
如下所示: ...#canvas{ width: 500px; height: 500px; text-align: center; line-height: 500px; border: 1px solid #E5E5E5; margin: 0 auto; margin-top: 100px; } </style> </head>
5. 每一个绘图方法都返回画布自身指针,支持链式操作。 6. 支持坐标变换后,Windows自身画布坐标到实际坐标的反计算,可以 方便实现鼠标拾取等功能。 7. 支持OpenGL的绘制列表,可以设置Canvas为列表状态,此时...
Color 5、 编写Image1的OnImage1MouseUp事件,要求实现: 1) 若是第奇数次鼠标按钮弹起,则根据rgDrawWhat的选择,记录直线第一个端点或圆心坐标; 2) 若是第偶数次鼠标按钮弹起,则根据rgDrawWhat的选择,记录...
2、添加鼠标移动事件并实时更新鼠标坐标 3、通过随机数生成粒子的坐标和横纵轴速度 4、渲染粒子并将粒子对象保存在数组中 5、调用requestAnimationFrame启动动画,使粒子移动起来 6、通过横纵坐标和速度计算粒子...
JavaScript实现拖动滑块拼图验证功能(html5、canvas) 引言: 滑块拖动验证现在很多地方都用到,周末就琢磨着写了一个,放上来,看看有没有人用得上! 效果: 实现思路: 用一张画布绘制源图,再绘制一个填充...
ARX在线CAD画图,在鼠标按下事件和移动事件中,监听鼠标的位置,并使用 Canvas 上下文对象绘制直线。具体来说,可以记录鼠标按下时的坐标,并在鼠标移动过程中不断更新直线的终点坐标,实现“动态绘制”线条的效果。...
demo中在class为content的div上盖上一层灰色的画布,然后通过获取鼠标和手指的坐标计算出在画布位置上的坐标,通过在坐标原点位置画一个半径10px的透明圆形来透过画布,显示出画布下的内容。本demo是用时需要改变的...
onMouseMove使用鼠标坐标上的钳位功能来确保矩形停留在画布内。 onMouseUp侦听鼠标的释放,并将拖动设置为false,以停止计时器和矩形的移动。 我使用的架构模式基于Addy Osmani的“学习JavaScript设计模式”中的...