canvas画图写文字，有0.5像素左右的位置偏差，无解决办法，希望有知道问题的大神告知一下

于 2024-03-26 17:36:17 发布
阅读量383 收藏 4
点赞数 10
分类专栏： canvas涂鸦插件 文章标签： javascript 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44434938/article/details/137052769
版权

提示：canvas画图写文字

文章目录

前言

一、写文字

test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>canvas跟随鼠标移动画透明线</title>
    <style>
        div,canvas,img{
            user-select: none;
        }
        .my_canvas,.bg_img{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
        .cf{
            content: '';
            display: block;
            overflow: hidden;
            clear: both;
        }
        .fl{
            float: left;
        }
        .fr{
            float: right;
        }
        .bg_img{
            width: 674px;
            height: 495px;
            background: #ddd;
        }
        .img_tools{
            position: absolute;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            border: 1px solid #eee;
            border-radius: 64px;
            height: 64px;
            line-height: 64px;
            box-sizing: border-box;
            padding: 15px 20px 0;
        }
        .img_tool{
           height: 32px;
           line-height: 32px;
           color: #000;
           font-size: 14px;
           text-align: center;
           width: 80px;
           border: 1px solid #ddd;
           border-radius: 32px;
           margin-right: 10px;
           cursor: pointer;
           position: relative;
        }
        .img_tool_active{
            color: #409EFF;
            border: 1px solid #409EFF;
        }
        .show_history{
            position: absolute;
            bottom:0;
            left: 50%;
            transform: translateX(-50%);
        }
        .show_history>img{
            width: 120px;
            margin-right: 10px;
            border: 1px solid #eee;
            border-radius: 4px;
        }
        .canvas_text{
            width: 120px;
            height: 32px;
            line-height: 32px;
            position: absolute;
            top: 0;
            left: 0;
            border: 1px solid #c0c0c0;
            border-radius: 4px;
            font-size: 16px;
            outline: none;
            background: none;
            display: none;
            font-family: Arial, Helvetica, sans-serif;
            padding-left: 0;
            letter-spacing: 0;
        }
    </style>
</head>
<body>
    <div class="bg_img"></div>
    <canvas id="myCanvasBot" class="my_canvas" width="674" height="495"></canvas>
    <canvas id="myCanvasTop" class="my_canvas" width="674" height="495"></canvas>
    <div class="img_tools cf">
        <div class="img_tool img_tool_active fl" onclick="changeType('curve',this)">涂鸦</div>
        <div class="img_tool fl" onclick="changeType('line',this)">直线</div>
        <div class="img_tool fl" onclick="changeType('rect',this)">矩形</div>
        <div class="img_tool fl" onclick="changeType('ellipse',this)">圆形</div>
        <div class="img_tool fl" onclick="changeType('eraser',this)">橡皮擦</div>
        <div class="img_tool fl" onclick="changeType('revoke',this)">撤销</div>
        <div class="img_tool fl" onclick="changeType('restore',this)">恢复</div>
        <div class="img_tool fl" onclick="changeType('text',this)">文字</div>
    </div>
    <input id="canvasText" autofocus class="canvas_text" type="text">
    <div id="showHistory" class="show_history"></div>
    <script>
        const canvasWidth = 674;
        const canvasHeight = 495;
        //底层canvas
        const botCan = document.getElementById('myCanvasBot');
        //顶层canvas
        const topCan = document.getElementById('myCanvasTop');
        //底层画布
        const botCtx = botCan.getContext('2d');
        //顶层画布
        const topCtx = topCan.getContext('2d');
        topCtx.lineCap = 'round';
        topCtx.lineJoin = 'round';
        //鼠标是否按下  是否移动
        let isDown = false,isMove = false;
        //鼠标是否在canvas上抬起
        let isCanUp = false;
        //需要画图的轨迹
        let drawPoints = [];
        //起始点x,y
        let startPoint = {
            x:0,
            y:0
        };
        //图片历史
        let historyList = [];
        //空历史
        historyList.push(new Image())
        //当前绘画历史index
        let historyIndex = -1;
        //icon历史
        // let partHistory = [];
        //操作类型
        let drawType = 'curve';
        //画线宽度
        const lineWidth = 10;
        //文字大小
        const fontSize = 16;
        //画线颜色
        let strokeStyle = 'rgba(255,0,0,0.6)';
        //文字输入框init
        const canvasText = document.getElementById('canvasText');
        canvasText.style.display = 'none';
        canvasText.style.lineHeight = '32px';
        canvasText.style.height = '32px';
        canvasText.style.display = 'none';
        canvasText.style.color = 'none';
        canvasText.addEventListener('blur',()=>{
            topCtx.font = fontSize + 'px Arial, Helvetica, sans-serif';
            let h = parseFloat(canvasText.style.height);
            topCtx.fillText(canvasText.value, startPoint.x+1, startPoint.y+h/2+fontSize/2-1);
            canvasText.style.display = 'none';
            canvasText.value = '';
            topToBot();
        })
        //起始点x,y
        let textPoint = {
            x:0,
            y:0
        };
        //鼠标按下
        const mousedown = (e)=>{
            isDown = true;
            let x = (e||window.event).offsetX;
            let y = (e||window.event).offsetY;
            if(canvasText.style.display == 'none')startPoint = {x,y};
            if(drawType == 'text'){
                textPoint = {
                    x:x+topCan.offsetLeft-canvasWidth/2,
                    y:y+topCan.offsetTop-canvasHeight/2
                };
                // canvasText.style.height = 32 + 'px';
                canvasText.style.top = textPoint.y+'px';
                canvasText.style.left = textPoint.x+'px';
                canvasText.style.display = 'block';
                canvasText.style.fontSize = fontSize + 'px';
                canvasText.style.color = strokeStyle;
                setTimeout(()=>{
                    canvasText.focus();
                },100)
            }
            if(drawType == 'curve'){
                drawPoints = [];
                drawPoints.push([{x,y}]);
            }
            topCtx.strokeStyle = strokeStyle;
            topCtx.fillStyle = strokeStyle;
            topCtx.lineWidth = lineWidth;
            topCtx.beginPath();
            topCtx.moveTo(x,y);
        }
        //鼠标移动
        const mousemove = (e)=>{
            let x = (e||window.event).offsetX;
            let y = (e||window.event).offsetY;
            if(isDown){
                isMove = true;
                switch(drawType){
                    case 'curve':
                        drawCurve(x,y);
                        break;
                    case 'line':
                        drawLine(x,y);
                        break;
                    case 'eraser':
                        drawEraser(x,y);
                        break;
                    case 'rect':
                        drawRect(x,y);
                        break;
                    case 'ellipse':
                        drawEllipse(x,y);
                        break;
                }
            }
        }
        //鼠标抬起
        const mouseup = (e)=>{
            isCanUp = true;
            if(isDown){
                // topCan内容画到botCan上
                if(drawType!='text')topToBot();
            }
        }
        //topCan内容画到botCan上
        const topToBot = ()=>{
            //把topCan画布生成图片
            let img = new Image();
            img.src = topCan.toDataURL('image/png');
            img.onload = ()=>{
                // partHistory.push(img);
                //添加到botCtx画布
                botCtx.drawImage(img,0,0);
                let historyImg = new Image();
                historyImg.src = botCan.toDataURL('image/png');
                historyImg.onload = ()=>{
                    //添加到历史记录
                    historyList.push(historyImg);
                    historyIndex = historyList.length - 1;
                    let ele = document.getElementById('showHistory');
                    let html='';
                    for(let i=0;i<historyList.length;i++){
                        if(historyList[i].src)html += `<img src="${historyList[i].src}" alt="">`
                    }
                    ele.innerHTML = html;
                }
                //清除topCtx画布
                topCtx.clearRect(0,0,canvasWidth,canvasHeight);
                //botCan画完之后，重置canvas的mouseup isCanUp
                if(isCanUp)isCanUp=false;
            }
            drawPoints = [];
            isDown = false;
            isMove = false;
        }
        //画椭圆形
        const drawEllipse = (x,y)=>{
            //清除topCtx画布
            topCtx.clearRect(0,0,canvasWidth,canvasHeight);
            topCtx.beginPath();
            // 椭圆
            topCtx.ellipse((x+startPoint.x)/2, (y+startPoint.y)/2, Math.abs((x-startPoint.x)/2), Math.abs((y-startPoint.y)/2),0,0, Math.PI*2,true);
            topCtx.stroke();
        }
        //画矩形
        const drawRect = (x,y)=>{
            //清除topCtx画布
            topCtx.clearRect(0,0,canvasWidth,canvasHeight);
            topCtx.beginPath();
            // 矩形
            topCtx.rect(startPoint.x, startPoint.y, x-startPoint.x, y - startPoint.y);
            topCtx.stroke();
        }
        //橡皮擦
        const drawEraser = (x,y)=>{
            //橡皮擦圆形半径
            const radius = lineWidth/2;
            botCtx.beginPath(); 
            for(let i=0;i<radius*2;i++){
                //勾股定理高h
                let h = Math.abs( radius - i); //i>radius h = i-radius; i<radius  h = radius - i
                //勾股定理l
                let l = Math.sqrt(radius*radius -h*h); 
                //矩形高度
                let rectHeight = 1;
                 //矩形宽度
                let rectWidth = 2*l;
                //矩形X
                let rectX = x-l;
                //矩形Y
                let rectY = y-radius + i;

                botCtx.clearRect(rectX, rectY, rectWidth, rectHeight);
            }
        }
        //画透明度直线
        const drawLine = (x,y)=>{
            if(!isDown)return;
            //清空当前画布内容
            topCtx.clearRect(0,0,canvasWidth,canvasHeight);
            //必须每次都beginPath  不然会卡
            topCtx.beginPath();
            topCtx.moveTo(startPoint.x,startPoint.y);
            topCtx.lineTo(x,y);
            topCtx.stroke();
        }
        //画带透明度涂鸦
        const drawCurve = (x,y)=>{
            drawPoints.push({x,y});
            //清空当前画布内容
            topCtx.clearRect(0,0,canvasWidth,canvasHeight);
            //必须每次都beginPath  不然会卡
            topCtx.beginPath();
            topCtx.moveTo(drawPoints[0].x,drawPoints[0].y);
            for(let i=1;i<drawPoints.length;i++){
                topCtx.lineTo(drawPoints[i].x,drawPoints[i].y);
            }
            topCtx.stroke();
        }
        //切换操作
        const changeType = (type,that)=>{
            // if(drawType == type) return;
            let tools = document.getElementsByClassName('img_tool');
            for(let i=0;i<tools.length;i++){
                let ele = tools[i];
                if(ele.classList.contains('img_tool_active'))ele.classList.remove('img_tool_active'); //ele.removeClassName('img_tool_active');
            }
            that.classList.add('img_tool_active');
            drawType = type;
            //撤销
            if(drawType == 'revoke'){
                if(historyIndex>0){
                    historyIndex--;
                    drawImage(historyList[historyIndex]);
                }
            //恢复
            }else if(drawType == 'restore'){
                if(historyIndex<historyList.length - 1){
                    historyIndex++;
                    drawImage(historyList[historyIndex]);
                }
            }
        }
        const drawImage = (img)=>{
            botCtx.clearRect(0,0,canvasWidth,canvasHeight);
            botCtx.drawImage(img,0,0);
        }

        //canvas添加鼠标事件
        topCan.addEventListener('mousedown',mousedown);
        topCan.addEventListener('mousemove',mousemove);
        topCan.addEventListener('mouseup',mouseup);
        //全局添加鼠标抬起事件
        document.addEventListener('mouseup',(e)=>{
            let x = (e||window.event).offsetX;
            let y = (e||window.event).offsetY;
            let classList = (e.target || {}).classList || [];
            if(classList.contains('img_tool'))return;
            if(!isCanUp){
                if(drawType == 'line'){
                    let clientX = topCan.getBoundingClientRect().x;
                    let clientY = topCan.getBoundingClientRect().y;
                    drawLine(x-clientX,y-clientY);
                }
                // topCan内容画到botCan上
                topToBot();
            }
        });
        //全局添加鼠标移动事件
        document.addEventListener('mousemove',(e)=>{
            if(isMove)return isMove = false;
            let x = (e||window.event).offsetX;
            let y = (e||window.event).offsetY;
            if(drawType == 'line'){
                let clientX = topCan.getBoundingClientRect().x;
                let clientY = topCan.getBoundingClientRect().y;
                drawLine(x-clientX,y-clientY);
            }
        });
    </script>
</body>
</html>

在这里插入图片描述
在这里插入图片描述

文字会有0.5像素左右的位置偏差，尝试用0.1-0.9等小数均不可以，希望有知道问题的大神告知一下，谢谢

总结

踩坑路漫漫长@~@

longlongago~~
关注
  • 10
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
canvas 绘图时位置偏离的问题解决
11-19
使用 canvas 绘图时，指定的 div 大小一定不要超过该 div 所能获得的最大范围，否则绘制的点会跟实际位置发生偏离。
canvas 画布内坐标混乱
lzzw的学习之路
03-29 1025
canvas 画布内坐标混乱
canvas绘制的线条位置错乱
weixin_46787337的博客
07-15 994
canvas标签的宽高可以通过js的方式设置,也可以在style样式中直接设置,但是这两种设置的方式显示的效果天差地别，Canvas的默认宽高是width150使用canvas标签一定要用js指定元素的宽高，不然就是bughttpshttps。...
canvas入门（六）旋转、偏移、缩放
风舞红枫的个人博客
03-26 5011
欢迎查看canvas第七节内容,本节内容主要介绍canvas的translate、scale、rotate三种方法 canvas之rotate <script type="text/javascript"> window.onload = function(){ var canvas = document.getElementsByTagName('canvas')[0]; ...
如何解决canvas 绘图时位置偏离
yunduanaoligei的博客
04-09 3334
今天主要聊聊如何解决canvas 绘图时位置偏离，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧 使用 canvas 绘图时，指定的 div 大小一定不要超过该 div 所能获得的最大范围，否则绘制的点会跟实际位置发生偏离。 例如 Untitled 1 <script type="text/javascrip
js canvas 绘图时位置偏离的问题
抱朴守拙
09-28 9020
使用 canvas 绘图时，指定的 div 大小一定不要超过该 div 所能获得的最大范围，否则绘制的点会跟实际位置发生偏离。 例如 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled 1</...
canvas 画线位置偏移问题
qq_52933608的博客
08-14 462
在<canvas></canvas>外加一层<div></div>即可解决。
canvas画图被放大且模糊的解决方法
01-19
先来理解canvas的这几个宽度和高度 canvas.width是画布的大小，而canvas.style.width是浏览器渲染的canvas的尺寸 第一个问题：画布的高度和宽度 画布的宽和高一定要在canvas标签中设置，如果是在css样式中设置，则不...
html5 Canvas画图教程(3)—canvas出现1像素线条模糊不清的原因
12-14
接上一篇canvas画线条教程 上次我们讲到，canvas有时候会出现1像素的线条模糊不清且好像更宽的情况，如下图： 这样的线条显然不是我们想要的。 这篇文章的目的就是弄清楚里面的原理，以及解决它。 大家都知道屏幕上...
canvas 画图板.zip
08-04
canvas 画图板的实现
详解Html5 Canvas画线有毛边解决方法
09-28
主要介绍了详解Html5 Canvas画线有毛边解决方法的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
html5画布获取位置,html5画布绘制位置不正确(html5 canvas drawing position not correct)
weixin_39810441的博客
06-04 399
html5画布绘制位置不正确(html5 canvas drawing position not correct)function fill_grid() {ctx.beginPath();var row_no = w/cw;var col_no = h/cw;for (var i=0;i{for (var j=0;j{ctx.rect(i*cw, j*cw, (i+1)*cw, (j+1)*cw...
html2canvas加上canvas2image保存网页为图片
扯文艺的猿的博客
07-22 8639
html2canvas可以通过纯JS对浏览器端进行截屏，但截图的精确度还有待提高，部分css不可识别，所以在canvas中不能完美呈现原画面样式 插件地址 官方网站：html2canvas Github：html2canvas 这里有个坑，不要下载最高版本的js，有很多坑。我从1.0降下来了。我用的是0.5版本的 这个是我在用的0.5版本: html2canvas....
Unity:如何改变Canvas中的文字清晰度
vitas_66的博客
10-16 1070
unity:Canvas下的文字如何变得清晰？
canvas绘制文字位置偏移
qq_44197554的博客
08-10 3150
前言 今天在做一个小功能，也就是给图片添加水印时发现，我用canvas绘制水印文字时，水印的位置总是和理想中的不一样，总是会发生偏移。 解决方法 遇到这个问题其实可以有两种解决方法： 根据偏移的距离找出一个合适的反向移动的距离。是不是不太理解这句话的意思，没关系，大家可以看我的另一篇文章拖拽水印插件这里有讲到距离怎么实现，以及源码。 也可以通过canvas的原生API：textBaseLine这个来实现，canvas在绘制文字的时候会有一个对齐的标准，同时也会受到字体的影响，我的解决方式是通过设置text
解决canvas缩放后鼠标定位偏移
creatlh的博客
11-06 707
因为canvas是基于屏幕像素的，而非css像素，所以页面被缩放后的css位置并非是canvas中的坐标位置，所以导致canvas中鼠标定位偏移问题。
解决uni中使用leaflet与canvas绘制动画不同设备绘制偏移问题
最新发布
ningmeng_CSDN的博客
02-26 455
1、详细描述：在开发过程中，通过浏览器模拟的移动端设备，切换设备类型会出现绘制位置的偏移，在iphone6、7、8设备上进行绘制是正常的，切换到iphone6、7、8plus就会出现偏移至右下方。2、切换设备，对比屏幕尺寸，发现设备像素和 CSS 像素之间比率是不同的，在转化canvas绘制的中心点时，需要根据设备像素和 CSS 像素之间比率进行计算。起初认为是使用canvas添加图层到地图上，使用的canvas问题，于是乎更换为uni自带的canvas来进行绘制，但结果依然是存在偏差的。
微信的新版canvas绘制的图案发生变形和偏移的问题
weixin_42349568的博客
01-26 695
150,如果不是这个值的话,绘制的内容会被拉伸.(想象着300。本来绘制的是正方形,结果绘制出来是个矩形,边的宽度也不一样。150画布上的内容被拉伸)画布初始的宽度是300。
canvas绘制圆环，在圆环上有文字跟随角度位置
03-24
很高兴能回答你的问题，以下是一个简单的实现方法： 1. 首先，你需要创建一个 HTML5 Canvas 元素，并使用 JavaScript 获取上下文： ```javascript var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ``` 2. 接下来，你需要定义一些变量来控制圆环的位置、大小等。这里我们定义变量 x 和 y 来表示圆环的中心点坐标，r 表示圆环的半径： ```javascript var x = canvas.width / 2; var y = canvas.height / 2; var r = 100; // 圆环半径 ``` 3. 然后，你需要绘制圆环。这里我们通过绘制两个圆弧来实现圆环的效果： ```javascript ctx.beginPath(); ctx.arc(x, y, r, 0, 2 * Math.PI); ctx.fillStyle = "#eee"; // 填充颜色 ctx.fill(); ctx.strokeStyle = "#666"; // 线条颜色 ctx.lineWidth = 10; // 线条宽度 ctx.stroke(); ``` 4. 接下来，你需要在圆环上绘制文字。为了让文字跟随圆环的位置变化，我们需要根据角度计算出文字在圆环上的坐标。这里我们定义一个函数来计算坐标： ```javascript function pointOnCircle(x, y, r, angle) { return { x: x + r * Math.cos(angle), y: y + r * Math.sin(angle) }; } ``` 5. 最后，你需要在圆环上绘制文字。这里我们通过一个 for 循环来绘制多个文字，每个文字的位置跟随角度变化： ```javascript var angles = [0, 45, 90, 135, 180, 225, 270, 315]; // 文字角度 var texts = ["A", "B", "C", "D", "E", "F", "G", "H"]; // 文字内容 ctx.font = "bold 24px sans-serif"; // 文字字体 ctx.textBaseline = "middle"; ctx.textAlign = "center"; for (var i = 0; i < angles.length; i++) { var angle = angles[i] * Math.PI / 180; // 角度转弧度 var pos = pointOnCircle(x, y, r, angle); ctx.fillText(texts[i], pos.x, pos.y); } ``` 希望这个实现方法能够帮助到你！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值