canvas 绘图时位置偏离的问题解决


Posted in HTML / CSS onSeptember 16, 2020

使用 canvas 绘图时,指定的 div 大小一定不要超过该 div 所能获得的最大范围,否则绘制的点会跟实际位置发生偏离。

例如

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled 1</title> 
<style type="text/css"> 
.style1 { 
  font-size: x-small; 
} 
</style> 

</head> 
 
<body > 
    <div style="margin:2%">
            <div id="test" style="width:800px;height:800px;background-color:#cbdad0d9">
                    <canvas id="container" onmousemove="mousemove(event)" onmousedown="mousedown()" onmouseup="mouseup()"></canvas>
            </div>
    </div>
    
    <script type="text/javascript"> 
        var paint = false;
        var start = false;
        var canvas = document.getElementById("container");
        canvas.width = 800;
        canvas.height = 800;
        var offsetY = canvas.offsetTop;
        var offsetX = canvas.offsetLeft;
        var y;
        var x;
        var context = canvas.getContext("2d");
    
        function mousemove(e) {
            if (paint == true){
                if (start == false){
                    context.moveTo(0, 0);
                    start = true;
                } else {
                    context.moveTo(x, y);
                }

                x = e.pageX - offsetX;
                y = e.pageY - offsetY;
                context.lineTo(x, y);
                context.stroke();
            }
        }
    
        function mousedown(event) {
            paint = true;
            console.log("down")
        }
    
        function mouseup(event) {
            paint = false;
            console.log("up")
        }
    
    </script>
</body> 
</html>

上例中可以正确的绘制线图。

如果更改为:

<div style="margin:20%">
            <div id="test" style="width:800px;height:800px;background-color:#cbdad0d9">
                    <canvas id="container" onmousemove="mousemove(event)" onmousedown="mousedown()" onmouseup="mouseup()"></canvas>
            </div>
    </div>

由于 canvas 所需 width 800px 无法满足,因此绘制线图时,与实际鼠标位置发生偏离。

到此这篇关于canvas 绘图时位置偏离的问题解决的文章就介绍到这了,更多相关canvas 绘图位置偏离内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
css动画效果之animation的常用样式
Mar 09 HTML / CSS
利用CSS3实现圆角的outline效果的教程
Jun 05 HTML / CSS
CSS3实现银灰色动画效果的导航菜单代码
Sep 01 HTML / CSS
CSS3过渡transition效果实例介绍
May 03 HTML / CSS
详解CSS3新增的背景属性
Dec 25 HTML / CSS
详解CSS3弹性伸缩盒
Sep 21 HTML / CSS
html5中监听canvas内部元素点击事件的三种方法
Apr 28 HTML / CSS
HTML5的download属性详细介绍和使用实例
Apr 23 HTML / CSS
canvas 如何绘制线段的实现方法
Jul 12 HTML / CSS
JavaScript+Canvas实现自定义画板的示例代码
May 13 HTML / CSS
详解使用 CSS prefers-* 规范提升网站的可访问性与健壮性
May 25 HTML / CSS
CSS 实现磨砂玻璃(毛玻璃)效果样式
May 21 HTML / CSS
关于canvas.toDataURL 在iOS运行失败的问题解决
Sep 16 #HTML / CSS
canvas绘制图片drawImage使用方法
Sep 15 #HTML / CSS
HTML5中外部浏览器唤起微信分享功能的代码
Sep 15 #HTML / CSS
浅析HTML5 Landmark
Sep 11 #HTML / CSS
详解HTML5中CSS外观属性
Sep 10 #HTML / CSS
详解如何在登录过期后跳出Ifram框架
Sep 10 #HTML / CSS
HTML5中input输入框默认提示文字向左向右移动的示例代码
Sep 10 #HTML / CSS
You might like
PHP表单验证的3个函数ISSET()、empty()、is_numeric()的使用方法
2011/08/22 PHP
PHP实现多文件上传的方法
2015/07/08 PHP
ThinkPHP中Common/common.php文件常用函数功能分析
2016/05/20 PHP
cakephp2.X多表联合查询join及使用分页查询的方法
2017/02/23 PHP
jQuery阻止事件冒泡具体实现
2013/10/11 Javascript
jquery加载图片时以淡入方式显示的方法
2015/01/14 Javascript
浅谈Jquery为元素绑定事件
2015/04/27 Javascript
Uploadify上传文件方法
2016/03/16 Javascript
angularjs 源码解析之scope
2016/08/22 Javascript
Bootstrap笔记之缩略图、警告框实例详解
2017/03/09 Javascript
vue-cli单页应用改成多页应用配置详解
2017/07/14 Javascript
使用Dropzone.js上传的示例代码
2017/10/10 Javascript
react-native fetch的具体使用方法
2017/11/01 Javascript
JS实现的计数排序与基数排序算法示例
2017/12/04 Javascript
node.js到底要不要加分号浅析
2018/07/11 Javascript
py中的目录与文件判别代码
2008/07/16 Python
Python中os.path用法分析
2015/01/15 Python
Python的历史与优缺点整理
2020/05/26 Python
python读取图像矩阵文件并转换为向量实例
2020/06/18 Python
Python中Selenium库使用教程详解
2020/07/23 Python
利用Python中的Xpath实现一个在线汇率转换器
2020/09/09 Python
css3学习心得分享
2013/08/19 HTML / CSS
HTML5实现自带进度条和滑块滑杆效果
2018/04/17 HTML / CSS
Saks Fifth Avenue澳洲/亚太地区:萨克斯第五大道精品百货店
2019/06/09 全球购物
Nip + Fab官网:英国美容品牌
2019/08/26 全球购物
大三自我鉴定范文
2013/10/05 职场文书
会计电算化专业毕业生自荐信
2013/12/20 职场文书
庆元旦演讲稿
2014/09/15 职场文书
华山导游词
2015/02/03 职场文书
2015个人年度工作总结范文
2015/05/28 职场文书
员工升职自我评价
2019/03/26 职场文书
大学生自我鉴定怎么写
2019/05/07 职场文书
少儿励志名言(80句)
2019/08/14 职场文书
mysql在项目中怎么选事务隔离级别
2021/05/25 MySQL
Python中else的三种使用场景
2021/06/16 Python
mysql中关键词exists的用法实例详解
2022/06/10 MySQL