canvas绘制像素点,

　　正统HTML5画布中的以下代码复制了如下代码：

　　CTX . line width=1；

　　CTX . begin path()；

　　ctx.moveTo(10，100)；

　　ctx.lineTo(300，100)；

　　CTX . stroke()；

　　因此，绘制的线不是一个像素宽。

　　感觉有多厚，有你经常看到的网页版里的各种画线效果。

　　很不一样。HTML5 Canvas没想到做的更好吗？

　　其实根本原因是画布绘制不是从中间开始的。

　　而是从0到1，而不是从0.5到10到0.5，所以

　　导致fade在边缘，看起来线条很宽。

　　解决方案有两个，一个是错位覆盖，一个是中心。

　　平移(0.5，0.5)。实现代码如下：

　　错位覆盖方法我将一个原始上下文的函数副本代码打包如下：

　　/**

　　* p绘制一条像素线/p

　　* @param fromX

　　* @param formY

　　* @参数毒性

　　* @param toY

　　* @param backgroundColor -默认为白色

　　* @param垂直布尔值

　　*/

　　canvasrenderingcontext 2d . prototype . onepixellineto=function(fromX，fromY，toX，toY，backgroundColor，vertical) {

　　var currentStrokeStyle=this . strokestyle；

　　this . begin path()；

　　this.moveTo(fromX，fromY)；

　　this.lineTo(toX，toY)；

　　this . close path()；

　　this . line width=2；

　　this . stroke()；

　　this . begin path()；

　　如果(垂直){

　　this.moveTo(fromX 1，fromY)；

　　this.lineTo(toX 1，玩具)；

　　}否则{

　　this.moveTo(fromX，fromY 1)；

　　this.lineTo(托克斯，玩具1)；

　　}

　　this . close path()；

　　this . line width=2；

　　this . stroke style=background color；

　　this . stroke()；

　　this . stroke style=currentstroke style；

　　};

　　中心翻译代码如下：复制代码如下：

　　CTX . save()；

　　ctx.translate(0.5，0.5)；

　　CTX . line width=1；

　　CTX . begin path()；

　　ctx.moveTo(10，100)；

　　ctx.lineTo(300，100)；

　　CTX . stroke()；

　　CTX . restore()；

　　特别注意确保你所有的坐标点都是整数，否则HTML5会自动实现边缘抗锯齿。

　　使你的一条像素线看起来又粗了。

　　操作效果：

　　现在效果如何？这是一个在HTML5画布中画线的小技巧。

　　我觉得很好。请给它加顶。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。