H5 canvas绘制出现模糊的问题
在之前做移动端小游戏幸运转盘、九宫格转盘,使用到了 canvas ,也是第一次在项目中使用 canvas 来实现。
近期测试人员反应 canvas 绘制的内容太模糊,心想着用 canvas 绘制出来的怎么会模糊,先前也有考虑到适配不同尺寸的移动设备,担心直接使用 img 或者设置 background 会使图片拉伸而变得模糊,所以使用 canvas 来绘制转盘与九宫格,精确的计算每个物体所在的坐标以及尺寸绘制出来的,怎么会模糊。
然而将绘制的内容与页面中的其他文字或者图片作对比后,发现使用 canvas 绘制输出的确实比直接使用标签输出的来的模糊,如下两张截图:
可以看出转盘中或者九宫格中的图片跟蚊子,明显与下面直接使用HTML标签显示的文字来的模糊。
在网上查了下 canvas 模糊的问题,确实存在,也有不少的解决方法。
有一种说法是说因为绘制的坐标不是整数级的坐标,所以会变得模糊,所以在计算坐标的时候可以使用 Math.floor 将坐标取整,这样绘制就会变得清晰。
个人觉得这种说法并不实际,因为在实现的时候就是要计算到每个点每条线的具体位置,角度等等的精确值,这样粗糙的取整,会使得绘制出来的整体跟设计图上有比较大的出入,而且本身也无法维护让每次绘制都是在整数级的坐标上,比如绘制一个圆,要如何让每个点都是在整数坐标的像素点上?
还有一种方法比较简单,容易实现,而且效果在目前看来还是不错的。
先补充说明一个基础知识点,在使用 canvas 的时候,要设置画布的大小,要使用的是 canvas 的 width 与 height 属性,而不是设置 canvas 的 style 或者CSS样式中的 width 与 height 。
因为在绘制的过程中画布内容的实际大小是根据 canvas 的 width 与 height 属性设置的,而 style 或者CSS设置的width 与 height 只是简单的对画布进行缩放。
这里可以将 canvas 比喻为一个 img ,其中画布的 width 与 height 属性,相当于 img 中图片的原始尺寸;我们使用JS在画布上绘制的内容对应的就是 img 中的图片;而 style 或者CSS设置的 width 与 height ,就是设置 canvas 或者 img 在页面上要显示的大小。
因此这里要解决模糊的做法,就是将这张“图片”变得高清一点,然后缩小了来显示。具体实现就是将画布的大小设置为实际显示大小的两倍,然后在canvas的css属性设置正常显示的宽高,比如,要显示一个100*200的画布,可以这样写:
<canvas width="200" height="400" style="width: 100px;height: 200px;"></canvas>
如此就相当于画了一张200*400的图片,然后设置他显示成100*200的大小,这样一来就变得清晰了。需要注意的是,这样将画布放大之后,绘制的过程中对应的那些坐标,长度等等都要相应的放大,比如原本在100*200的画布上绘制 ctx.arc(10,10,5,0,Math.PI*2) ,现在在200*400的画布上就得改成 ctx.arc(20,20,10,0,Math.PI*2) 。如此修改后的效果如下两张截图:
现在相比之前,明显清晰了许多,画布中的文字和图片与下面HTML标签直接输出的一样清楚,模糊的问题解决了,不会再觉得是撸多了,眼睛花。
另外,如果要比较好的解决canvas模糊的问题,可以使用JS类库 hidpi-canvas-polyfill 来解决,由于我也没试过,就不多说了,想了解的可以查看html5 canvas绘制图片模糊的问题,这里有介绍这个插件的使用方法。
This entry was posted in CANVAS, CSS, H5 & CSS3, HTML, HTML5, JavaScript, JS, Web, 总结归纳 and tagged CANVAS, CSS,H5,HTML5,JS, HTML, JavaScript, WEB, 总结归纳. Bookmark the permalink.
H5 canvas绘制出现模糊的问题的更多相关文章
- Canvas绘制图片模糊
canvas是html5的新标签,是个可以绘制图形的画布,画布的默认大小为300x150.在自定义绘制画布大小的时候有注意的问题,就是用样式来设置高度和宽度的时候 比如 <div style=& ...
- 解决html5 canvas 绘制字体、图片与图形模糊问题
html5 canvas 绘制字体.图片与图形模糊问题 发生情况 多出现在高dpi设备,这意味着每平方英寸有更多的像素,如手机,平板电脑.当然很多高端台式电脑也有高分辨率高dpi的显示器. canva ...
- H5 canvas 解决合成图模糊(canvas真机下scale不起作用,无法缩放显示的问题)
在解决canvas合成图片模糊的问题想必我们已经了解了 window.devicePixelRatio window接口的devicePixelRatio返回当前显示设备的物理像素分辨率与C ...
- h5学习-canvas绘制矩形、圆形、文字、动画
绘制矩形<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
- h5 canvas 画图
h5 canvas 画图 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
- canvas绘制清晰的方法
很早就开始使用canvas,包括自己绘制各种图形,以及作为画布提供给诸如echarts,当canvas绘制细线条,特别是关于文字绘制会出现很模糊或者锯齿的感觉. <canvas ref=&quo ...
- HTML5 canvas 绘制五星红旗
这个例子并不是自己写的,在网上找的案列,仿照写的,,,自己真的公布董这些算法,看完这个例子还是有一点模糊,,, 如果谁看的比较明白,指点一下,,,多谢!!!! <!doctype html> ...
- HTML5—canvas绘制图形(1)
1.canvas基础知识 canvas元素是HTML5中新增的一个重要的元素,专门用来绘制图形,不过canvas本身不具备画图的能力,在页面中放置了canvas元素,就相当于在页面中放置了一块矩形的“ ...
- canvas 绘制图形
canvas 绘制图形: 注意: canvas 的宽高设置在行内,否则会使画布(canvas)产生扭曲,绘图变形: <!DOCTYPE html> <html lang=" ...
随机推荐
- 将内表通过TXT文本输出
PARAMETERS: num TYPE i. TYPE-POOLS: truxs. "类型组 DATA:w_filename TYPE string. TYPES:BEGIN OF ty_ ...
- CSS重置样式表
网页设计,让人最头疼的莫过于让页面兼容各大浏览器,准确些是兼容它们“默认”的CSS样式表.第一种方式 * {margin:0px; padding:0px;} 这行代码虽然简单,但却让网页解析太慢.于 ...
- Button 对 TreeView1 所有节点的全选
protected void Button1_Click(object sender, EventArgs e) { for (int i = 0; i < this.Tre ...
- HTML中图片热区的使用
在HTML中有一个具有把图片划分成多个作用区域,并链接到不同网页的标记,那就是 <area>地图作用区域标记. <area>标记主要用于图像地图,通过该标记可以在图像地图中设定 ...
- 【读书笔记】iOS-读取文本文件
一,文本文件的内容. 二,工程目录 三,ViewController.m - (void)viewDidLoad { [super viewDidLoad]; // Do any additional ...
- 【原创+译文】官方文档中声明的如何创建抽屉导航栏(Navigation Drawer)
如需转载请注明出处:http://www.cnblogs.com/ghylzwsb/p/5831759.html 创建一个抽屉导航栏 抽屉式导航栏是显示在屏幕的左边缘,它是应用程序的主导航选项面板.它 ...
- android创建自定义控件
新建一个布局title.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xm ...
- JDBC编程 之 增删改查
JDBC编程之数据增加,更改,查询,删除 package com.good.jdbc; import java.sql.Connection; import java.sql.DriverManage ...
- bootstrap3 兼容IE8浏览器
近期在使用bootstrap这个优秀的前端框架,这个框架非常强大,框架里面有下拉菜单.按钮组.按钮下拉菜单.导航.导航条.面包屑.分页.排版.缩略图.警告对话框.进度条.媒体对象等,bootstrap ...
- office2010安装报错
有没有童鞋,在第一次安装office 2010的时候,中途不管是何原因导致中断或者未安装成功的 然后从第二次开始就一直安装报错??? 哈哈,我最近就遇到了 其他很简单,网上有很多方法,也有很多步骤,包 ...