问题:有时用canvas作图时发现图像会出现模糊不清晰的问题,甚至做出来的图呈现出的效果与我们给的数值所应该呈现出的效果不一致

原因:当你在支持html5 canvas的浏览器下查看页面的时候,canvas画布的默认大小是300*150,相当于一张图片,当在css设置画布大小时比如350*350实际是将原画布(300*150)进行了拉伸,所以会导致图像变形,至于模糊的问题与浏览器处理 canvas 的方式有关

图像变形解决方法:将想要设置的画布大小直接设置在canvas标签上

          <canvas  id="mycanvas" width="350px" height="350px"></canvas>

图像模糊的解决方法:将canvas的绘制过程放大两倍(也可以根据自己需求放大其他倍数,我在项目中放大了四倍才感觉舒服些,根据项目需求),然后将canvas的父元素缩小两倍(根据绘制过程中放大的倍数确定了,当打几倍父元素就缩小几倍)就可以解决canvas图像模糊问题,

  .box{zoom:0.5;}

  <div class="box">
    <canvas id="mycanvas" width="700px" height="700px"></canvas>
  </div>

因为canvas放大了两倍,所以绘制时,参数都要放大两倍(比如半径),这样就完美的解决了canvas图像模糊的问题

canvas图像模糊以及图像变形问题的更多相关文章

  1. 卡通图像变形算法(Moving Least Squares)附源码

    本文介绍一种利用移动最小二乘法来实现图像变形的方法,该方法由用户指定图像中的控制点,并通过拖拽控制点来驱动图像变形.假设p为原图像中控制点的位置,q为拖拽后控制点的位置,我们利用移动最小二乘法来为原图 ...

  2. html5之canvas困惑 在canvas标签内需要设置了宽跟高,如果在css中设置同样的宽跟高,画出来的图像变形了?

    <canvas class="cvs"></canvas> 遇到的问题: 如css 中设.cvs{width:500px;height:400px;},也就 ...

  3. html5 canvas 笔记四(变形 Transformations)

    绘制复杂图形必不可少的方法 save() 保存 canvas 状态 restore() 恢复 canvas 状态 Canvas 的状态就是当前画面应用的所有样式和变形的一个快照. Canvas 的状态 ...

  4. canvas加载图像

    之前按照例子,加载图像,发现加载图像,加载不上去,代码也没有错误,经过几次的尝试:发现需要重复调用下drawImage才可以. <script type="text/javascrip ...

  5. H5 Canvas图像模糊解决办法

    1.最近在用h5的canvas画动画,发现图像特别模糊.后来终于找到罪魁祸首是<meta name="viewport" content="width=device ...

  6. 使用 canvas 画图时图像文字模糊的解决办法

    最近在使用 canvas 画图的时候,遇到了图像文字模糊的问题,解决思路就是根据分辨率创建不同尺寸的画布.以下是创建高分辨率画布的代码: /** * 创建高分辨率画布 * @param w 画布宽 * ...

  7. Javascript高级编程学习笔记(90)—— Canvas(7) 绘制图像

    绘制图像 2D绘图上下文内置了对图像的支持 如果希望将一幅图绘制到画布上,可以使用 drawImage() 的方法 该方法有三种不同的参数数组合以对应不同的应用场景 将<img>绘制到画布 ...

  8. html5 canvas多个图像旋转

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. 【重点突破】——使用Canvas进行绘图图像

    一.引言 本文主要是canvas绘图中绘制图像的部分,做了几个练习,综合起来,复习canvas绘图以及定时器的使用. 二.canvas绘制小飞机在指定位置 <!DOCTYPE html> ...

随机推荐

  1. 大数运算的算法设计和C++实现

    1.背景 工作中遇到过需要进行极大数据的存储和运算的场景,当时使用Python解决了这个问题,在Python中,整数没有位数限制,使用起来很方便.但是当程序主体使用C/C++实现时,就比较麻烦.所以考 ...

  2. 使用Mifare卡加密数据 笔记

    Mifare 是最常用的射频卡,具体介绍网上太多,我就不说了.,很多城市的最早的地铁公交卡都是用这种卡,后来被破解后都换成智能卡了. 但是由于技术成熟,使用方便,成本低,现在很多小区门禁卡,停车卡,食 ...

  3. postman简单教程,使用tests模块来验证接口时是否通过

    接口测试醉重要的就是返回数据的检查,一个简单的接口,我们可以肉眼检查返回数据,但接口一旦多起来且复杂,每次的检查都会很费劲,此时我们就需要postman 的tests模块来代替 概念: Postman ...

  4. 求逆序对[树状数组] jdoj

    求逆序对 题目大意:给你一个序列,求逆序对个数. 注释:n<=$10^5$. 此题显然可以跑暴力.想枚举1到n,再求在i的后缀中有多少比i小的,统计答案即可.这显然是$n^2$的.这...显然过 ...

  5. 初始css

    1.CSS规则由两部分构成,即选择器和声明器 声明必须放在{}中并且声明可以是一条或者多条 每条声明由一个属性和值构成,属性和值用冒号分开,每条语句用英文冒号分开 注意: css的最后一条声明,用以结 ...

  6. 四则运算题目生成(python版)

    四则运算题目生成-基于控制台 项目托管在码云:飞机票 需求分析 根据控制台提示信息,输入题目生成相关配置参数 题目生成数量 数字范围 式子中是否有分数 .... 程序支持 10000 题目生成 题目与 ...

  7. java多线程(二)-线程的生命周期及线程间通信

    一.摘要    当我们将线程创建并start时候,它不会一直占据着cpu执行,而是多个线程间会去执行着这个cpu,此时这些线程就会在多个状态之间进行着切换. 在线程的生命周期中,它会有5种状态,分别为 ...

  8. Beta No.3

    今天遇到的困难: 组员对github极度的不适应 github的版本控制和协同化编程确实操作起来需要一定的熟练度,我们缺乏这种熟练度 Android Studio版本不一致项目难以打开的问题仍然无法解 ...

  9. python基础学习篇章一

    一. 对Python的认识 1. Python的标准实现方式是将源代码的语句编译为字节码的形式,之后再将字节码解释出来.由于字节码是一种与平台无关的形式,字节码具有可移植性.但是Python没有将代码 ...

  10. Vue 2.x + Webpack 3.x + Nodejs 多页面项目框架(下篇——多页面VueSSR+热更新Server)

    Vue 2.x + Webpack 3.x + Nodejs 多页面项目框架(下篇--多页面VueSSR+热更新Server) @(HTML/JS) 这是Vue多页面框架系列文章的第二篇,上一篇(纯前 ...