在项目开发中发现，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. python day- 16 面向对象

    1.类的相关知识 类:是指具有相同属性和技能的一类事物. 比如:人类 ,植物类,动物类,狗类. 对象:是类中的某一个实例,是类的具体表现. 比如:具体到某个人,某一个植物,某一条狗. class 是p ...

  2. yum lock

    状态 :睡眠中,进程ID:18439Another app is currently holding the yum lock; waiting for it to exit... 另一个应用程序是: ...

  3. Hadoop spark mongo复制集

    启动hadoop cd /usr/local/hadoop/hadoop $hadoop namenode -format # 启动前格式化namenode $./sbin/start-all.sh ...

  4. 织梦dedecms首页/列表页/内容页调用tag的方法(未测试)

    织梦dedecms首页/列表页/内容页调用tag的方法 在网站中tag是网站搜索相关文章的联系之一,也可以有专门的tag页面,在不同的页面也可以调用tag,而不是只有在首页和列表页才可以调用tag,这 ...

  5. 前端如何展示商品属性：SKU多维属性状态判断算法的应用-Vue 实现

    由于公司开发了一个电商项目,涉及到前台商品属性的展示,所以百度上找了一下!找到了 周琪力写的一个算法例子,因为作者只有jQuery 实现demo, 自己仿照 demo 实现了一个 vue 的! 周琪力 ...

  6. kafka条件查询excel拼接

    1 SELECT COUNT(*) FROM wiseweb_crawler_metasearch_page20171214 WHERE (content like '%内蒙古%'or content ...

  7. oracle 转移表空间

    一.系统表空间数据文件迁移:SQL> conn /@tmpdb as sysdba 已连接. SQL> desc dba_data_files; 名称 是否为空? 类型 --------- ...

  8. OpenMediaVault Redmine 安装

    /******************************************************************** * OpenMediaVault Redmine 安装 * ...

  9. python自动化运维-编写rsync+sersync安装脚本实现文件实时同步

    rsync+sersync组合可以实时监听目录的变化,实现实时同步数据. 具体安装教程可查看:http://www.osyunwei.com/archives/7447.html. 安装着实有些复杂, ...

  10. springmvc不进入Controller导致404

    转自:https://blog.csdn.net/qq_36769100/article/details/71746449#1.%E5%90%AF%E5%8A%A8%E9%A1%B9%E7%9B%AE ...