canvas 缩放后字发虚(canvas 绘图时位置偏离的问题解决)
类别:Web前端 浏览量:449
时间:2021-10-23 10:50:33 canvas 缩放后字发虚
canvas 绘图时位置偏离的问题解决使用 canvas 绘图时,指定的 li 大小一定不要超过该 li 所能获得的最大范围,否则绘制的点会跟实际位置发生偏离。
例如
<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 > <li style="margin:2%"> <li id="test" style="width:800px;height:800px;background-color:#cbdad0d9"> <canvas id="container" onmousemove="mousemove(event)" onmousedown="mousedown()" onmouseup="mouseup()"></canvas> </li> </li> <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>
上例中可以正确的绘制线图。
如果更改为:
<li style="margin:20%"> <li id="test" style="width:800px;height:800px;background-color:#cbdad0d9"> <canvas id="container" onmousemove="mousemove(event)" onmousedown="mousedown()" onmouseup="mouseup()"></canvas> </li> </li>
由于 canvas 所需 width 800px 无法满足,因此绘制线图时,与实际鼠标位置发生偏离。
到此这篇关于canvas 绘图时位置偏离的问题解决的文章就介绍到这了,更多相关canvas 绘图位置偏离内容请搜索开心学习网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持开心学习网!
您可能感兴趣
- 获取canvas画布内容(清除canvas画布内容点擦除+线擦除)
- canvas两种形式动画(用canvas做一个DVD待机动画的实现代码)
- 如何使用html5的canvas图(html5 canvas实现给图片添加平铺水印)
- canvas怎么获取内容(详解canvas.toDataURL报错的解决方案全都在这了)
- canvas 动画线段(canvas简单连线动画的实现代码)
- html5canvas图形怎么打印(HTML5 Canvas 实现K线图的示例代码)
- htmlcanvas的使用(html2canvas生成清晰的图片实现打印的示例代码)
- canvas心形水波(Canvas波浪花环的示例代码)
- canvas绘制流星(使用canvas实现黑客帝国数字雨效果)
- canvas处理图片风格(html2 canvas生成清晰的图片实现打印功能)
- canvas如何调试(关于canvas.toDataURL 在iOS运行失败的问题解决)
- html5的canvas图形绘制技术(导出HTML5 Canvas图片并上传服务器功能)
- canvas如何在网页上画图形(canvas绘制图片drawImage使用方法)
- canvas画法教学(手把手教你实现一个canvas智绘画板的方法)
- html5的canvas代码(H5最强接口之canvas实现动态图形功能)
- 使用canvas画个正方形(canvas绘制树形结构可视图形的实现)
- 数学语文题目(语文的数学题)
- 香蕉(香蕉三种人不宜吃)
- 没钱可以快乐吗(没钱也能快乐吗)
- 快乐是什么(快乐就是)
- 东南亚有哪个国家(东南亚有哪个国家最发达)
- 东南亚安全吗(好不好挣钱)
热门推荐
- css3行内样式表图解(详解css3自定义滚动条样式写法)
- python的decode函数在哪个模块(python中报错"json.decoder.JSONDecodeError: Expecting value:"的解决)
- HTML5 <abbr>标签
- python实用的游戏小代码(python3实现小球转动抽奖小游戏)
- dem高低值怎么调整(dede5.7修改标题title长度方法总结)
- vmware能安装macos吗(VMware15/16解锁VMware安装MacOS的步骤详解)
- JS中sort()和reverse()
- php支付系统(php实现的支付宝网页支付功能示例基于TP5框架)
- vue图片怎么上传服务器(vue-cropper组件实现图片切割上传)
- ftp服务器两种连接方式(FTP服务器 架设考虑三方面的安全因素)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9