在项目开发中发现，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. JS中prototype，js原型扩展

    作者:轩脉刃(yjf512)出处:(http://www.cnblogs.com/yjf512/)版权声明:本文的版权归作者与博客园共有.欢迎转载阅读,转载时须注明本文的详细链接. 原文 http:/ ...

  2. STM32低功耗模式与烟雾报警器触发信号电路设计

    1.STM32的3种低功耗模式 STM32有3种低功耗模式,分别是睡眠模式.停机模式和待机模式. 2.STM32在不同模式下的电流消耗 a.工作模式  消耗电流在27mA至36mA之间. b.睡眠模式 ...

  3. 树的深度优先遍历和广度优先遍历的原理和java实现代码

    import java.util.ArrayDeque; public class BinaryTree { static class TreeNode{ int value; TreeNode le ...

  4. 关于div li 等标签之间自带间距

    可以用float来清除标签之间的间距. ps :ul使用font-size:0 唯一的缺点就是要再次设置LI的font-size

  5. RK3288 GPIO 输出问题【转】

    本文转载自:http://m.blog.csdn.net/jiangdou88/article/details/50158673 #define GPIO_BANK0              (0 ...

  6. JS判断按时间跳转到相应的页面

    <!--时间段跳转js--><script language="javaScript" type="text/javascript"> ...

  7. java基础知识一

    1.计算机基础知识概述 (1) 计算机 计算机(computer)俗称电脑,是一种用于高速计算的电子计算机器,可以进行数值计算,又可以进行逻辑计算,还具有存储记忆功能.是能够按照程序运行,自动.高速处 ...

  8. Git 对比两分支中同一文件

    语法 git diff <分支名> <分支名> -- 文件名 git diff branch1 branch2 -- path/file.txt 案例 git diff ori ...

  9. 使用pyinstaller----python转exe

    自己写了一个定时清理日志的脚步,因为服务器是Windows,不想部署Python环境,就考虑到转成exe文件即可. 从网上了解到python转exe方法比较多,我选用了pyinstaller,过程比较 ...

  10. A+B Problem && OJ推荐【持续更新】

    目录 List 前言 长郡 Position: code 1. 2. 持续更新,么么哒 List 前言 有没有觉得写这篇文章很奇怪,这个还是有原因的.①很多OJ都有着道题,所以发个博客②这可以介绍很多 ...