JS前端绘图canvas模糊问题示例高清图解

目录
  • 缘起
  • 模糊的原因
    • 1、canvas 的大小和 css 的大小不一致
    • 2、当绘制的东西不足 1px，会自动补足 1px
    • 3、受到高清屏的影响
  • 结语

缘起

模糊在 canvas 中应该算是个经典问题了，相信大家也曾经看过很多相关文章，但总是记不住，因为概念很多，描述的也不够明确，所以我就自己总结了一篇，刨去了复杂概念，顺带画了几张高清图，以此加深理解（我觉得画的贼好，记不住就来打我）。

模糊的原因

总的来说模糊的原因大致可分为以下三点：

1、canvas 的大小和 css 的大小不一致

  • 首先让我们先抛弃 css 大小的概念，请记住我们所有的绘图操作都是在 canvas 这个画布大小上进行的；
  • canvas 绘制完成后最终在页面渲染的时候才和 css 大小有关。这时候把 canvas 想象成一张大小固定的照片，把 css 想象成一个容器，不管 css 尺寸如何，这张照片都会铺满整个容器（机制就是这样，没有为啥）。所以如果长宽比例相同就会等比缩放；
  • 如果长宽比例不同就会拉伸变形；如果大小一样就刚刚好。

就像下面这样：

所以一般情况下我们需要把 canvas 和 css 设置成一样大：

<canvas width="600" height="600" style="width: 600px; height: 600px;"></canvas>

2、当绘制的东西不足 1px，会自动补足 1px

大家应该也有听说个这个说法，说在 (100, 0) 处画一条 1px 的竖线，画出来的线会感觉很模糊。

因为这涉及到 canvas 绘制线条的方式，(100, 0)是线的中心点，绘制的时候会从这个点向两边扩散 1px/2=0.5px，而不是单边扩散，但是我们无法绘制出半个像素，最小也得是 1px，所以就会自动补足成 1px（而且是纯色），这样一来两边各扩散 1px 总共就变成了 2px。

但仅仅这样线条也不应该模糊，顶多变粗了，再复杂的点的图形也只是会表现出有锯齿感而已。其实模糊的主要原因在于自动补足的这一部分的颜色已经不是之前那个颜色了，而是根据某种算法（比如取周围的近似色）生成的。

那为什么要做颜色改变呢？主要就是为了解决刚才说的锯齿问题而做的一种平滑处理的手段。

没看懂？那就看图，大概是下面这个样子

赞 (0)

