canvas绘图出现模糊,解决方法
在项目开发中发现,canvas有一个问题,绘制的图会出现模糊现象。
解决方法之一:将canvas元素放大2倍,然后将整个canvas元素或者其父元素缩小两倍。
<!DOCTYPE html>
<html> <body>
<canvas id="myCanvas" width="400" height="300" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas> <script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.fillStyle = "yellow";
ctx.arc(200, 150, 100, 0, 2 * Math.PI);
ctx.stroke();
ctx.fill();
</script> </body> </html>
<!DOCTYPE html>
<html>
<head>
<style>
.box {
zoom: 0.5;
}
</style>
</head> <body>
<div class="box">
<canvas id="myCanvas" width="800" height="600" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas> </div>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.scale(2, 2); // 放大2倍
ctx.beginPath();
ctx.fillStyle = "yellow";
ctx.arc(200, 150, 100, 0, 2 * Math.PI);
ctx.stroke();
ctx.fill(); </script> </body> </html>
canvas绘图出现模糊,解决方法的更多相关文章
- canvas 1px 出现模糊解决方法及原理
关于canvas绘制1像素出现模糊的原因及解决方法 canvas是html5中非常强大的功能,但是在绘制的时候如果出现1像素,例如画一条1像素的线可能出现模糊情况. 一.解决方法 网上比较常见的解决方 ...
- echarts移动端字体模糊解决方法
echarts使用canvas画图,在移动端使用rem时候,若viewport的scale被缩放,则字体会发生模糊,本人采用的解决方法是在不同的dpr下使用不同的字体大小,具体代码如下: 获取字体大小 ...
- Android Studio代码字体模糊解决方法
问题描述: 我的电脑分辨率是(1920*1080),然而安装了Android Studio后代码的一些部分区域出现模糊的现象,应该是软件默认设置与高分屏有冲突. 如下图所示. 解决方法: 打开设置对话 ...
- Linux(Manjaro) - IntelliJ IDEA (JetBrains) 字体模糊解决方法
Linux(Manjaro) - IntelliJ IDEA 字体模糊解决方法 解决方法非常简单, 只要安装 JetBrains 提供的 jre 即可 使用 Octopi 或者 pacman 安装名为 ...
- Macbook外接显示器模糊解决方法
解决方法(此方法经本人测试失败) 下载这个http://www.elias.cn/uploads/Mac/patch-edid.zip.如果链接失效可以使用https://gist.github.co ...
- wpf软件某些分辨率下文字模糊解决方法
软件测试过程中发现在一台1600*900的分辨率电脑上文字模糊,甚至某些个文字出现压缩扭曲 经过实践,发现按下面方法能解决一点问题: 在窗口或控件上设置字体属性就可以了,如下: <UserCon ...
- HTML5 Canvas绘图详解 drawImage() 方法 有图有真相!
步骤 1 2 3 4 5 简介 是一个新的HTML元素,这个元素可以被Script语言(通常是JavaScript)用来绘制图形.例如可以用它来画图.合成图象.或做简单的(和不那么简单的)动画. ...
- graphviz 决策树绘图中文乱码解决方法
1.修改graphviz配置文件 <dir>C:\WINDOWS\Fonts</dir> 更改为 <dir>~/.fonts</dir> 2.将决策树d ...
- win10x软件字体有阴影很模糊的解决方法(软件分辨率与系统分辨率不一致)
devC++,百度网盘等软件都有这种情况 拿百度网盘举例:界面比较大,不能缩小,字体有阴影比较模糊 解决方法: 桌面右击百度网盘,选择属性, 点击兼容性,更改高DPI设置,替代高DPI缩放行为前面打上 ...
随机推荐
- collection 模块 双端队列
单端队列 用于同一进程中的队列,可以叫做单进程队列. queue 遵循先进先出,先进去的必须先出来 1.先进先出: impore queue q = queue.Queue() 实例化一个对象 q.p ...
- Codeforces Round #422 (Div. 2) A. I'm bored with life 暴力
A. I'm bored with life Holidays have finished. Thanks to the help of the hacker Leha, Noora mana ...
- 基于mqtt协议实现手机位置跟踪
Mqtt协议是物联网领域的一个标准协议,具有轻巧,对设备,带宽要求低,可靠稳定的特点,适合用来实现手机定位跟踪功能. 目前我初步搭建起来了整个可运行的框架,大致为如下思路:1.手机端通过位置服务,获取 ...
- java sleep和wait的区别和联系
Thread.sleep不会改变锁的行为,如果当前线程拥有锁,那么当前线程sleep之后,该锁不会被释放. Thread.sleep和Object.wait都会暂停当前的线程,让出cpu.Thread ...
- DELPHI中的消息处理机制(三种消息处理方法的比较,如何截断消息)
DELPHI中的消息处理机制 Delphi是Borland公司提供的一种全新的WINDOWS编程开发工具.由于它采用了具有弹性的和可重用的面向对象Pascal(object-orientedpasca ...
- 记录Linux常用命令
创建用户:useradd -m user1,-m表示同时创建用户主目录,默认会创建/home/user1目录 设置密码:passwd user1,然后就会出现设置密码的提示了 为新用户添加sudo权限 ...
- hihoCoder 1582 Territorial Dispute 【凸包】(ACM-ICPC国际大学生程序设计竞赛北京赛区(2017)网络赛)
#1582 : Territorial Dispute 时间限制:1000ms 单点时限:1000ms 内存限制:256MB 描述 In 2333, the C++ Empire and the Ja ...
- rails使用mysql数据库
简单步骤 1,安装mysql 安裝 MySQL Ubuntu 上安裝 MySQL 請執行: $ sudo apt-get install mysql-server mysql-common mysql ...
- mysql无法远程访问
最近使用Navicat for MySQl访问远程mysql数据库,出现报错, 显示“1130 - Host'xxx.xxx.xxx.xxx' is not allowed to connect to ...
- delphi 八字排盘源码(post数据以后,又分析数据)
procedure TForm1.Button14Click(Sender: TObject);var ls: TStringList; lstr: string; lss: TMemorySt ...