html5 canvas 绘制横线竖线时不清晰的解决办法

最新推荐文章于 2024-08-10 09:38:57 发布
原创 最新推荐文章于 2024-08-10 09:38:57 发布 · 7.5k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html5

本文探讨了在使用Canvas绘制图形时遇到的横竖线条清晰度问题，解释了原因并提供了解决方法。通过调整线条起点的坐标，可以确保线条在屏幕上呈现为预期的1像素宽度。

在绘制一个Tip模样的图案时遇到了令人郁闷的事情：当lineHeight为1时，斜线都很清晰，唯独横线和竖线不清晰，目测占了两个像素，而且透明度都被减半；如图：

，后来经过查资料，终于知道，画布上的坐标并未对应网页里的像素，假如我们要在10,10这个点画横线到100,10，在canvas绘制这个1px的横线，它会把这个1px劈成两半，一半放在x,9上，一半放在x,10上，然后显示器根据你传来的东西会显示成图片上看到的结果。

解决办法：

           如果横线，那就在y值上加个0.5，如上面的，用10，10.5 到100,10.5就可以了。

          如果竖线，那就在x值上加个0.5，。。。。其他就不多说了，下面是成果图：


that's all ,thanks..

canvas绘制横竖坐标轴（带有箭头和刻度）
大剑师兰特的GIS世界
02-08 2982
canvas如何绘制带有箭头和标有刻度的横竖坐标轴呢？ 首先使用for循环遍历横坐标轴的刻度位置，然后使用beginPath()、moveTo()和lineTo()方法绘制刻度线，接着使用font、textAlign和fillText()方法设置字体样式、对齐方式和填充文本内容，最后使用stroke()方法将它们渲染到画布上。同样的操作也应用于纵坐标轴的刻度。
canvas 线条不清楚的问题
weixin_34292959的博客
10-29 227
对于canvas 画出的1px线条不清楚的问题， 1 一般是坐标点+0.5像素的问题， 但是有时要考虑viewpoint的问题，让canvas的width = 980，同时viewpoint = 980 (默认是980); 2 考虑canvas 想过画布 变 2 倍的情况， 然后利用的时候 缩小为 2 * 0.5(pollyfill.js) 考虑下 shim pollyfil...
原生js使用canvas实现鼠标绘制直线
weixin_72388638的博客
04-08 4929
直线可以看成是一小段一小段的线段组成，并且两点确定一条直线；首先当鼠标左键点击时候获取鼠标左键xy坐标，把当前获取得到的xy坐标赋值给线段起始点的坐标值，当鼠标移动后再获取新的鼠标位置x2和y2 再把获取得到到x2和y2赋值给线段的末尾点坐标值 ，之后两点连起来就是一段线段。之后再画一条线段，只要把前面那段线段的末尾点为起始点，再获取鼠标移动时候产生的新点，把两端相连就是一大段线段，如此重复。
H5画布 canvas（一）canvas简介、绘制圆形/矩形、案例饼状图绘制
热门推荐
商务合作 | 共同学习 | 携手共进
02-18 10万+
canvas 简介、canvas 绘图基础(标签介绍、上下文context、beginPath 状态)、案例：绘制表格、绘制饼状图。
Canvas画线
yleave的博客
11-19 1316
  画一条线： var ctx = csv.getContext('2d'); ctx.moveTo(50,50); ctx.lineTo(50,150); ctx.strokeStyle='blue'; ctx.stroke();   其中，stroke()方法会实际地绘制出通过 moveTo() 和 lineTo()方法定义的路径。默认颜色是黑色。 可以先画线最后再调用 stroke 方法...