相关推荐

  • JS前端使用canvas搞一个手势识别

    JS前端使用canvas搞一个手势识别

    目录 前言 具体步骤 第一步:手势绘制 第二步:重新取样 第二步:平移 第三步:旋转 第四步:缩放 第五步:手势录入 第六步:比较(重点) 注意事项 比较的基本套路(可跳过) 关于多笔画(可跳过) 小结 前言 最近在看一些关于图形学的东西,写了个一笔画手势识别的小 demo,效果大概是下面这个样子: 如果你是初次看过肯定会觉得很有意思

  • JS前端以轻量fabric.js实现示例理解canvas

    目录 缘起 fabric.js 初体验 fabric.js 的大体结构 canvas 能干嘛? 小结 缘起 最近想系统看下 canvas 这个东西,所以找了一个库看看,本来打算写一两篇文章沉淀一下,发现东西有点多

  • JS前端使用canvas动态绘制函数曲线示例详解

    JS前端使用canvas动态绘制函数曲线示例详解

    目录 前言 第一步:绘制坐标系 1.如何确定 x 轴和 y 轴的边界值 2.不是传入多少网格数就是多少网格 3.如何让坐标原点位于画布中心 4.刻度总是会有浮点数 第二步:画函数曲线 第三步:绘制辅助线和交点坐标 第四步:平移 第五步:缩放 第六步:动态绘制曲线 第七步:模糊到高清 前言 不说废话,我们直入主题.先来看看读了这篇文章你将得到什么,就是下面这个东西啦(是不是很清晰很顺滑): 那具体要做什么呢,我们来简单拆解一下步骤: 绘制坐标系 绘制多条函数曲线 绘制辅助线和坐标点 支持平移.缩放

  • JS前端html2canvas手写示例问题剖析

    目录 前言 感性认识 第一步:解析 dom 树 第二步:按层叠规则分组(重点) 第三步:创建画布 第四步:渲染 另一种方法(html->svg->canvas) 结语 前言 这两天把 html2canvas 这玩意抽丝剥茧了一下,搞了个勉强能跑的小 demo,麻雀虽小五脏俱全,来看看实现的效果吧(跟基金一样的绿,离离原上谱)

  • JS前端使用canvas实现物体的点选示例

    目录 前言 hover 的实现 click 的实现 矩形的坐标哪来的 点在多边形内的其他判断方法 穿透 本章小结 前言 上个章节中我们已经给物体加上了被选中的效果,现在可以上点交互了,这个章节主要实现的就是物体的 hover 和 click 事件,当鼠标 hover 到物体上时,我们会改变鼠标的样式使其变成移动的样子: 当 hover 到控制点时则会变成对应的操作样式: 当 click 物体时,会将物体变成激活态,也就是展示边框和控制点.话不多说,直接开撸 hover 的实现 首先我们来处理鼠标

  • 前端canvas中物体边框和控制点的实现示例

    前端canvas中物体边框和控制点的实现示例

    目录 前言 关于边框 关于控制点 本章小结 前言 在上一章中我们已经搞定了下层画布,也就是能够对物体进行绘制了,现在就可以开始搞搞上层交互了. 不过在和画布产生交互之前,我们还要做一件事情,就是让物体支持边框和控制点的绘制,亦即物体被选中时的状态,就像下面这样: 这样一来如果要对物体进行一些操作,那就变成了对上图中的红色和蓝色边框进行一些操作,而边框一定是矩形的 (很少有其他形状的,反正我是没咋见过),即便物体不是四四方方的,可以类比一些低代码和可视化平台的操作(调试页面也是).所以选中态是产生

  • JS前端绘图canvas模糊问题示例高清图解

    JS前端绘图canvas模糊问题示例高清图解

    目录 缘起 模糊的原因 1.canvas 的大小和 css 的大小不一致 2.当绘制的东西不足 1px,会自动补足 1px 3.受到高清屏的影响 结语 缘起 模糊在 canvas 中应该算是个经典问题了,相信大家也曾经看过很多相关文章,但总是记不住,因为概念很多,描述的也不够明确,所以我就自己总结了一篇,刨去了复杂概念,顺带画了几张高清图,以此加深理解(我觉得画的贼好,记不住就来打我). 模糊的原因 总的来说模糊的原因大致可分为以下三点: 1.canvas 的大小和 css 的大小不一致 首先让

  • JS前端使用Canvas快速实现手势解锁特效

    JS前端使用Canvas快速实现手势解锁特效

    目录 前言 Demo 需要实现的功能 初始化数据和页面渲染 touchstart 手指开始触摸事件 touchmove 监听手指滑动事件 touchend 监听手指触摸结束事件 页面滚动处理 连接的两颗星星之间有其他星星时 前言 之前在公司开发活动项目的时候,遇到一个项目需求要让用户使用手势画星位图来解锁星座运势,一看设计稿,这不就是我们平时的手机屏幕解锁吗?于是上网搜了一些关于手势解锁的文章,没找到可以直接复用的,于是只能自己打开canvas教程,边学习边设计实现了这个功能,同时兼容了移动端和

  • JS前端使用canvas编写一个签名板

    JS前端使用canvas编写一个签名板

    目录 需求 方案分析canvas 涉及知识点 代码 以上代码,未开发的点 需求 需求是做不完了,福利也被砍了,旅游也泡汤了,手上有2个需求,还没做完,PM就来新需求了. 开发一个签名板:要求PC端/移动端都能用.扫码签名.实时同步.可以改变笔画粗细.笔画颜色.可以生成base64图片. 方案分析canvas 1.获取页面[canvas]元素,设置宽高(800*200) 2.通过**HTMLCanvasElement.getContext()**  方法返回[canvas] 的上下文ctx 3.初

  • JS前端操作 Cookie源码示例解析

    目录 引言 源码分析 使用 源码 分析 set get remove withAttributes & withConverter 总结 引言 前端操作Cookie的场景其实并不多见,Cookie也因为各种问题被逐渐淘汰,但是我们不用Cookie也可以学习一下它的思想,或者通过这次的源码来学习其他的一些知识. 今天带来的是:js-cookie 源码分析 使用 根据README,我们可以看到js-cookie的使用方式: // 设置 Cookies.set('name', 'value'); //

  • Android编程之绘图canvas基本用法示例

    本文实例讲述了Android编程之绘图canvas基本用法.分享给大家供大家参考,具体如下: MainActivity的代码如下: package example.com.myapplication; import android.os.Bundle; import android.app.Activity; public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedIns

  • JS前端基于canvas给图片添加水印

    JS前端基于canvas给图片添加水印

    前两天给个人网站添加了一个小功能,就是在文章编辑上传图片的时候自动给图片加上水印.给网页图片添加水印是个常见的功能,也是互联网内容作者保护自己版权的方法之一.本文简单记录一下借助canvas在前端实现图片添加水印的实现方法. canvas元素其实就是一个画布,我们可以很方便地绘制一些文字.线条.图形等,它也可以将一个img标签里渲染的图片画在画布上. 在上传文件到后端的时候,使用input标签读取用户本地文件后得到的其实是一个Blob对象(更精确的说是File对象,特殊的Blob对象):而在页面

  • JS前端可视化canvas动画原理及其推导实现

    目录 前言 动画的本质 动画的实现 动画的推导 小结 前言 到目前为止我们的 fabric.js 雏形已经有了,麻雀虽小五脏俱全,我们不仅能够在画布上自由的添加物体,同时还实现了点选和框选,并且能够对它们做一些变换,不过只有变换这个操作还不够灵活,要是能够让物体动起来就好了,于是就引入了这个章节的主题:动画,以及动画最核心的一个问题,如何保证在不同的电脑上达到同样的动画效果?然后说干就干,立马开撸. 虽然我写的是系列文章,但每个章节单独食用是木问题的,所以,请放心大胆的看

  • JS前端使用canvas实现扩展物体类和事件派发

    目录 前言 FabricImage 图片类 事件派发 小结 前言 虽然我们讲了这么多个章节,但其实目前为止就只有一个 Rect 类能用,略显单调.于是乎,为了让整个画布稍微生动一些,这个章节我们来尝试增加一个图片类,如果你以后需要扩展一个物体类,也是用同样的方法. 另外有时候我们还希望在物体属性改变时或者画布创建后做一些额外的事情,这个时候事件系统就派上用场啦,也就是我们常说的发布订阅,我觉的这是前端应用最广的设计模式没有之一了

随机推荐