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 相关文章推荐
css3让div随鼠标移动而抖动起来
Feb 10 HTML / CSS
css3实现小箭头各种图形效果
Jul 08 HTML / CSS
纯CSS3实现鼠标滑过按钮动画第二节
Jul 16 HTML / CSS
使用html2canvas实现浏览器截图的示例代码
Jan 26 HTML / CSS
HTML5 Canvas 破碎重组的视频特效的示例代码
Sep 24 HTML / CSS
HTML5之SVG 2D入门3—文本与图像及渲染文本介绍
Jan 30 HTML / CSS
html5 video标签屏蔽右键视频另存为的js代码
Nov 12 HTML / CSS
html5使用canvas绘制一张图片
Dec 15 HTML / CSS
Html5移动端适配IphoneX等机型的方法
Jun 25 HTML / CSS
解决html5中的video标签ios系统中无法播放使用的问题
Aug 10 HTML / CSS
DIV CSS实现网页背景半透明效果
Dec 06 HTML / CSS
css之clearfix的用法深入理解(必看篇)
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
laravel 使用事件系统统计浏览量的实现
2019/10/16 PHP
TP5框架实现自定义分页样式的方法示例
2020/04/05 PHP
解决js数据包含加号+通过ajax传到后台时出现连接错误
2013/08/01 Javascript
方便实用的jQuery checkbox复选框全选功能简单实例
2013/10/09 Javascript
js操作输入框中选择内容兼容IE及其他主流浏览器
2014/04/22 Javascript
用json方式实现在 js 中建立一个map
2014/05/02 Javascript
js实现正方形颜色从下往上升的效果
2014/08/04 Javascript
jQuery插件datepicker 日期连续选择
2015/06/12 Javascript
JS+CSS实现大气清新的滑动菜单效果代码
2015/10/22 Javascript
js实现点击获取验证码倒计时效果
2021/01/28 Javascript
JS实现CheckBox复选框全选、不选或全不选功能
2020/07/28 Javascript
浅谈js多维数组和hash数组定义和使用
2016/07/27 Javascript
JavaScript中的null和undefined用法解析
2019/09/30 Javascript
vue实现多级菜单效果
2019/10/19 Javascript
[02:04]2016国际邀请赛中国区预选赛VG.R晋级之路
2016/07/01 DOTA
python启动办公软件进程(word、excel、ppt、以及wps的et、wps、wpp)
2009/04/09 Python
python中将字典形式的数据循环插入Excel
2018/01/16 Python
Python使用pip安装报错:is not a supported wheel on this platform的解决方法
2018/01/23 Python
解决pycharm的Python console不能调试当前程序的问题
2019/01/20 Python
python实现基于朴素贝叶斯的垃圾分类算法
2019/07/09 Python
pytorch中如何使用DataLoader对数据集进行批处理的方法
2019/08/06 Python
Python三元运算与lambda表达式实例解析
2019/11/30 Python
python如何通过twisted搭建socket服务
2020/02/03 Python
Python3 socket即时通讯脚本实现代码实例(threading多线程)
2020/06/01 Python
在终端启动Python时报错的解决方案
2020/11/20 Python
使用css实现android系统的loading加载动画
2019/07/25 HTML / CSS
Canvas系列之滤镜效果
2019/02/12 HTML / CSS
露营世界:Camping World
2017/02/02 全球购物
美国嘻哈文化生活方式品牌:GLD
2018/04/15 全球购物
蒂娜商店:Tiina the Store
2019/12/07 全球购物
阿拉伯时尚购物网站:Nisnass
2021/02/07 全球购物
什么是反射
2012/03/17 面试题
阿甘正传观后感
2015/06/01 职场文书
公司人事管理制度
2015/08/05 职场文书
python随机打印成绩排名表
2021/06/23 Python
mysq启动失败问题及场景分析
2021/07/15 MySQL