canvas绘图有锯齿毛边问题的解决

canvas绘制的一个圆形，用于表现移动端的朝向及视场角，绘制完成后出现了明显的锯齿，移动端看的时候也是非常明显，如下图所示：

本次主要是通过 hidpi-canvas 有效地解决。
原理与实现也都相对简单，其实就是将放大devicePixelRatio 倍canvas的宽高，再通过适当缩放画布，以此来保持清晰度。具体实现步骤如下：

点击链接下载 hidpi-canvas.js 文件；
我使用了ionic，在项目中assets下新建了js文件夹存放下载的hidpi-canvas.js，并在index.html中引入，<script src="assets/js/hidpi-canvas.min.js" ></script>；
把getPixelRatio( ) 函数复制到代码段中并调用；
drawCircle( ) 中 ‘画笔’对象传参得到ratio的值，width 和 height 乘以 ratio即可。

drawCircle( ) {this.canvas = $('#circle')[0];    this.ctx = this.canvas.getContext("2d");    var ratio = this.getPixelRatio(this.ctx);this.canvas.width = 360 * ratio; this.canvas.height = 360 * ratio; ......
}

得到的效果如下图所示：

canvas绘图有锯齿毛边问题的解决相关推荐

php画圆锯齿,优雅的解决canvas画圆锯齿问题
canvas 解决canvas画圆锯齿问题之前做一各项目需要画一个饼图,于是使用HTML5的canvas元素画出来的.一看在移动端手机上测试都发现画图有一点锯齿明显问题, 1 效果如下代码如下 v ...
html5 canvas 画图移动端出现锯齿毛边的解决方法
html5 canvas 画图移动端出现锯齿毛边的解决方法参考文章: (1)html5 canvas 画图移动端出现锯齿毛边的解决方法 (2)https://www.cnblogs.com/dear ...
canvas 画图移动端出现锯齿毛边的解决方法
最近项目中用的canvas 越来越多,但是之前都是在canvas 上画图片, 最近这次是做一个折线图,自己画出来以后发现有锯齿,百度一番后找到了解决办法,记录到博客里. 声明一下,我用的是第二种方法, ...
掌财社:怎么解决Canvas绘图出现模糊问题？在高清屏解决方法解析！
我们在使用高清屏进行工作或者娱乐的时候都会看起来比较舒适,那么大家知道吗?屏幕的一个物理像素就是css所定义的一个逻辑像素.所以下面我们来介绍有关于"怎么解决Canvas绘图出现模糊问题?& ...
解决echarts canvas绘图字体不清晰的问题
转化为svg,会更清晰 // 初始化echartthis.chart = this.$echarts.init(document.getElementById("line1"), ...
Android--使用Canvas绘图
前言除了使用已有的图片之外,Android应用常常需要在运行时根据场景动态生成2D图片,比如手机游戏,这就需要借助于Android2D绘图的支持.本篇博客主要讲解一下Android下使用Canvas ...
canvas画圆又毛边
canvas画圆又毛边 canvas使用arc()画园有毛边,如图:,只需给其添加width,height即可,直接上代码 <!DOCTYPE html> <html lang=&q ...
HTML5 学习总结（四）——canvas绘图、WebGL、SVG
目录一.Canvas 1.1.创建canvas元素 1.2.画线 1.3.绘制矩形 1.4.绘制圆弧 1.5.绘制图像 1.6.绘制文字 1.7.随机颜色与简单动画二.WebGL 2.1.HTML ...
【基于Leaflet和Canvas绘图的前端大量栅格数据渲染】
1. 需求有包含30万坐标点的json文件,每个坐标点包含经度.纬度.行值.列值.数值,现需要根据数值分级进行不同颜色的显示,并在地图的正确位置进行渲染.最终效果如下: 2. 环境和工具 2.1 使 ...

canvas绘图有锯齿毛边问题的解决

canvas绘图有锯齿毛边问题的解决

canvas绘图有锯齿毛边问题的解决相关推荐

最新文章

热门文章