canvas绘制的线条位置错乱
weixin_46787337的博客
07-15 1372
canvas标签的宽高可以通过js的方式设置,也可以在style样式中直接设置,但是这两种设置的方式显示的效果天差地别，Canvas的默认宽高是width150使用canvas标签一定要用js指定元素的宽高，不然就是bughttpshttps。...
canvas绘制基础图形（canvas 气泡框 网格线 三角形 圆角矩形 箭头）
qq_32886245的博客
03-13 1738
canvas绘制基础图形 这两天整理了下项目中用到的函数，学着博客里的方法封装成了一个插件，若有不对的地方，还请不吝赐教，谢谢！ javascript立即执行函数 怎样用原生JS封装自己需要的插件 canvas Two 三角形 Canvas学习：绘制箭头 功能介绍 1.初始化画布 initCanvas 2.绘制网格线 drawGridlines 3.绘制圆点 drawDot 4.绘制圆环...
canvas绘制中国象棋
PPaio的博客
08-27 627
const draw = (id) => { let pieces = [ //黑 { x: 0, y: 0, name: "車", type: "black" }, { x: 1, y: 0, name: "馬", type: "black" }, { x: 2, y: 0, name: "象", type: "black" }, { x: 3, y: 0, name: "仕", type: "black".
html怎么制作流动横条,利用HTML5 Canvas实现竖直流动线条特效
weixin_30366107的博客
06-27 1139
特效描述：利用HTML5 Canvas实现 竖直流动 线条特效。利用HTML5 Canvas实现竖直流动线条特效代码结构1. HTML代码Click on the Canvas for new Colors :)var canvas = document.getElementById("canvas");var ctx = canvas.getContext("2d");var bgg = doc...
canvas绘制表格
weixin_44813417的博客
03-29 919
<body> <div id="container"> <canvas id="canvasEle"></canvas> </div> <script> ( function() { var canvas = document.querySelector('#canvasEle') var ctx = canvas.getContex
HTML5 Canvas制作数独游戏（一）
shinian389789252的博客
09-01 1894
HTML5 Canvas制作数独游戏（一）
html5 Canvas画图教程(3)—canvas出现1像素线条模糊不清的原因
12-14
接上一篇canvas画线条教程 上次我们讲到，canvas有时候会出现1像素的线条模糊不清且好像更宽的情况，如下图：  这样的线条显然不是我们想要的。 这篇文章的目的就是弄清楚里面的原理，以及解决它。 大家都知道屏幕上最小的显示尺寸就是1像素，虽然小于1像素的东西可能显示不出来，但计算机可不管，他会试着画一下。 其实像素终究来说也是一个单位，假如我们把画布放大到足够大，足以看清楚每个像素，会是什么情况呢？大概是这个样子： 每个像素都有起止范围，如图所示，他们的范围从左起，跨过1像素，到右止。 如果我们画1像素线条的时候，遵循像素的起止范围，那么我们肯定能得到一个很标准的细线。如下： 但
Canvas 绘制横竖坐标轴（带有箭头和刻度）
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
08-10 1635
Canvas 是一种用于在网页上绘制图形的方法，它依赖于 HTML5标签和 JavaScript 来控制绘图行为。通过使用 Canvas API，开发者可以绘制路径、矩形、圆形、字符以及添加图像。// 清除画布// 定义自定义样式// 橙色// 绘制横轴// 起始点// 结束点// 绘制纵轴// 起始点// 结束点// 添加箭头ctx.fill();ctx.fill();
使用Canvas画两条线
chen_zan_yu_的博客
06-23 2526
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> functi...
canvas学习-----画直线
weixin_33725807的博客
04-15 283
画布 　　1.添加canvas标签 可以通过CSS或者JS来设置canvs标签的width,height;Ps: <canvas id="cvs"></canvas> 　　2.Css设置canvs的width,height; #cvs { position: absolute; top: 10px; ...
canvas1：简单介绍、开始使用、画直线+虚线
Start2019
07-03 2806
目录 一、简单介绍 二、开始使用 三、画直线、虚线 3.1 画直线 1. 画直线的步骤： 2. 设置直线的样式 3. 绘制多条直线 3.2 画虚线 四、总结： 参考了廖雪峰老师的笔记。
html5 Canvas画图3：1像素线条模糊问题
weixin_30795127的博客
11-27 235
接上一篇canvas画线条教程 上次我们讲到，canvas有时候会出现1像素的线条模糊不清且好像更宽的情况，如下图： 这样的线条显然不是我们想要的。这篇文章的目的就是弄清楚里面的原理，以及解决它。 大家都知道屏幕上最小的显示尺寸就是1像素，虽然小于1像素的东西可能显示不出来，但计算机可不管，他会试着画一下。 其实像素终究来说也是一个单位，假如我们把画布放大到足够大，足以看清楚每个像素，会是...
html5 canvas绘图模糊总结
Win32FanEx 的专栏
05-12 2376
canvas绘图过程中出现模糊情况及解决办法
canvas 画线位置偏移问题
qq_52933608的博客
08-14 971
在<canvas></canvas>外加一层<div></div>即可解决。
c++ builder 中TStringGrid 横线竖线不显示
最新发布
06-17
### 解决方案 在C++ Builder中，`TStringGrid` 控件的网格线不显示问题通常可以通过调整控件的属性或自定义绘制事件来解决。以下是详细的解决方案： #### 1. 检查 `Options` 属性 确保 `TStringGrid` 的 `Options` 属性中启用了网格线显示选项。具体来说，需要检查以下两个选项是否被启用： - `goFixedVertLine`：固定列的垂直线。 - `goFixedHorzLine`：固定行的水平线。 - `goVertLine`：非固定区域的垂直线。 - `goHorzLine`：非固定区域的水平线。 如果这些选项未启用，可以通过代码手动设置： ```cpp AdvStringGrid1->Options = AdvStringGrid1->Options << goFixedVertLine << goFixedHorzLine << goVertLine << goHorzLine; ``` #### 2. 自定义绘制单元格 如果通过设置 `Options` 属性仍无法解决问题，可以使用 `OnDrawCell` 事件自定义绘制单元格，并手动绘制网格线。以下是实现代码示例： ```cpp void __fastcall TForm1::AdvStringGrid1DrawCell(TObject *Sender, int ACol, int ARow, TRect &Rect, TGridDrawState State) { // 绘制背景 if (gdSelected in State) { AdvStringGrid1->Canvas->Brush->Color = clHighlight; AdvStringGrid1->Canvas->Font->Color = clHighlightText; } else { AdvStringGrid1->Canvas->Brush->Color = clWindow; AdvStringGrid1->Canvas->Font->Color = clWindowText; } AdvStringGrid1->Canvas->FillRect(Rect); // 绘制文字 String text = AdvStringGrid1->Cells[ACol][ARow]; DrawText(AdvStringGrid1->Canvas->Handle, (LPCTSTR)(text.c_str()), text.Length(), &Rect, DT_CENTER | DT_VCENTER | DT_SINGLELINE); // 绘制网格线 AdvStringGrid1->Canvas->Pen->Color = clSilver; AdvStringGrid1->Canvas->MoveTo(Rect.Left, Rect.Bottom - 1); AdvStringGrid1->Canvas->LineTo(Rect.Right, Rect.Bottom - 1); AdvStringGrid1->Canvas->MoveTo(Rect.Right - 1, Rect.Top); AdvStringGrid1->Canvas->LineTo(Rect.Right - 1, Rect.Bottom); // 如果是最后一列或最后一行，额外绘制边界线 if (ACol == AdvStringGrid1->ColCount - 1) { AdvStringGrid1->Canvas->MoveTo(Rect.Right - 1, Rect.Top); AdvStringGrid1->Canvas->LineTo(Rect.Right - 1, Rect.Bottom); } if (ARow == AdvStringGrid1->RowCount - 1) { AdvStringGrid1->Canvas->MoveTo(Rect.Left, Rect.Bottom - 1); AdvStringGrid1->Canvas->LineTo(Rect.Right, Rect.Bottom - 1); } } ``` #### 3. 调整系统主题影响 某些情况下，Windows 系统主题可能会影响 `TStringGrid` 的网格线显示效果。可以通过禁用主题绘制来解决此问题： ```cpp AdvStringGrid1->ParentBackground = false; ``` 此外，还可以通过设置 `DoubleBuffered` 属性为 `true` 来减少闪烁问题[^1]。 #### 4. 兼容性与异常处理 如果仍然遇到问题，可能是由于底层库或编译器版本导致的兼容性问题。引用中提到的部分修复内容可能与此相关[^3]。建议更新到最新版本的 C++ Builder，并检查是否存在已知的 bug 或补丁。 --- ###
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值