canvas 边界模糊_解决canvas画图模糊的问题
canvas 画图经常发现他是模糊的。解决这个问题主要从两个方面下手。
改变canvas渲染的像素
情况:画1像素的线条看起来模糊不清,好像更宽的样子。
解决方案
var ctx = canvas.getContext('2d');
ctx.translate(0.5, 0.5);
原理:大家都知道屏幕最小单位就是像素。假如把canvas放的足够大,我能看到下面样子。
每一个方格就是长和宽都为1px。当我们画1px线条时遵循像素的起止范围,我们能得到标准的细线。
但遗憾的是canvas的画法不一样。canvas的每条线都有一条无限细的“中线”,线条的宽度是从中线向两侧延伸的。如果我们还是从第2个像素点画一条线,那么线条的中线就会靠齐到第2个像素的起点,然后我们开始画了,问题也就来了:Canvas 的线条以中线向两侧延伸,而不是向某一边延伸(比如这里,如果只是往右侧延伸,那么我们的问题就不再是问题了),延伸过后我们的线条实际上是这样的:
但是计算机不允许出现<1px的图形。所以会做个折中,把两个像素都绘制了。如此一来,本来1px的线条,就成了看起来2px宽的线条。
如何解决这个问题,就是把线条中线和和像素中间点对齐就行了。
中间点位置很好找,向后移动0.5px。所以你们画线时可以这样:
ctx.moveTo(100.5,100.5);
ctx.lineTo(200.5,100.5);
ctx.lineTo(200.5,200.5);
ctx.lineTo(100.5,200.5);
ctx.lineTo(100.5,100.5);
或者
ctx.translate(0.5, 0.5);
2.设置显示比例
在浏览器的window变量中有一个devicePixelRatio的属性,该属性决定了浏览器会用几个(通常是2个)像素点来渲染1个像素,举例来说,假设某个屏幕的devicePixelRatio的值为2,一张100x100像素大小的图片,在此屏幕下,会用2个像素点的宽度去渲染图片的1个像素点,因此该图片在此屏幕上实际会占据200x200像素的空间,相当于图片被放大了一倍,因此图片会变得模糊。
**其实方案很简单,也很容易明白。我们可以创建一个两倍于实际大小的canvas,然后用css样式把canvas限定在实际的大小。
下面是实现具体代码例子:
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();
原来具体详细解释:请看这里
canvas 边界模糊_解决canvas画图模糊的问题相关推荐
- mysql 4 中文模糊查询_解决MySQL中文模糊查询问题
解决MySQL中文模糊查询问题: 我们在MySQL中进行中文模糊查询时,经常会返回一些与之不相关的记录,比如查找 "%a%" 时,返回的可能有中文字符,却没有 a 字符存在.对于此 ...
- 笔记本高分屏字体模糊_高分屏字体模糊win10怎么办_Win10系统高分屏字体模糊解决方法...
2018-03-20 18:48:02 现在的显示器屏幕分辨率越来越高,而可能也会发现高分屏的电脑字体比较小,通过放大屏幕缩放比例来增大字体的话,就会遇到字体模糊的情况,那么Windows10系统高分 ...
- mysql中文模糊查询_解决MySQL中文模糊查询问题
解决MySQL中文模糊查询问题: 我们在MySQL中进行中文模糊查询时,经常会返回一些与之不相关的记录,比如查找%a%时,返回的可能有中文字符,却没有a字符存在.对于此问题目前发现一种方法可以很方便解 ...
- canvas动画:黑客帝国_使用Canvas API进行动画处理-第3部分:重力和动态渲染
canvas动画:黑客帝国 Over in Part 2 of this series we created a ball that would ricochet around the screen ...
- canvas动画科技园_使用 canvas 实现精灵动画
在最近项目中需要实现一个精灵动画,素材方只提供了一个短视频素材,所以在实现精灵动画之前先介绍两个工具来帮助我们更好的实现需求.在这篇文章中,主要是介绍两个命令行工具来实现将一个短视频文件转化成一张 s ...
- canvas动画科技园_构建canvas动画框架(一)
最近一直在做canvas动画效果,发现canvas这个东西做动画不是不可以.相对于flash,它太底层.如果有给力的编辑器或者给力的框架的话,它就能发挥出更大的威力. 于是决定自己写一个简单一点的动画 ...
- mysql 中文模糊查询_解决mysql中文模糊查询问题的方法
mysql进行中文模糊检索时,经常会返回一些与之不相关的记录,如查找 "%a%" 时,返回的可能有中文字符,却没有a字符存在. 通过阅读MySQL的Manual,发现了一种可以满意 ...
- 怎么用canvas画秒针_用canvas画一个钟表
body{ background: #000000; } #c1{ background: #FFFFFF; } span{color: #FFFFFF;} var oC=document.getEl ...
- matlab 显示图像 画布太大,canvas画图被放大且模糊的解决方法
先来理解canvas的这几个宽度和高度 canvas.width是画布的大小,而canvas.style.width是浏览器渲染的canvas的尺寸 第一个问题:画布的高度和宽度 画布的宽和高一定要在 ...
最新文章
- 郎凤娥谈定西实施煤粉锅炉改造项目
- IEEE发布人工智能伦理标准,确保人类不受影响
- lnmp环境如何添加域名和虚拟主机
- MIT自然语言处理第五讲:最大熵和对数线性模型
- 关于scriptManager与JS代码兼容问题
- Python -- 循环技巧(Looping Techniques)
- mysql去重DISTINCT
- POJ 1187 陨石的秘密 (线性DP)
- C语言和我的世界指令哪个难,我的世界难度有什么区别 难度选择指令介绍
- 7-28 猴子选大王 (20 分) 最易理解的方法
- 常见音频编码格式解析
- 【高精】Oliver的成绩
- 微信图文素材中图片url替换
- C#:实现gnome sort 侏儒排序算法(附完整源码)
- DNS域名解析服务正向解析和反向解析
- java 跨服务器 文件拷贝,java拷贝远程服务器上文件
- 有限体积法及其网格简介
- Win7中的软链接详解(mklink命令)
- OpenGL——二次曲面函数(球面-圆锥面-圆柱面)
- android程序设计魔方矩阵,【图片】【记录】零基础用c4droid写一个3D魔方软件_c4droid吧_百度贴吧...
热门文章
- 颠覆HTTP,IPFS今天成功上位了吗?
- 都在用MySQL!为啥你的SQL慢?为啥你建的索引常失效?
- Linux盘符漂移问题
- oracle solaris翻译,opensolaris是什么意思
- Array SSL客户端下载安装——您的浏览器没有获得Java Virtual Machine(JVM)支持。可能由于没有安装JVM或者已安装但是没有启用。请安装JVM1.5或者以上版本
- 【MySQL】那些年我们玩过的MySQL错误日志-error log
- 解密:华为逆变器为何在今年一骑绝尘?
- java程序员入职第一天搭建环境
- 外卖小程序源码带后台和数据库
- 科学知识图谱绘制方法、步骤及工具