在项目开发中发现，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绘图出现模糊，解决方法的更多相关文章

  1. canvas 1px 出现模糊解决方法及原理

    关于canvas绘制1像素出现模糊的原因及解决方法 canvas是html5中非常强大的功能,但是在绘制的时候如果出现1像素,例如画一条1像素的线可能出现模糊情况. 一.解决方法 网上比较常见的解决方 ...

  2. echarts移动端字体模糊解决方法

    echarts使用canvas画图,在移动端使用rem时候,若viewport的scale被缩放,则字体会发生模糊,本人采用的解决方法是在不同的dpr下使用不同的字体大小,具体代码如下: 获取字体大小 ...

  3. Android Studio代码字体模糊解决方法

    问题描述: 我的电脑分辨率是(1920*1080),然而安装了Android Studio后代码的一些部分区域出现模糊的现象,应该是软件默认设置与高分屏有冲突. 如下图所示. 解决方法: 打开设置对话 ...

  4. Linux(Manjaro) - IntelliJ IDEA (JetBrains) 字体模糊解决方法

    Linux(Manjaro) - IntelliJ IDEA 字体模糊解决方法 解决方法非常简单, 只要安装 JetBrains 提供的 jre 即可 使用 Octopi 或者 pacman 安装名为 ...

  5. Macbook外接显示器模糊解决方法

    解决方法(此方法经本人测试失败) 下载这个http://www.elias.cn/uploads/Mac/patch-edid.zip.如果链接失效可以使用https://gist.github.co ...

  6. wpf软件某些分辨率下文字模糊解决方法

    软件测试过程中发现在一台1600*900的分辨率电脑上文字模糊,甚至某些个文字出现压缩扭曲 经过实践,发现按下面方法能解决一点问题: 在窗口或控件上设置字体属性就可以了,如下: <UserCon ...

  7. HTML5 Canvas绘图详解 drawImage() 方法 有图有真相！

    步骤 1 2 3 4 5   简介 是一个新的HTML元素,这个元素可以被Script语言(通常是JavaScript)用来绘制图形.例如可以用它来画图.合成图象.或做简单的(和不那么简单的)动画. ...

  8. graphviz 决策树绘图中文乱码解决方法

    1.修改graphviz配置文件 <dir>C:\WINDOWS\Fonts</dir> 更改为 <dir>~/.fonts</dir> 2.将决策树d ...

  9. win10x软件字体有阴影很模糊的解决方法(软件分辨率与系统分辨率不一致)

    devC++,百度网盘等软件都有这种情况 拿百度网盘举例:界面比较大,不能缩小,字体有阴影比较模糊 解决方法: 桌面右击百度网盘,选择属性, 点击兼容性,更改高DPI设置,替代高DPI缩放行为前面打上 ...

随机推荐

  1. 一个简单的EBNF范式的实现

    最近无事在看书的时候发现了这个东西刹那间突然觉得大学时候编译原理书上的的什么语法分析书.上下文无关等晦涩难懂的概念清晰了许多今天把它贴出来希望也能让你回想起些往事... 至于EBNF范式是什么东西,网 ...

  2. Android Baseline小tip

    转载请注明出处:http://blog.csdn.net/bbld_/article/details/40709353 Baseline Alignment

  3. JAVA学习之 Model2中的Servlet与.NET一般处理程序傻傻分不清楚

    时隔多日,多日合适吗,应该是时隔多月.我又想起了一般处理程序.这都是由于近期在实现的DRP系统中经经常使用到jsp+servlet达到界面与逻辑的分离.servlet负责处理从jsp传回的信息:每当这 ...

  4. 在无代码文件的aspx文件中添加类、函数和字段的方法

    大家都知道,在开始WebForm程序时,一个WebForm由.cs代码文件与.aspx页面文件组成.在aspx文件中可以嵌入C#代码,但无法在aspx的嵌入C#代码中定义类,函数和字段等.这样,就限制 ...

  5. C/S与B/S架构 区别·与优点

    C/S和B/S,是再普通不过的两种软件架构方式,都可以进行同样的业务处理,甚至也可以用相同的方式实现共同的逻辑.既然如此,为何还要区分彼此呢?那我们就来看看二者的区别和联系.   一.C/S 架构 1 ...

  6. Oracle：varchar2、nvarchar2 字段类型的区别

    一直对varchar2.nvarchar2 字段类型存储字符数不清楚,现测试如下: 创建TT测试表 测试脚本如下: insert into tt values('1111','1111');  --- ...

  7. Python中的sort() key含义

    sorted(iterable[, cmp[, key[, reverse]]]) iterable.sort(cmp[, key[, reverse]]) 参数解释: (1)iterable指定要排 ...

  8. 【JSOI 2014】序列维护

    [题目链接] 点击打开链接 [算法] 线段树 注意标记下传 [代码] #include<bits/stdc++.h> using namespace std; #define MAXN 5 ...

  9. 使用lsyncd配置数据库备份多异地同步

    lsyncd配置文件 settings { logfile = "/var/log/lsyncd.log", --日志路径 status = "/var/log/lsyn ...

  10. javascript 布尔类型

    true和false 表达式为false的情况 1 false 2 NaN 3 0 4 字符串的空 " " 5 null 6 undefined