大家好，今天跟你们聊聊让人头疼的HTML5Canvas画线毛边儿问题。有没有你在Canvas上画线，觉得线条边上总有些粗糙这感觉？特别气人，尤其是你想画点细腻点儿的东西，那毛边儿就像是在毁你的作品似的。
为啥会有毛边？那是因为Canvas里的整数坐标就刚好卡在屏幕像素点的中间位置。你用这个坐标画线的话，用到的就是两边的像素点。就算你把lineWidth设成1，还是能看出两条像素效果的线，这就是毛边。
解决毛边问题的妙招
别着急！这儿有个好办法能解决你这问题。就是把像素点往正方向上下移动半个单位。看起来可能有点摸不着头脑，但实际上就是简单地调整一下你的线条位置就行了。这么处理后的效果就是，线条边缘会变得更清晰，不会再出现毛边。
挺简单的！比如说你想画个起点是(10,10)终点是(50,50)的线，那现在只要把这两个数都加上半格（也就是变成(10.5,10.5),(50.5,50.5)）就搞定！这样的话，线条会在像素点的正中间呈现出来，毛边的烦恼也就消失不见
处理前后的效果对比
来看看对比！今儿特意给你们弄了张图片，左面那几根短线就是没磨边过的，右面就是磨过之后的。你瞅瞅，两边差别多大！磨过的短线光滑得多，连毛刺儿都显得那么可爱~看完这图，是不是感觉之前因为这个问题纠结半天真的值了？
其他画线指令的毛边问题
canvasTest
var MyCanvas = function(boxObj, width, height) {
//序号、计数
this.index = arguments.callee.prototype.Count = (arguments.callee.prototype.Count || 0) + 1;
var cvs = document.createElement("canvas");
cvs.id = "myCanvas" + this.index;
cvs.width = width || 800;
cvs.height = height || 600;
(boxObj || document.body).appendChild(cvs);
//excanvas框架中针对ie加载canvas延时问题手动初始化对象
if (typeof G_vmlCanvasManager != "undefined") G_vmlCanvasManager.initElement(cvs);
//2D画布对象
this.ctx = cvs.getContext("2d");
/* * 绘制线条
* @ops JSON对象，可按实际支持属性扩展，示例： { lineWidth:1,strokeStyle:'rgb(255,255,255)' }
* @dotXY:{ x:0, y:0 } ||[{ x:0, y:0 },{ x:0, y:0 }]
*/
this.drawLine = function(dotXY, ops) {
this.ctx.beginPath();
for (var att in ops) this.ctx[att] = ops[att];
dotXY = dotXY.constructor == Object ? [dotXY || { x: 0, y: 0}] : dotXY;
this.ctx.moveTo(dotXY[0].x, dotXY[0].y);
for (var i = 1, len = dotXY.length; i < len; i++) this.ctx.lineTo(dotXY[i].x, dotXY[i].y);
this.ctx.stroke();
};
};
window.onload=function(){
var c1 = new MyCanvas();
c1.drawLine([{ x: 10, y: 10 }, { x: 10, y: 200 }],{lineWidth:2,strokeStyle:'rgb(0,0,0)'});
c1.drawLine([{ x: 11, y: 10 }, { x: 11, y: 200 }],{lineWidth:2,strokeStyle:'rgb(255,255,255)'});
c1.drawLine([{ x: 100, y: 10 }, { x: 100, y: 200 }],{lineWidth:1,strokeStyle:'rgb(0,0,0)'}); //普通线
c1.drawLine([{ x: 200.5, y: 10 }, { x: 200.5, y: 200 }],{lineWidth:1,strokeStyle:'rgb(0,0,0)'}); //+0.5偏移
}
↓ 处理的 ↓ 普通的 ↓ +0.5偏移的
别担心，除了lineTo，Canvas里的其它划线操作如arcTo和strokeRect也会有毛边。但方法其实都差不多，就是给坐标加个0.5，就能使线条变平滑！不管是圆圈、长方形还是别的形状，都没问题~
实际应用中的注意事项
用起来要小心点！首先，这招儿虽然好使，但也不是全能。复杂的图或高精度渲染的话，你得再找找别的法子优化下。再说它只能在Canvas的2D环境里跑，要是3D就不行，得换个方法。
Canvas画线的其他技巧
别只揪着毛边儿不放，Canvas画线可是有好多妙招！比如说，通过调整lineWidth、lineCap、lineJoin这几个属性，就能控制线条宽度、拐角形状和平滑程度，让你的图变得更好看更专业。这些属性虽然看似普通，但是用好了，效果可不是一般的好~
Canvas在Web开发中的应用
Canvas不仅能画图，还能用来搞Web开发！像动画啊、游戏啊、数据可视化什么的都能用上。你可能觉得这跟画线没啥关系，可事实却是这些应用都得依赖Canvas的基本功。所以，学好Canvas画线，对学Web开发肯定大有益处。
Canvas与其他技术的结合
最重要的一点告诉你，Canvas不仅自己能干活儿，还能跟其他一些牛人技术一起用，像SVG、WebGL等等。每种技能都有它们的好处，利用得好就能帮你更快捷便利地搞定Web开发。所以，学Canvas的时候别忘了穿插着来学习下其他相关技术，这对你没坏处！
文章结尾：
Canvas画图老是有毛边，的确挺烦人，不过找对对策就没事。希望这篇文章帮到你们，用起Canvas来更顺手点。对了，你们用Canvas还有啥问题？评论区聊聊，记得点赞分享！
评论0