canvas绘制1px线及原理

最新推荐文章于 2023-05-04 20:04:34 发布
最新推荐文章于 2023-05-04 20:04:34 发布
阅读量772 收藏
点赞数 3
分类专栏： canvas 文章标签： canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42630688/article/details/114934441
版权

先上代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;

    }

    #canvas {
      border: 1px solid #000;
      margin: 50px;
    }
  </style>
</head>

<body>
  <canvas id="canvas" width="400" height="400"></canvas>

  <script>

    let canvas = document.querySelector('canvas')
    let ctx = canvas.getContext('2d')

    ctx.lineWidth = 1
    ctx.beginPath()
    ctx.moveTo(20,20)
    ctx.lineTo(300,20)
    ctx.stroke()
    ctx.beginPath()
    ctx.moveTo(20.5, 40.5)
    ctx.lineTo(300.5, 40.5)
    ctx.stroke()
  </script>
</body>

</html>

在这里插入图片描述
可以看线宽都是1像素的情况下，两条线的粗细是不一样的，第一条线占据了2像素的宽度
在这里插入图片描述
1px在绘制的时候canvas会将1px拆分为两部分，
一部分在像素边界左边，部分在像素边界右边，
而最小的渲染单位是1像素，渲染的时候会将左边1像素及右边部分1像素一起渲染出来，
所以会导致渲染出2像素的线，距离增加0.5像素的时候，渲染的左右两边都在同一像素内，正好是1像素，所以渲染出来的线是真实的1像素

