Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >HTML画布-如何绘制非常薄的线条?

HTML画布-如何绘制非常薄的线条?
EN

Stack Overflow用户
提问于 2017-07-14 19:19:14
回答 1查看 2.2K关注 0票数 3

我使用JavaScript库P5.js创建了一个项目,并使用它的内置line()和省略()函数将线条和圆圈绘制到画布上。我现在试图从我的项目中删除P5.js及其函数的全部,以保留纯JavaScript,但是当我用JavaScripts、ctx.LineTo和ctx.arc替换P5s行和椭圆函数时,结果就不一样了。

用P5.js库创建的图纸看起来更清晰,分辨率更高。

下面的图像是使用P5.js line()和省略()函数创建的。

然而,这个映像是使用纯JavaScript创建的,您可以看到它看起来更糟。

使用纯JavaScript,我已经将线宽设置为最薄的,但是它看起来仍然比P5.js版本更厚、更模糊。

我如何使用纯JavaScript绘制线条--P5.jsLibrary如何做才能得到相同的清晰结果?

我目前使用的Javascript如下:

代码语言:javascript
运行
AI代码解释
复制
ctx.beginPath();
ctx.moveTo(30, 40);
ctx.lineTo(60, 90);
ctx.strokeStyle = 'white';
ctx.lineWidth = 0.1;
ctx.stroke();

这个问题帖子被标记为另一个问题的副本,但是“重复”问题并没有解决我的问题,因为我已经说过,我已经尝试将.5添加到协调不起作用的值上。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-07-15 06:17:21

devicePixelRatio

画布是在错误的resolution.Suspect,您正在使用视网膜或高分辨率显示器。您需要将画布像素大小与设备像素大小相匹配,目前您正在匹配用于视网膜显示的CSS像素大小,即每个CSS像素为4个设备像素。使用devicePixelRatio全局属性查找CSS像素大小,然后将画布分辨率canvas.width = pixelWidth * devicePixelRatio设置为高度相同。

以下两个答案与同一问题有关。

票数 4
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/45114144

