html5 canvas 画直线,HTML5 Canvas画线技巧——实现绘制一个像素宽的细线

男娘i 2022-10-05 11:58 253阅读 0赞

正统的HTML5 Canvas中如下代码

复制代码代码如下:

ctx.lineWidth = 1;

ctx.beginPath();

ctx.moveTo(10, 100);

ctx.lineTo(300,100);

ctx.stroke();

运行结果绘制出来的并不是一个像素宽度的线

![ecfbd85cce9e0a07bf537bfdda6ae792.png][]

感觉怎么好粗啊，跟常常见到的网页版各种绘制线效果

很不一样，难道HTML5 Canvas就没想到搞好点嘛

其实这个根本原因在于Canvas的绘制不是从中间开始的

而是从0～1，不是从0.5～1 + 0～0.5的绘制方式，所以

导致fade在边缘，看上去线很宽。

解决方法有两个，一个是错位覆盖法，另外一种是中心

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

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

复制代码代码如下:

/\*\*

\*

draw one pixel line

\* @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会自动实现边缘反锯齿

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

运行效果：

![a34c55961845ad21f452880c271afa2c.png][]

现在效果怎么样，这个就是HTML5 Canvas画线的一个小技巧

觉得不错请顶一下。

[ecfbd85cce9e0a07bf537bfdda6ae792.png]: /images/20221005/bd41469c97e24874acadfcfad7fa103a.png
[a34c55961845ad21f452880c271afa2c.png]: /images/20221005/21ec52b08432428ebf381e339131c2bd.png

发表评论取消回复

表情：

评论列表（有 0 条评论，253人围观）

还没有评论，来说两句吧...

相关阅读

相关 html5canvas中波浪线怎么画,html5 canvas画波浪

要实现这样的动画普通的CSS3是鞭长莫及了，只能使用Canvas。好在使用canvas也非常简单。 Step1. 新建一个画布()元素，并放在所有按钮和logo的下方以免遮

朴灿烈づ我的快乐病毒、/ 2022年10月12日 01:20/ 0 赞/ 36 阅读

相关 html 在控件表面画线,html5中Canvas的使用--画线和面

我们知道canvas是画布，今天我们就来画布上面画线和面。 1.Html中的画布 Canvas 2D画线和面 canvas是HTML5中的元素，当没有设置宽度和高度的时候

左手的ㄟ右手/ 2022年10月06日 11:52/ 0 赞/ 163 阅读

相关 html5画一个圆点,HTML5 Canvas绘制圆点虚线实例

HTML5 Canvas 提供了很多图形绘制的函数，但是很可惜，Canvas API只提供了画实线的函数(lineTo)，却并未提供画虚线的方法。这样的设计有时会带来很大的不便

ゝ一世哀愁。/ 2022年10月05日 12:46/ 0 赞/ 222 阅读

相关 html5 canvas 画直线,HTML5 Canvas画线技巧——实现绘制一个像素宽的细线

正统的HTML5 Canvas中如下代码复制代码代码如下: ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(10, 10

男娘i/ 2022年10月05日 11:58/ 0 赞/ 254 阅读

相关 html5 canvas画云

使用函数画出天空的云层图像： ![云层][SouthEast]y 主要使用到的是数学的圆与弧度之间转换关系：代码如下

亦凉/ 2022年08月26日 12:21/ 0 赞/ 504 阅读

相关 HTML5中canvas画图之画圆形

利用canvas中的arc可以绘制圆形图案。函数原型为:context.arc(x,y,半径，开始角度，结束角度，是否逆时针旋转);所以可以通过修改开始角度和结束角度来绘制弧线

桃扇骨/ 2022年08月23日 05:51/ 0 赞/ 245 阅读

相关【html5每日练习】html5 canvas画线

现在网络最火的是html5，没有之一，虽然正式版还没有出，但咱们可以期待着在未来几年，html5会霸占了互联网，所以毫无疑问得加入到html5的学习之中，谁学得快，谁就有可能把

港控/mmm°/ 2022年06月13日 10:50/ 0 赞/ 264 阅读

相关 [html5 canvas]用html5的canvas画一个可移动的方块

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

灰太狼/ 2022年04月18日 04:48/ 0 赞/ 393 阅读

相关画圆角 - HTML5 Canvas 作图

2、function DrawAOBArc(Canvas,A,O,B,Radius) 功能：[画圆角][Link 1] 参数：Radius：[圆角][Link 1]的大

冷不防/ 2021年12月05日 16:10/ 0 赞/ 399 阅读

相关用HTML5的canvas标签画虚线

原生代码 function drawDashLine(ctx, x1, y1, x2, y2, dashLength){ //ctx 声明的

深藏阁楼爱情的钟/ 2021年09月14日 09:26/ 0 赞/ 641 阅读