在项目开发中发现，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. 2016/07/05 zend optimizer

    Zend Optimizer是由PHP核心引擎“Zend” http://www.zend.com 创建者Zend技术公司所开的免费PHP优化软件.据Zend公司透露使用这个软件某些情况下至少可以提高 ...

  2. 怎么整合小图标，组合到一张png里面

    1.将切出来的图片,一个个打开,用动工具组合到新的图片中: 2.将新建的图片,背景选为透明,保存为png格式: 3.通过css的background-position属性设置元素的背景图片.

  3. YTU 2457: 很简单的一道题

    2457: 很简单的一道题 时间限制: 1 Sec  内存限制: 128 MB 提交: 261  解决: 80 [提交][状态][讨论版] 题目描述 有一个简单的函数数学公式,如下 输入 重复输入多组 ...

  4. JavaScript 检查 email 地址的正则表达式

    JavaScript 检查 email 地址的正则表达式​1.代码(1)<html><head><title>Checking an email address - ...

  5. HDU - 1054 Strategic Game（二分图最小点覆盖/树形dp）

    d.一颗树,选最少的点覆盖所有边 s. 1.可以转成二分图的最小点覆盖来做.不过转换后要把匹配数除以2,这个待细看. 2.也可以用树形dp c.匈牙利算法(邻接表,用vector实现): /* 用ST ...

  6. android:oneshot

    帧动画的自动执行:oneshot . 如果为true,表示动画只播放一次停止在最后一帧上,如果设置为false表示动画循环播放.

  7. 【BZOJ 2721】 樱花

    [题目链接] 点击打开链接 [算法] 令n!=z,因为1 / x + 1 / y = 1 / z,所以x,y>z,不妨令y = z + d 则1 / x + 1 / (z + d) = 1 / ...

  8. 聊聊Spring中的工厂

    BeanFactory是Spring IOC容器的根接口,定义了Bean工厂的最基础的功能特性,比如根据name获取指定bean等,根据不同用途它的子接口又对它的功能进行细化,比如是否是可列表的,是否 ...

  9. AES加密算法(C++实现,附源码)

    原创作品,转载请注明出自xelz's blog 博客地址:http://mingcn.cnblogs.com/ 本文地址:http://mingcn.cnblogs.com/archive/2010/ ...

  10. 02_通过scrollview实现内容滚动

    在ScrollView里面放一个Button和TextView程序直接就挂了. ScrollView它只限制了有几个孩子,没限制有几个孙子.给Button和TextView套上一个爹LinearLay ...