在项目开发中发现，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. collection 模块 双端队列

    单端队列 用于同一进程中的队列,可以叫做单进程队列. queue 遵循先进先出,先进去的必须先出来 1.先进先出: impore queue q = queue.Queue() 实例化一个对象 q.p ...

  2. 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 ...

  3. 基于mqtt协议实现手机位置跟踪

    Mqtt协议是物联网领域的一个标准协议,具有轻巧,对设备,带宽要求低,可靠稳定的特点,适合用来实现手机定位跟踪功能. 目前我初步搭建起来了整个可运行的框架,大致为如下思路:1.手机端通过位置服务,获取 ...

  4. java sleep和wait的区别和联系

    Thread.sleep不会改变锁的行为,如果当前线程拥有锁,那么当前线程sleep之后,该锁不会被释放. Thread.sleep和Object.wait都会暂停当前的线程,让出cpu.Thread ...

  5. DELPHI中的消息处理机制（三种消息处理方法的比较，如何截断消息）

    DELPHI中的消息处理机制 Delphi是Borland公司提供的一种全新的WINDOWS编程开发工具.由于它采用了具有弹性的和可重用的面向对象Pascal(object-orientedpasca ...

  6. 记录Linux常用命令

    创建用户:useradd -m user1,-m表示同时创建用户主目录,默认会创建/home/user1目录 设置密码:passwd user1,然后就会出现设置密码的提示了 为新用户添加sudo权限 ...

  7. hihoCoder 1582 Territorial Dispute 【凸包】（ACM-ICPC国际大学生程序设计竞赛北京赛区(2017)网络赛）

    #1582 : Territorial Dispute 时间限制:1000ms 单点时限:1000ms 内存限制:256MB 描述 In 2333, the C++ Empire and the Ja ...

  8. rails使用mysql数据库

    简单步骤 1,安装mysql 安裝 MySQL Ubuntu 上安裝 MySQL 請執行: $ sudo apt-get install mysql-server mysql-common mysql ...

  9. mysql无法远程访问

    最近使用Navicat for MySQl访问远程mysql数据库,出现报错, 显示“1130 - Host'xxx.xxx.xxx.xxx' is not allowed to connect to ...

  10. delphi 八字排盘源码（post数据以后，又分析数据）

    procedure TForm1.Button14Click(Sender: TObject);var  ls: TStringList;  lstr: string;  lss: TMemorySt ...