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的@media来编写响应式的页面
Nov 01 HTML / CSS
HTML5和CSS3让网页设计提升到下一个高度
Aug 14 HTML / CSS
使用Filters滤镜弥补CSS3的跨浏览器问题以及兼容低版本IE
Jan 23 HTML / CSS
实列教程 一款基于jquery和css3的响应式二级导航菜单
Nov 13 HTML / CSS
CSS3 实现的加载动画
Dec 07 HTML / CSS
html5指南-3.如何实现html元素拖拽功能
Jan 07 HTML / CSS
HTML5如何为形状图上颜色怎么绘制具有颜色和透明度的矩形
Jun 23 HTML / CSS
用HTML5制作烟火效果的教程
May 12 HTML / CSS
浅谈基于Canvas的手绘风格图形库Rough.js
Mar 19 HTML / CSS
移动端Html5页面生成图片解决方案
Aug 07 HTML / CSS
浅析数据存储的三种方式 cookie sessionstorage localstorage 的异同
Jun 04 HTML / CSS
如何利用 CSS Overview 面板重构优化你的网站
Oct 24 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
require(),include(),require_once()和include_once()的异同
2007/01/02 PHP
PHP+MySQL实现无极限分类栏目的方法
2015/12/23 PHP
PHP+iframe模拟Ajax上传文件功能示例
2019/07/02 PHP
laravel-admin的多级联动方法
2019/09/30 PHP
浅说js变量
2011/05/25 Javascript
jQuery下的动画处理总结
2013/10/10 Javascript
css配合jquery美化 select
2013/11/29 Javascript
js实现网站最上边可关闭的浮动广告条代码
2015/09/04 Javascript
AngularJS实现全选反选功能
2015/12/08 Javascript
JS产生随机数的用法小结
2016/12/10 Javascript
Vue 2.0中生命周期与钩子函数的一些理解
2017/05/09 Javascript
vue使用xe-utils函数库的具体方法
2018/03/06 Javascript
30分钟快速实现小程序语音识别功能
2018/11/27 Javascript
JavaScript作用域链实例详解
2019/01/21 Javascript
vue component 中引入less文件报错 Module build failed
2019/04/17 Javascript
Vue 中如何正确引入第三方模块的方法步骤
2019/05/05 Javascript
layui 弹出删除确认界面的实例
2019/09/06 Javascript
vue3.0中使用postcss-pxtorem的具体方法
2019/11/20 Javascript
24个ES6方法解决JS实际开发问题(小结)
2020/05/31 Javascript
微信小程序接入vant Weapp组件的详细步骤
2020/10/28 Javascript
微信小程序实现底部弹出框
2020/11/18 Javascript
python实现倒计时的示例
2014/02/14 Python
举例详解Python中的split()函数的使用方法
2015/04/07 Python
使用python实现飞机大战游戏
2020/03/23 Python
Django 解决开发自定义抛出异常的问题
2020/05/21 Python
北美领先的牛仔品牌:Buffalo David Bitton
2017/05/22 全球购物
英国著名的小众美容品牌网站:Alyaka
2017/08/08 全球购物
英国天然有机美容护肤品:Neal’s Yard Remedies
2018/05/05 全球购物
利用promise及参数解构封装ajax请求的方法
2021/03/24 Javascript
重阳节登山活动方案
2014/02/03 职场文书
活动总结报告范文
2014/05/04 职场文书
合伙经营协议书范本(通用版)
2014/12/03 职场文书
物业保洁员岗位职责
2015/02/13 职场文书
2016春季幼儿园小班开学寄语
2015/12/03 职场文书
Python+Matplotlib+LaTeX玩转数学公式
2022/02/24 Python
在Python 中将类对象序列化为JSON
2022/04/06 Python