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可查看源代码。
"鼠标在canvas上悬浮，并提示鼠标位置信息"这个主题涉及到了Canvas与事件处理、坐标系统以及用户交互的相关知识。 首先，我们需要理解HTML5 Canvas的基本结构。一个Canvas元素可以通过`<canvas>`标签在HTML文档中...
4.4_屏幕坐标和canvas坐标的转换｜使用鼠标和canvas交互｜canvas项目综合实战｜Canvas图形、动画、游戏开发
可以使用`event.clientX`和`event.clientY`获取相对于浏览器窗口的鼠标坐标，但Canvas坐标系统可能与此不同，因此通常需要转换： ```javascript function getMousePos(canvas, event) { var rect = canvas....
// 获取鼠标在Canvas上的坐标 const rect = canvas.getBoundingClientRect(); const x = event.clientX - rect.left; const y = event.clientY - rect.top; // 清空画布 ctx.clearRect(0, 0, canvas.width, ...
首先，我们需要在`mousemove`事件处理器中获取鼠标的位置，然后用这些坐标更新Canvas的绘图路径。为了实现连续的线条，我们可能需要在每次鼠标移动时保存当前的坐标，并在下一次移动时从上次结束的位置开始画线。 ...
HTML5的Canvas是一个强大的绘图工具，允许开发者在网页上进行动态图形绘制。在这个场景中，我们关注的是如何利用Canvas来根据鼠标的移动实时绘制矩形。这涉及到几个关键的知识点，包括Canvas的基本使用、鼠标事件...
本案例中，“html5 canvas鼠标跟随线条动画特效”是一个利用Canvas API创建的有趣应用，它能够实时追踪用户的鼠标移动，并在Canvas上绘制出变化色彩的线条轨迹。 首先，我们需要理解Canvas的基本结构。在HTML中，...
这里的参数分别是：源图像、源图像左上角的(x, y)坐标、源图像的宽度和高度、以及在canvas上绘制的位置(x, y)和宽度、高度。 4. **精灵的移动**：通过改变精灵对象的`x`和`y`坐标，可以实现精灵在canvas上的移动。...
在这个“HTML5 Canvas鼠标移动圆点粒子跟随动画特效”中，我们看到一个创新且引人入胜的互动设计，用户可以通过鼠标移动来控制页面上的圆点粒子运动，实现了视觉与交互的完美融合。 首先，我们需要理解Canvas的基本...
HTML5 Canvas是Web开发中的一个强大工具，它允许开发者在网页上绘制图形并创建动态的交互...这对于学习HTML5 Canvas技术和游戏开发来说是一个很好的起点，可以帮助开发者理解如何在网页上创建动态且交互性强的应用。
当鼠标在Canvas上移动时，JavaScript会获取鼠标的当前位置，并计算出相对于眼睛中心点的距离和角度。然后，通过改变眼珠的坐标，使其看起来像是在跟随鼠标转动。这通常涉及到数学知识，如三角函数sin和cos来计算角度...
"HTML5 Canvas眼睛跟随鼠标特效"是一个利用Canvas API实现的有趣互动效果，用户移动鼠标时，页面上的虚拟眼睛会随之改变方向，仿佛在盯着鼠标移动。 在实现这个特效时，首先我们需要理解Canvas的基本结构。HTML5 ...
这段代码监听鼠标按下、移动和抬起事件，根据鼠标位置在画布上实时绘制线条。当鼠标抬起时，清除起点，停止绘制。 总的来说，"Html5-canvas-v2.zip"提供的连线题会涵盖HTML5 Canvas的基础和进阶特性，包括图形绘制...
HTML5 Canvas是Web开发中的一个强大工具，它允许开发者在网页上进行动态图形绘制，创造出丰富的交互式用户体验。"html5-canvas-web-图片涂鸦"这个主题涉及到的知识点主要集中在如何利用HTML5的Canvas API来实现图片...
在这个"HTML5 Canvas 鼠标滑过3D动画效果"的例子中，我们主要探讨的是如何利用Canvas API来实现一个互动的3D背景动画，当鼠标在画布上滑过时，动画会呈现出三维变换。 首先，我们需要在HTML文件中创建一个`<canvas>...
首先，要实现图片拖放，我们需要创建一个Canvas元素并在JavaScript中获取其2D渲染上下文（`canvas.getContext('2d')`）。然后，将图片加载到HTML页面中，可以使用`new Image()`对象，并通过`onload`事件确保图片加载...
HTML5 Canvas是Web开发中的一个强大工具，它允许开发者在网页上进行动态图形绘制，创造出丰富的交互式用户体验。Canvas API提供了大量的方法和属性，使得JavaScript可以直接控制像素级别的图像操作。这个压缩包...
综上所述，"Canvas鼠标移动粒子动画特效"利用了HTML5 Canvas的2D绘图能力，结合鼠标事件，创建了一个动态且交互性强的视觉效果。开发者需要掌握Canvas API的基本绘图方法，理解事件处理机制，以及如何构建和控制粒子...
5. 纸飞机飞行：根据预先设定的飞行速度和角度，计算新的位置，然后在Canvas上清除旧图像，绘制新位置的纸飞机。 通过这样的实现，用户在浏览网页时，会看到纸飞机随着鼠标移动而飞行，周围还有圆点在不断漂浮，...