canvas画图出现模糊现象

解决方法

使用canvas进行画图在分辨率高的设备上会出现模糊现象，解决这种问题的思路是:

首先讲画布的大小进行按照设备进行放大devicePixelRatio属性进行相应的调整，设个属性是表示浏览器通常会使用几个像素点进行渲染我们设定的1像素（通常会使用2像素进行渲染）。
然会将画好的图像使用scale()进行相应的放大
这样就可以将图像的模糊问题进行解决了。
下面是应用的一个小例子:

var canvas = document.getElementById("canvas")context= canvas.getContext("2d");  var devicePixelRatio = window.devicePixelRatio || 1;var backingStoreRatio = context.webkitBackingStorePixelRatio ||context.mozBackingStorePixelRatio ||context.msBackingStorePixelRatio ||context.oBackingStorePixelRatio ||context.backingStorePixelRatio || 1;var ratio = devicePixelRatio / backingStoreRatio;canvas.width = canvas.width * ratio;canvas.width = canvas.height* ratio;context.scale(ratio, ratio);ctx.translate(0.5, 0.5);ctx.lineWidth = 1;ctx.moveTo(2.5, 2);ctx.lineTo(98.5, 2);ctx.lineTo(98.5, 98);ctx.lineTo(2.5, 98);ctx.lineTo(2.5, 2);ctx.stroke();

参考文档

html5 canvas绘制图片模糊的问题
设备像素比devicePixelRatio简单介绍
解决canvas画图模糊的问题

canvas画图出现模糊现象相关推荐

解决canvas画图模糊的问题
canvas 画图经常发现他是模糊的.解决这个问题主要从两个方面下手. 改变canvas渲染的像素情况:画1像素的线条看起来模糊不清,好像更宽的样子. 解决方案 var ctx = canvas.g ...
matlab 显示图像画布太大,canvas画图被放大且模糊的解决方法
先来理解canvas的这几个宽度和高度 canvas.width是画布的大小,而canvas.style.width是浏览器渲染的canvas的尺寸第一个问题:画布的高度和宽度画布的宽和高一定要在 ...
canvas 边界模糊_解决canvas画图模糊的问题
canvas 画图经常发现他是模糊的.解决这个问题主要从两个方面下手. 改变canvas渲染的像素情况:画1像素的线条看起来模糊不清,好像更宽的样子. 解决方案 var ctx = canvas.g ...
canvas画图模糊问题
使用canvas画图时,会遇到图片模糊的问题. 1.可以使用hidpi-canvas-polyfill: 举个栗子 var getPixelRatio = function(context) {var ...
canvas 画图移动端出现锯齿毛边的解决方法
最近项目中用的canvas 越来越多,但是之前都是在canvas 上画图片, 最近这次是做一个折线图,自己画出来以后发现有锯齿,百度一番后找到了解决办法,记录到博客里. 声明一下,我用的是第二种方法, ...
HTML5 canvas画图
HTML5 canvas画图 HTML5 <canvas> 标签用于绘制图像(通过脚本,通常是 JavaScript). 不过,<canvas> 元素本身并没有绘制能力(它仅仅 ...
html5 canvas 画图移动端出现锯齿毛边的解决方法
html5 canvas 画图移动端出现锯齿毛边的解决方法参考文章: (1)html5 canvas 画图移动端出现锯齿毛边的解决方法 (2)https://www.cnblogs.com/dear ...
小程序---canvas画图，生成分享图片，画图文字换行
小程序目前只支持转发,不支持分享朋友圈,为了能实现分享,很多线上小程序通过生成分享图片,保存到相册来给用户增加分享的可能. 具体思路及简要代码如下: 一:canvas画图drawCanvas:func ...
[转]html5 Canvas画图教程(1)—画图的基本常识
今天看到一个讲Canvas的教程,很通俗移动,所以转载了下. 虽然大家都称Canvas为html5的新标签,看起来好像Canvas属于html语言的新知识,但其实Canvas画图是通过javascri ...

canvas画图出现模糊现象

解决方法

参考文档

canvas画图出现模糊现象相关推荐

最新文章

热门文章