Canvas 2D绘制抗锯齿的1px线条

当绘制1像素的线条时,发现多条线明显存在着粗细不均的问题,线条带有明显的锯齿.

事实上,Canvas的绘制线条指令都存在这个状况,如lineTo,arcTo,strokeRect.

解决方案是将Canvas平移半个像素即可:

var ctx = document.getElementById("canvas").getContext("2d");
ctx.translate(0.5, 0.5);

这意味着,在绘制线条时,如果Canvas上下文中对应的坐标值为整数,那么绘制的中心点恰好是相邻像素的间隙.

于是很显然,基于这个坐标值进行1px的线条渲染时就占据了间隙两侧的像素点,明明指定了lineWidth的值为1,

渲染出来的结果却是2像素宽.

时间： 2024-10-07 15:56:23

Canvas 2D绘制抗锯齿的1px线条的相关文章

bitmap缩放时抗锯齿

bitmap在进行放大缩小的时候经常会出现边缘锯齿的情况,通常的解决办法是在Paint中加入抗锯齿, paint.setAntiAlias(true); 但是有时候发现这并没有起到抗锯齿的作用,这是可以直接在Canvas中加入抗锯齿, canvas.setDrawFilter(new PaintFlagsDrawFilter(0, Paint.ANTI_ALIAS_FLAG|Paint.FILTER_BITMAP_FLAG)); 结果证明这种方式可以解决锯齿问题.

移动端canvas抗锯齿

未抗锯齿效果图: 加入抗锯齿代码效果: var Game = function(){ var H = document.documentElement.clientHeight || document.body.clientHeight; var W = document.documentElement.clientWidth || document.body.clientWidth; this.canvas = document.getElementById("canvas"); t

html5 Canvas画图3：1px线条模糊问题

点击查看原文地址: html5 Canvas画图3:1px线条模糊问题本文属于<html5 Canvas画图系列教程> 接上一篇canvas画线条教程上次我们讲到,canvas有时候会出现1像素的线条模糊不清且好像更宽的情况,如下图: 这样的线条显然不是我们想要的. 这篇文章的目的就是弄清楚里面的原理,以及解决它. 大家都知道屏幕上最小的显示尺寸就是1像素,虽然小于1像素的东西可能显示不出来,但计算机可不管,他会试着画一下. 其实像素终究来说也是一个单位,假如我们把画布放大到足够大,足以看

小程序 canvas 2d 新接口绘制带小程序码的海报图

截止2020.3.26,小程序官方文档中,有两种绘制方式:Canvas 2D.webGL 文档地址:https://developers.weixin.qq.com/miniprogram/dev/component/canvas.html 而开发者工具中,官方推荐使用性能更好的2d模式,用法如下所示: <canvas type="2d" id="myCanvas"></canvas> 但是网上大多数教程都是使用旧的接口,如: <can

Canvas - 时钟绘制

导语:距离上一次写canvas,已经过去两年半,如今业务需要,再次拾起,随手记录. [思考] 时钟的绘制主要在于圆的绘制:1. 使用context.arc()方法直接绘制圆或圆弧: 2. 使用圆的方程(x = r * cosA + X, y = r * sinA + Y)进行描点绘制.指针运行速率较慢,故使用setInterval进行刷新重绘.[优化]可以使用两个canvas,一个用来绘制表盘,另一个绘制指针,如此,只需刷新重绘指针canvas,表盘canvas保持不变. <!DOCTYPE h

OpenGL核心技术之抗锯齿

笔者介绍:姜雪伟,IT公司技术合伙人,IT高级讲师,CSDN社区专家,特邀编辑,畅销书作者,国家专利发明人;已出版书籍:<手把手教你架构3D游戏引擎>电子工业出版社和<Unity3D实战核心技术详解>电子工业出版社等. CSDN视频网址:http://edu.csdn.net/lecturer/144 抗锯齿问题在游戏中一直存在的,尤其是体现在3D模型上的材质或者游戏UI界面上,由于现在引擎都非常完善,并且引擎都提供了抗锯齿功能,我们通过引擎提供的参数界面设置一下就可以消除.但是很

HTML5在canvas中绘制复杂形状附效果截图

HTML5在canvas中绘制复杂形状附效果截图一.绘制复杂形状或路径在简单的矩形不能满足需求的情况下,绘图环境提供了如下方法来绘制复杂的形状或路径. beginPath() : 开始绘制一个新路径. closePath() : 通过绘制一条当前点到路径起点的线段来闭合形状. fill() , stroke() : 填充形状或绘制空心形状. moveTo() : 将当前点移动到点(x,y). lineTo() : 从当前点绘制一条直线到点(x,y). arc(x,y,r,sAngle,eAn

HTML5 在canvas中绘制矩形

作者:卿笃军原文地址:http://blog.csdn.net/qingdujun/article/details/32930501 一.绘制矩形 canvas使用原点(0,0)在左上角的坐标系统,x坐标向右递增,y坐标向下递增. 使用绘图环境的矩形绘制函数来绘制矩形. fillRect(x,y,width,height) : 绘制一个实心的矩形. strokeRect(x,y,width,height) : 绘制一个空心的矩形. clearRect(x,y,width,height) : 清

HTML5 在canvas中绘制复杂形状

作者:卿笃军原文地址:http://blog.csdn.net/qingdujun/article/details/32942667 一.绘制复杂形状或路径在简单的矩形不能满足需求的情况下,绘图环境提供了如下方法来绘制复杂的形状或路径. beginPath() : 开始绘制一个新路径. closePath() : 通过绘制一条当前点到路径起点的线段来闭合形状. fill() , stroke() : 填充形状或绘制空心形状. moveTo() : 将当前点移动到点(x,y). lin