关于Canvas画线模糊的问题

最新推荐文章于 2021-01-17 12:42:20 发布
最新推荐文章于 2021-01-17 12:42:20 发布
阅读量802 收藏
点赞数 1
分类专栏： WPF 文章标签： Canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/du12300/article/details/103087924
版权

之前用WPF画线总觉模糊，让我这个新手郁闷了很长时间，直到今天研究了一下前端的Canvas茅塞顿开。

在Canvas上画一个单位宽度的线，计算机显示屏像素刻度在这条线的中间，也就是刻度把线分成了上下都是0.5单位的线，又由于已经是最小单位了，0.5也用一个显示，实际显示了两个单位宽度的线，在坐标上±0.5就可以了，看下面的效果图：
效果图
上面一条线是减0.5后的，下面没减，效果很明显

穆小木
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
HTML canvas系列-画线模糊问题（8）
木梓油
05-22 274
HTML canvas系列-画线模糊问题（8）1、devicePixelRatio2、scale方法3、示例 1、devicePixelRatio devicePixelRatio 返回当前显示设备的物理像素分辨率与 CSS 像素分辨率的比率。这个属性使得浏览器确定使用多少个屏幕的实际像素来绘制单个 CSS 像素。 canvas使用 window.devicePixelRatio 以确定应该添加多少额外的像素得到清晰的图像。 2、scale方法 canvas缩放方法。 3、示例 <!DOCTYPE h
canvas 显示模糊问题
XXHolic
07-03 3178
引子 近期的工作中，是继 canvas 宽高问题 之后碰到的第二个问题。 Origin My GitHub 显示模糊问题 在 PC 浏览器上显示时，没有发现明显的模糊，还可以接受。但在手机上就会有明显的模糊。这是示例，扫描访问二维码如下。 示例中，用 css 控制 canvas 的宽高，里面的图片展示效果不一致。查询资料，在 stackoverflow 中发现同样的问题，通过实际测试发现： canvas 元素自身的属性 width 和 height，决定了多少像素可以显示在画布上，如果不设置，wid
canvas详解（3）-模糊问题
风火一回，一生不毁
08-13 3026
canvas详解（3）-模糊问题 1.模糊的原因 canvas绘图理论上应该是清晰的，但是有些屏幕上看到的确是模糊的，究其原因有3点： css样式影响 canvas绘图是基于自身的宽高设置，必须明确指定宽高，不能使用百分比。如果出现线条锯齿状原因，一般都是因为，canvas的css样式放大了原本的canvas图形导致的。例如： &lt;canvas id="test" wid...
为什么canvas绘制的线条会模糊 有锯齿
qq_44884577的博客
04-11 3386
为什么canvas绘制的线条会模糊 有锯齿
canvas 边界模糊_Canvas绘制线条模糊的解决方案
weixin_34940781的博客
01-17 1003
前段时间，做一个跨平台app项目，需要绘制分时图和K线图。找了很多开源的js的图表库，包括echarts、highcharts等等，都不是很满意，原因有2：1、太臃肿，我实际上只要一个分时和一个K线图表，最多搭配几个线形图2、不满足需求。主要就是分时图，国内玩的js图表库，几乎都没有分时图。都是用1分钟线的收盘价线来做的，和中国股民的使用习惯完全不搭界。多年前有人开源了一个js绘制股票图形的库，叫...
前端--canvas绘图时线条模糊的解决方法
Sriven的博客
08-28 1399
用canvas画线出现线条模糊不清，是因为设置canvas的宽高时用的是css样式设置的，解决方法就是设置canvas的宽高时使用canvas自身的属性width和height设置，不要用css设置。 ...
为什么canvas绘制的线条会模糊、有锯齿？
热门推荐
甘焕的博客
05-30 2万+
有如下的代码：<style type="text/css"> canvas { position:absolute; height : 100%; width : 100%; } </style> <canvas id="canvas" width="100%" height="100%"> </canvas> <script type
详解Html5 Canvas画线有毛边解决方法
09-28
主要介绍了详解Html5 Canvas画线有毛边解决方法的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
delphi用canvas画线搞锯齿demo
01-15
例如，可以在画线前调用Canvas.SetPixelFormat函数，选择支持抗锯齿的像素格式。然后，使用Canvas的LineTo等方法进行画线。这种方法可能需要对Windows API有较深入的理解，实现起来相对复杂。 在提供的文件列表中，...
HTML5 Canvas线条背景动画.zip
07-11
同时，考虑到浏览器兼容性问题，可能还引入了polyfills或者条件语句来确保在不支持Canvas的旧版浏览器中也能提供合适的备选方案。 此外，这个特效可能还包括用户交互功能，例如响应鼠标移动事件，根据鼠标位置动态...
html5 Canvas画图教程(3)—canvas出现1像素线条模糊不清的原因
12-14
接上一篇canvas画线条教程 上次我们讲到，canvas有时候会出现1像素的线条模糊不清且好像更宽的情况，如下图：  这样的线条显然不是我们想要的。 这篇文章的目的就是弄清楚里面的原理，以及解决它。 大家都知道屏幕上最小的显示尺寸就是1像素，虽然小于1像素的东西可能显示不出来，但计算机可不管，他会试着画一下。 其实像素终究来说也是一个单位，假如我们把画布放大到足够大，足以看清楚每个像素，会是什么情况呢？大概是这个样子： 每个像素都有起止范围，如图所示，他们的范围从左起，跨过1像素，到右止。 如果我们画1像素线条的时候，遵循像素的起止范围，那么我们肯定能得到一个很标准的细线。如下： 但
html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法
09-28
相比于`arc()`和`arcTo()`，`quadraticCurveTo()`可以创建更不规则的弧形曲线，并且不会出现方向反转的问题。但要注意，即使将控制点拉得非常远离起点和终点，曲线也不会超出控制点的范围。因此，控制点的位置至关...
html5 canvas虚幻的线条背景动画
09-13
8. 性能优化：由于频繁的重绘可能导致性能问题，可以考虑使用局部更新而非全局更新，只对变化的部分进行重绘。此外，避免过多的线条同时绘制，可以控制线条的数量和生成频率。 通过以上技术，我们可以创建出一个...
canvas画线变粗变模糊的解决办法
qq_39122996的博客
10-10 3228
自己写的小例子 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>canvas动画</title> <style type="text/css"> #canvas { width: 500px; height...
canvas总结：线段宽度与像素边界
07-09 467
在canvas中，我们经常需要绘制线段，主要使用moveTo和lineTo两个方法，moveTo移动至线段起始点，lineTo将线段绘制至终点。同时，绘制线段时可以指定线段的宽度，使用lineWidth属性，lineWidth默认为1，必须大于0 moveTo(x,y):移动至坐标x，y lineTo(x,y):线段终点坐标x，y 简单绘制代码如下： var cont...
canvas绘图不清晰的解决方案
weixin_30648963的博客
07-27 818
现象描述 　　同样大小的图片（60x60px）用canvas和DOM绘制，结果发现canvas的画面质量要差很多。结果如下图所示。 　　上图中，左侧红框中的金币采用DOM绘制，右侧和下方的金币和文字等使用canvas绘制，结果canvas绘制的图片模糊不清。 原因分析 　　假设dpr = 2；图片大小为60x60px;对dpr有一定的了解基础。 　　1.DOM呈现图片过程 　　...
WPF中RadioButton组合取消选中
du12300的博客
11-11 1406
目的： RadioButton取消选中，两个RadioButton组合，如果其中一个已经被选中，再次点击则取消选中。 遇到的浅坑： 以下代码为错误，未能实现，无论怎么点击，RadioButton按钮一直选中不了。 if (RB6.IsChecked == true)//如果选中了，再选一次则取消选择 { RB6.IsChecked = false; } 错误原因： RadioButton只要单击，在执行点击事件之前IsChecked属性状态已经变成true，所以，不能通过判断Checked来设置C
canvas电子画板
最新发布
09-15
嗨！关于Canvas电子画板，我可以给你一些基本的信息。Canvas是HTML5提供的一个绘图API，它可以在网页上创建一个画布，并通过JavaScript来绘制图形、动画和交互...如果你有更多关于Canvas电子画板的问题，我会尽力回答。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值