复制
相关文章
canvas简单线条的绘制
1.绘制线条之前首先进行声明线条开始绘制代码context.beginPath;说明:context是画板中获得的绘画环境上述的是cv
十月梦想
2018/08/29
9320
canvas画布实现矩形的绘制
绘制一个实心矩形cv.fillRect(x,y,width,height)绘制之前声明绘制的实心矩形颜色使用fillStyle
十月梦想
2018/08/29
2.6K0
IOS – OpenGL ES 绘制线条 GPUImageLineGenerator
GPUImageLineGenerator 属于 GPUImage 图像处理相关,用来处理图片线条效果,shader 源码如下:
猿说编程[Python和C]
2023/03/25
5270
html5 canvas画布
<!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <title></title> </head> <body>     <canvas id="myCanvas" width="80px" height="80px" style="border: 1px solid #000000"></canvas>     <canvas id="myCanvas2"></canvas>     <canvas id="myCanvas3"></c
用户7718188
2021/11/01
9120
html5 canvas画布
本文由用户 AnnettaMcca 自行上传分享,仅供网友学习交流。所有权归原作者,若您的权利被侵害,请联系管理员。
用户7705674
2021/09/22
1.1K0
WPF 绘制对齐像素的清晰显示的线条
发布于 2017-12-12 13:49 更新于 2018-08-13 12:47
walterlv
2018/09/18
1.5K0
WPF 绘制对齐像素的清晰显示的线条
IOS开发 图形绘制,绘制线条,矩形,和垂直和居中绘制文字
假设把上面的方法放入到一个类 DrawUtil 中,我们可以通过 DrawUtil 来调用方法。
张云飞Vir
2020/03/16
1.8K0
如何用Scratch 3绘制矢量图形 【Gaming】
Scratch是一种流行的用于创建视频游戏和动画的可视化编程语言。它还具有矢量绘图工具,任何人都可以使用它来创建独特的游戏和艺术。
五月Rambo
2019/11/10
5.7K0
如何用Scratch 3绘制矢量图形 【Gaming】
flutter画布绘制图片和文字
本节目标: [1]. 了解如何获取 [ui.Image] 对象。 [2]. 将一张图片使用 Canvas 绘制出来。 [3]. 知道如何从图片中取出部分图片绘制到指定矩形域中。 [4]. 了解 Canvas 绘制图集的操作。 [5]. 如何在 Canvas 中绘制文字,并完善坐标系刻度。 ---- 一、图片绘制: image-20201030110334887 绘制图片需要的是 ui.Image,需要异步加载,这里用 loadImageFromAssets 处理。 PaperPainter 接收 u
用户1974410
2022/09/20
2.6K0
flutter画布绘制图片和文字
Python+matplotlib绘制海螺贝壳上美丽的线条
在海洋中的亿万只海螺中,大部分都是右旋螺纹,从底部看的话海螺开口在右边,如下图所示:
Python小屋屋主
2019/05/15
1.5K0
AI干货-Adobe illustrator羽毛状的线条如何绘制【附安装包】
各版本安装包获取:http://jiaocheng8.top/ai.html?0idshjb Adobe illustrator这款软件为用户们提供了非常多的 图片编辑 工具和 绘画 工具,满足用户们
木子学Lee
2023/02/08
7640
AI干货-Adobe illustrator羽毛状的线条如何绘制【附安装包】
【Android UI】Canvas 画布 ⑦ ( Canvas 绘制显示区域 | Canvas 绘制矩形源码分析 )
Canvas 状态保存机制 中 , 存在两个栈结构 , 分别是 状态栈 和 图层栈 ;
韩曙亮
2023/03/30
1.6K0
【Android UI】Canvas 画布 ⑦ ( Canvas 绘制显示区域 | Canvas 绘制矩形源码分析 )
vue使用canvas签名之移动端
在一些项目业务中,经常会使用到画板,让用户自己去写/画一些东西做标示,比如说在线签电子合约、签名等,如果不用插件,那么如何使用h5的canvas画布来实现这一需求呢? 【本篇只讨论移动端,PC端请看上篇】
流眸
2020/02/14
1.8K0
vue使用canvas签名之移动端
Canvas基础教程(章节1)
  这是我的第一篇Canvas 基础教程,我先简述一下什么是Canvas 。   H5 新增内容,允许脚本语言动态渲染图像,是由 HTML 代码配合高度和宽度属性而定义出的可绘制区域。JavaScript 代码可以访问该区域,类似于其他通用的二维 API,通過一套完整的绘图函数来动态生成图形。一些可能的用途,包括使用 Canvas 构造图形,动画,游戏和图片。 Canvas 对象的属性 height 属性:   画布的高度。和一幅图像一样,这个属性可以指定为一个整数像素值或者是窗口高度的百分比。当这个值改变的时候,在该画布上已经完成的任何绘图都会擦除掉。默认值是 150。 width 属性:   画布的宽度。和一幅图像一样,这个属性可以指定为一个整数像素值或者是窗口宽度的百分比。当这个值改变的时候,在该画布上已经完成的任何绘图都会擦除掉。默认值是 300。 那Canvas 绘制的图形或动画有哪些优点呢?
我不是费圆
2020/10/10
1.2K0
Canvas基础教程(章节1)
手写原生代码专题 | 简易手写画板(二)
如视频所示,在这个示例中,我们用到了画布 canvas 相关的知识,比如创建画布、画圆形、画直线的基础知识,有了这些基础后,我们就能轻松完成本示例,示例效果如下视频所示。
前端达人
2021/07/16
1.5K0
vue使用canvas签名之PC端
在一些项目业务中,经常会使用到画板,让用户自己去写/画一些东西做标示,比如说在线签电子合约、签名等,如果不用插件,那么如何使用h5的canvas画布来实现这一需求呢?【本篇只讨论PC端,移动端期待下篇】
流眸
2020/02/14
1.5K0
vue使用canvas签名之PC端
Canvas两点连线及多点连线
使用html5 Canvas绘制直线所需的CanvasRenderingContext2D对象的主要属性和方法(有”()”者为方法)如下:
javascript.shop
2019/09/04
9.4K0
HTML5画布-小球碰撞
       html5是万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改。
阿珏
2018/08/08
1.7K0
点击加载更多

相似问题

HTML画布无法绘制线条

21

HTML画布清除绘制的线条

12

在画布html中绘制线条

11

在android的phonegap中画布绘制线条非常慢

12

在HTML画布中继续绘制线条

13
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
社区富文本编辑器全新改版!诚邀体验~
全新交互,全新视觉,新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能,全面提升创作效率和体验
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文