欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 > html5案例分享 >

HTML5 Canvas画线能力——实现绘制一个像素宽的细线

发布时间:2016-11-24  编辑:杨雨个人博客网站   点击:   

正统的HTML5 Canvas中如下代码


代码如下:
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(10, 100);
ctx.lineTo(300,100);
ctx.stroke();

运行功效绘制出来的并不是一个像素宽度的线
HTML5 Canvas画线手段——实现绘制一个像素宽的细线
感受怎么好粗啊,跟经常见到的网页版各类绘制线结果

很纷歧样,莫非HTML5 Canvas就没想到搞好点嘛

其拭魅这个基础缘故起因在于Canvas的绘制不是从中间开始的

而是从0~1,不是从0.5~1 + 0~0.5的绘制方法,以是

导致fade在边沿,看上去线很宽。

办理要领有两个,一个是错位包围法,其它一种是中心

平移(0.5,0.5)。实当代码如下:

错位包围法我已经包装成一个原始context的函数


代码如下:
/**
* <p> draw one pixel line </p>
* @param fromX
* @param formY
* @param toX
* @param toY
* @param backgroundColor - default is white
* @param vertical - boolean
*/
CanvasRenderingContext2D.prototype.onePixelLineTo = function(fromX, fromY, toX, toY, backgroundColor, vertical) {
var currentStrokeStyle = this.strokeStyle;
this.beginPath();
this.moveTo(fromX, fromY);
this.lineTo(toX, toY);
this.closePath();
this.lineWidth=2;
this.stroke();
this.beginPath();
if(vertical) {
this.moveTo(fromX+1, fromY);
this.lineTo(toX+1, toY);
} else {
this.moveTo(fromX, fromY+1);
this.lineTo(toX, toY+1);
}
this.closePath();
this.lineWidth=2;
this.strokeStyle=backgroundColor;
this.stroke();
this.strokeStyle = currentStrokeStyle;
};

中心平移法代码如下:


代码如下:
ctx.save();
ctx.translate(0.5,0.5);
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(10, 100);
ctx.lineTo(300,100);
ctx.stroke();
ctx.restore();

要出格留意确保你的全部坐标点是整数,不然HTML5会自动实现边沿反锯齿

又导致你的一个像素直线看上去变粗了。

运行结果:
HTML5 Canvas画线手段——实现绘制一个像素宽的细线
此刻结果怎么样,这个就是HTML5 Canvas画线的一个小能力

认为不错请顶一下。 本文地址:http://itbyc.com/web/html5/13102.html
转载请注明出处。
分享是一种快乐,也是一种美德:
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1