问题：canvas绘制图片，图片变模糊

设定一个一定尺寸的canvas，我这里设置的画布大小是400px*400px。当一张图片完全画到画布上的时候，大概率都会出现图片模糊的情况。
我拿下面一张图片画到canvas上作为例子，看上去应该比较明显的有模糊的感觉。

单方面的去修改图片精度，换成更高清的图片，事实证明确实有一丢丢用，但是效果不是很明显。况且我当时那个图片由于是手绘的，大小有5M，也不会切片加载图片，直接整个加载非常耗时。

那么如何去处理这样的问题呢？

生活中应该大家都遇到过这样的情况，同样的1080p的视频，在大屏显示器上看和手机上看效果是不一样的，大屏往往会让人感觉一种模糊感。而在手机小屏幕上，就会感觉异常的清晰。

要点：两个点

通过上面的一个例子，我们可以将图片放大，然后再绘制进原先大小的canvas中，这样图片的精度受损会比较小
了解canvas的绘制原理（*打星号）
canvas其实就是一张画布，所以如果可以的话，你可以将它放大，可以发现它也是有一个个的像素组成的。

如上图，可以看到一个个的网格。假设我们需要在上面绘制一条1px的线条，就会得到上面的效果。
但是canvas是的绘制方式是从中线开始绘制，并向两侧延伸的。

他会以图中的红线作为中线，向两边延伸，从而得到1px的纵向线条。但是像素是不允许0.5px的出现的，所以它索性就直接再延伸一点，将像素给填满。所以你看到的效果是下面这种

canvas - 绘制图片，图片变模糊问题解决）相关推荐

java canvas 画图片_[Java教程][HTML5] Canvas绘制简单图片
[Java教程][HTML5] Canvas绘制简单图片 0 2016-05-13 13:00:04 获取Image对象,new出来定义Image对象的src属性,参数:图片路径定义Image对象 ...
小程序 uni canvas绘制圆角图片圆角矩形
小程序 uni canvas绘制圆角图片圆角矩形获取canvas的宽度保证适应屏幕 uni.getSystemInfo({success: (res)=> { // res - 各种参数le ...
html5 简单图片效果,【HTML5】Canvas绘制简单图片教程，
[HTML5]Canvas绘制简单图片教程, 获取Image对象,new出来定义Image对象的src属性,参数:图片路径定义Image对象的onload方法,调用context对象的drawIm ...
为什么canvas绘制的线条会模糊、有锯齿？
有如下的代码: <style type="text/css">canvas {position:absolute;height : 100%;width : 100%; ...
canvas引入图片后变模糊
最近用Canvas画一些东西,结果用canvas绘制图片出来是模糊的!!!! 比如这样完全失真了!!! 这是我写的源代码 //html<canvas id="canvas" ...
unity3d 为什么清晰的图片会变模糊
写在前面当我们在Unity中,使用图片进行2D显示时,会发现显示出来的画面有明显的模糊或者锯齿,但是美术给的原图却十分清晰. 要改善这一状况实际上很简单. 造成这样的原因,是Unity在导入图片(或 ...
微信小程序保存canvas绘制的图片到本地，拒绝图片授权后继续授权
authorizeSaveImg() { //重新授权相册const that = this;wx.getSetting({success(res) {// 第一,直接调取保存,系统会自动调取授权if ...
Canvas 绘制圆形图片、绘制圆角矩形图片
前言在 Canvas 中我们常常遇到的一个需求绘制一个圆形或者一个圆角矩形图像,常用于展示用户头像,我们知道 CSS 有 border-radius 属性,但是 Canvas 是没有的~
ps 导出png-8图片会变模糊
出现这种情况的时候,在保存png-8图片的时候,索引色需要改为256,否则保存的图片颜色与原图会不一致. 转载于:https://www.cnblogs.com/hd1992/p/6198093.ht ...

canvas - 绘制图片，图片变模糊问题解决）

问题：canvas绘制图片，图片变模糊

要点：两个点

canvas - 绘制图片，图片变模糊问题解决）相关推荐

最新文章

热门文章