【坑】html5中使用context.lineWidth设置线的宽度是1，然而输出的宽度是2的原因

代码实现

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><canvas id="canvas" width="800" height="600"></canvas></body><script type="text/javascript">var context = document.getElementById("canvas").getContext("2d");context.beginPath();context.lineWidth = 1;context.moveTo(100, 100);context.lineTo(600, 100);context.stroke();context.beginPath();context.moveTo(100.5, 200.5);context.lineTo(600.5, 200.5);context.stroke();</script>
</html>

在线演示

原因

可以看到上面一条线比下面的要粗，产生原因是因为当我们要在(100,100)和(600,100)这两个像素之间划线的时候，实际上是把那个宽度为1的线段的中间线画在了(100,100)和(600,100)，而线段的0.5像素的图像画在了那条中间线的上部，另一0.5像素画在了中间线的下部，所以这条线段实际上是跨了两个像素的宽度的。之后浏览器自动把0.5像素化成了1个像素，所以结果就会画出宽度为2的线段了。如下图所示，在(1,0)和(1,3)之间划线的效果如下

图中红色框框的部分就是浏览器自己补全的（有可能是淡色，类似抗锯齿的效果）

【坑】html5中使用context.lineWidth设置线的宽度是1，然而输出的宽度是2的原因相关推荐

html5 audio样式修改,HTML5中 audio的样式设置
直接在样式表中设置对应的样式: audio::-webkit-media-controls-panel audio::-webkit-media-controls-mute-button audio: ...
HTML5中背景图片如何设置
自己试验了很多种方式,最终发现有一种方式最得朕心--哈哈哈哈哈先看一下效果图吧: 只截取了一部分,图片的人物不会因为页面大小而变得扭曲(这一点非常重要),我已经很满足啦----- 下面看一下代码吧, ...
HTML5画布如何设置线的样式？
在画布中,默认线的颜色为黑色,宽度为1像素,但我们可以使用相应的方法为线添加不同的样式.下面将从宽度.描边颜色.端点形状三方面详细讲解线样式的设置方法. 1.宽度使用画布中的lineWidth属性可 ...
html支持的语音文件格式,html5中如何设置audio支持音频格式
html5中如何设置audio支持音频格式发布时间:2020-04-15 10:24:37 来源:亿速云阅读:367 作者:小新今天小编给大家分享的是html5中如何设置audio支持音频格式, ...
设置框开始隐藏状态html5,小猿圈分享HTML5中form如何关闭自动完成功能的方法
WEB前端现在是时下较火的编程语言之一,但是对于怎么学习或者学习哪些内容很多朋友都是不了解的,针对以上内容小猿圈web前端讲师总结了form如何关闭自动完成功能的方法?希望对你的前端学习有一定的帮助. ...
Visio2010中设置线为直线
Visio2010中设置线为直线在Visio2010中默认的线不是直线而是曲线,在画图中需要使用直线时要进行设置,下面介绍Visio2010中设置直线的方法. 1.打开Visio2010,然后点击设 ...
html5怎么设置表单居中显示图片,如何将html5中的图片设置居中？图片居中的代码！...
在各种形形色色的网页中少不了的就是图片了,在使用和浏览的时候我们看到都是文字的话肯定是不好受的,那么这次就来说说如何将html5中的图片设置居中,下面是小编分享的一些有关于在 html5 中图片如何居 ...
在HTML5中, web app 以及手机客户端中,设置页面图片等比例居中显示
在HTML5中, web app 以及手机客户端中,设置页面图片等比例居中显示接触前端时间不长,费了一些时间 img{display:block;max-width:100%;margin:auto ...
matlab stk 设置,[ STK ]（八）使用 Matlab，在 STK 中建立卫星间连线
[ STK ](八)使用 Matlab,在 STK 中建立卫星间连线 [ STK ](八)使用 Matlab,在 STK 中建立卫星间连线星间距离小于 3e+07 时建立卫星间连线星间距离是动态变 ...
html文件显示controls,html5中设置或返回浏览器应当显示标准的音视频控件的属性controls...
实例为视频启动控件:myVid=document.getElementById("video1"); myVid.controls=true; 定义和用法 controls 属性 ...

【坑】html5中使用context.lineWidth设置线的宽度是1，然而输出的宽度是2的原因

代码实现

原因

【坑】html5中使用context.lineWidth设置线的宽度是1，然而输出的宽度是2的原因相关推荐

最新文章

热门文章