本文介绍了在画布中单击是三个像素的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着跟版网的小编来一起学习吧！
问题描述
我花了一整天的时间试图点击我的画布以返回像素 xy 偏移量.这是一项多么艰巨的任务！
这就是我最终得到的结果:
<!DOCTYPE html><html><头><meta charset="utf-8"><title>JS斌</title></头><身体><script src="https://code.jquery.com/jquery-1.10.2.js"></script><div id="logX">x</div><div id="logY">y</div><div style="margin-left:100px"><div style="margin-left:100px"><canvas id="myCanvas" width="100" height="1000" style="border:20px solid #000000;"></canvas></div></div><脚本>var canvas = document.getElementById('myCanvas');canvas.addEventListener('click', on_canvas_click, false);函数getNumericStyleProperty(样式，道具){返回 parseInt(style.getPropertyValue(prop),10);}功能 on_canvas_click(ev) {var boundingRect = ev.target.getBoundingClientRect();var x = ev.clientX - boundingRect.left,y = ev.clientY - boundingRect.top;var style = getComputedStyle(canvas, null);x -= getNumericStyleProperty(style, "margin-left");y -= getNumericStyleProperty(style, "margin-top");x -= getNumericStyleProperty(style, "border-left-width");y -= getNumericStyleProperty(style, "border-top-width");x -= getNumericStyleProperty(style, "padding-left");y -= getNumericStyleProperty(style, "padding-top");$("#logX").text(ev.target.getBoundingClientRect().left+ ", " + ev.clientX+ ", " + canvas.offsetLeft+ ", " + x);$("#logY").text(ev.target.getBoundingClientRect().top+ ", " + ev.clientY+ ", " + canvas.offsetTop+ ", " + y);}//$( document ).on( "mousemove", function( event ) {//$( "#log" ).text( "pageX: " + event.pageX + ", pageY: " + event.pageY );/
The End
大气响应式网络建站服务公司织梦模板
高端大气html5设计公司网站源码
织梦dede网页模板下载素材销售下载站平台（带会员中心带筛选）
财税代理公司注册代理记账网站织梦模板（带手机端）
成人高考自考在职研究生教育机构网站源码(带手机端)
高端HTML5响应式企业集团通用类网站织梦模板(自适应手机端)