小兔快跑zZ
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
canvas-画布
weixin_44486539的博客
12-02 2449
HTML5 的 canvas 元素用于定义画布，是一个矩形区域，默认颜色为白色，默认大小为 300 * 150；通过 JavaScript 可以在该区域上绘制图像 ，开发人员可以控制其每一个像素；canvas 拥有多种绘制：路径、矩形、圆形、字符以及添加图像的方法。 **注意**：如果要设置画布的大小不能通过 CSS 样式进行设置，只能通过元素的 `width` 、`height` 属性进行设置，否则会出现问题。
html5 Canvas画图教程(3)—canvas出现1像素线条模糊不清的原因
09-28
上次我们讲到，canvas有时候会出现1像素的线条模糊不清且好像更宽的情况,这样的线条显然不是我们想要的。这篇文章的目的就是弄清楚里面的原理，以及解决它,感兴趣的朋友可以了解下哦
html canvas 绘制1px 出现模糊的原因及解决方法
Blog for 明月依希
07-09 4208
h5 canvas绘制一像素曲线时，可能导致2px曲线的结果。本质是画笔线宽不能被2整除，导致像素不能正好填充，有不满1px像素的绘制区域，从而导致模糊、多出1px的问题。 1px变2px的成因分析 这是由于绘制时，将画笔中线对齐坐标，必然有一半线宽在坐标之外，这一半的线宽，如果不是整数，会被自动加满，使之正好对齐一个像素点，由于本身是不满这1个像素的，所以用了更浅的颜色来表示。导致模...
Canvas 2D绘制抗锯齿的1px线条
weixin_30376163的博客
03-18 143
当绘制1像素的线条时,发现多条线明显存在着粗细不均的问题,线条带有明显的锯齿. 事实上,Canvas的绘制线条指令都存在这个状况,如lineTo,arcTo,strokeRect. 解决方案是将Canvas平移半个像素即可: var ctx = document.getElementById("canvas").getContext("2d"); ctx.translate(0.5, ...
Canvas中如何画一条清晰的线宽为奇数（如1px逻辑像素）的线?
weixin_30614109的博客
04-08 300
我在开发中使用canvas的机会不是很多，但是第一次实际使用中就遇到了问题，“很久很久以前，我自己画了一个雷达图，线宽都是1像素,但是显示效果不如期望，这才发现canvas中的画线还是有坑的”，对比一下两个图，可以发现下图比较清晰。   我们先画一个线宽为1像素的线，代码和显示效果如下： const ctx = document.getElementById(canvas).get...
html5 Canvas画图3：1像素线条模糊问题
weixin_30795127的博客
11-27 172
接上一篇canvas画线条教程 上次我们讲到，canvas有时候会出现1像素的线条模糊不清且好像更宽的情况，如下图： 这样的线条显然不是我们想要的。这篇文章的目的就是弄清楚里面的原理，以及解决它。 大家都知道屏幕上最小的显示尺寸就是1像素，虽然小于1像素的东西可能显示不出来，但计算机可不管，他会试着画一下。 其实像素终究来说也是一个单位，假如我们把画布放大到足够大，足以看清楚每个像素，会是...
canvas画布解决1px线条模糊问题
weixin_33979203的博客
04-30 685
物理像素呈现 物理像素在屏幕上是以网格的形式出现的，如下图所示。如果我们填充（2,1）到（5,5）的矩形，它们之间的整个区域（浅红色）落在像素边界上，所以得到的填充矩形将具有清晰的边缘。[像素占的是格子~~~ 吃鸽子肉可强身健体] 但是，如果设置1px的线条，画在（3,1）到（3,5）的坐标上，则可以得到第二个图像中的情况。实际要填充的区域（深蓝色）仅延伸到路径任一侧的像素的一半。必须渲染一个近似...
JavaScript全解析——canvas 入门（上）
千锋教育
05-04 3205
也就是说, 在描述线宽的时候, 实际上会从 0.5px 的位置绘制到 1.5px 的位置。○从坐标 ( 100, 100 ) 绘制到坐标 ( 300, 100 )○从坐标 ( 100, 100 ) 绘制到坐标 ( 300, 100 )○从坐标 ( 100, 100 ) 绘制到坐标 ( 300, 100 )所以在设置线段样式的时候, 会默认按照最后一次设置的样式来绘制所有的线段。●所以, 我们在进行 canvas 绘制内容的时候, 涉及到线段的时候。
canvas 1px 出现模糊解决方法及原理
weixin_34228617的博客
10-13 212
关于canvas绘制1像素出现模糊的原因及解决方法 canvas是html5中非常强大的功能，但是在绘制的时候如果出现1像素，例如画一条1像素的线可能出现模糊情况。 一、解决方法 网上比较常见的解决方法是+0.5 cxt.moveTo(x+0.5,y+0.5) cxt.lineTo(x+0.5, y+0.5) 这样确实可以让线重新变回清晰...
Canvas——操作像素
mantou_riji的博客
01-17 1423
获取到的像素信息是一个一维数组，四个值是一个像素点的信息分别代表 rgba的四个值，取值都是0-255。// 获取画布的像素信息：画笔.getImageData(x1,y1,x2,y2)// 像素信息是一个一维数组，四个值是一个像素点的信息分别代表 rgba的四个值。（x1,y1）: ImageData 对象左上角的 x和y 坐标，以像素计。ImageData 对象左上角的 x 坐标，以像素计。水平值（x），以像素计，在画布上显示图像的位置。竖直值（y），以像素计，在画布上显示图像的位置。
html5网格坐标系,[js高手之路]html5 canvas教程 - 1px问题以及绘制坐标系网格
weixin_36204626的博客
05-31 305
在canvas中，要画出1px的线条，默认情况下是不行的context.beginPath();context.moveTo( 100, 100 );context.lineTo( 400, 100 );context.closePath();context.stroke();context.beginPath();context.strokeStyle = 'red';context.moveT...
基于JavaScript canvas绘制贝塞尔曲线
01-19
简单描述：页面上有四个点，鼠标拖动四个点的位置来改变贝塞尔曲线的形状，双击放置点位 效果图： 代码： <!DOCTYPE html> <html lang=en> <head>... width: 20px;... height: 20px; ba
HTML5 Canvas画板钢笔绘制线条特效.zip
07-11
代码片段： button {  -webkit-appearance: none;  padding: 12px 24px;  border-radius: 0;... bottom: 24px;... letter-spacing: 2px;... border: 1px solid white;  cursor: none;  }
HTML5 Canvas绘制文本及图片的基础教程
12-14
在HTML5中，我们还可以在Canvas「画布」上绘制我们所需的文本文字，其中所涉及到的CanvasRenderingContext2D对象的主要属性和方法如下： 属性或方法 基本描述 font 设置绘制文字所使用的字体，例如20px 宋体，...
JavaScript canvas绘制渐变颜色的矩形
11-21
本文实例为大家分享了canvas绘制渐变颜色的矩形的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>...
关于canvas绘制模糊问题的解决方法
12-30
我绘制了一张375px的canvas，iphone6的宽度也是375px，ok，canvas铺满了整个屏幕。 那么canvas的大小就是375px，canvas类似于图片，一张375px的图片，我们就把它当做是图片来看就好了。我，尖沙咀段坤说的。 如果...
canvas画线有的粗有的细
何足道的博客
07-10 4718
canvas画线有的粗有的细        事情是这样子的，上次博主做一个五子棋小游戏，想玩五子棋首先就得有棋盘啦。。然后我就循环横竖各画20条线，做出棋盘的样子。        然而，画出来的线有的粗有的细，后来就度娘找原因。       原来，canvas绘制线条是从中间向两边绘制的，比如说你定义x坐标为1，它会以1为中心，向左0.5像素，向右0.5像素，但是渲染时不支持小于0.5像素，所以会...
canvas画线变粗变模糊的解决办法
qq_39122996的博客
10-10 3147
自己写的小例子 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>canvas动画</title> <style type="text/css"> #canvas { width: 500px; height...
canvas 绘制一个曲线统计图
最新发布
06-03
好的，以下是一个使用 Canvas 绘制曲线统计图的示例代码： ```html <!DOCTYPE html> <html> <head> <title>Canvas 绘制曲线统计图</title> <style> canvas { border: 1px solid #ccc; } </style> </head> <body> <canvas id="myCanvas" width="600" height="400"></canvas> <script> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); // 绘制坐标轴 ctx.beginPath(); ctx.moveTo(50, 50); ctx.lineTo(50, 350); ctx.lineTo(550, 350); ctx.stroke(); // 绘制曲线 var data = [20, 50, 100, 80, 120, 200, 180]; ctx.beginPath(); ctx.moveTo(50, 350 - data[0]); for (var i = 1; i < data.length; i++) { ctx.lineTo(50 + i * 70, 350 - data[i]); } ctx.strokeStyle = "#f00"; ctx.stroke(); // 绘制坐标刻度 ctx.beginPath(); ctx.font = "12px Arial"; for (var i = 0; i < data.length; i++) { ctx.moveTo(50 + i * 70, 350); ctx.lineTo(50 + i * 70, 355); ctx.fillText(i+1, 50 + i * 70, 370); } ctx.stroke(); </script> </body> </html> ``` 以上代码会绘制一个坐标轴，曲线和坐标刻度，可以根据需要进行修改。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值