canvas lineWidth为1时线条粗细和颜色

今天在使用html5的canvas时碰到了一个问题: 当设置lineWidth为1, strokeStyle为'#000'时，画出来的线段和lineWidth为2画出来的线段差不多粗。如下

代码如下:

<!DOCTYPE html>
<html><head><title>Canvas</title><style>canvas {border: 1px solid pink;}</style></head><body><canvas width="500" height="300" id="mycanvas"></canvas></body><script type="text/javascript">var mycanvas = document.getElementById('mycanvas');var ctx = mycanvas.getContext('2d');ctx.lineWidth = 1;ctx.strokeStyle = '#000';drawLine(ctx, 10, 10, 100, 10);ctx.lineWidth = 2;drawLine(ctx, 10, 20, 100, 20);function drawLine(ctx, startX, startY, endX, endY) {ctx.beginPath();ctx.moveTo(startX, startY);ctx.lineTo(endX, endY);ctx.stroke();ctx.closePath();}</script>
</html>

要解决这个问题，我们可以这样做:

<!DOCTYPE html>
<html><head><title>Canvas</title><style>canvas {border: 1px solid pink;}</style></head><body><canvas width="500" height="300" id="mycanvas"></canvas></body><script type="text/javascript">var mycanvas = document.getElementById('mycanvas');var ctx = mycanvas.getContext('2d');ctx.lineWidth = 1;ctx.strokeStyle = '#000';<span style="color:#ff0000;">ctx.translate(0.5, 0.5);</span>drawLine(ctx, 10, 10, 100, 10);ctx.lineWidth = 2;<span style="color:#ff0000;">ctx.translate(-0.5, -0.5);</span>drawLine(ctx, 10, 20, 100, 20);function drawLine(ctx, startX, startY, endX, endY) {ctx.beginPath();ctx.moveTo(startX, startY);ctx.lineTo(endX, endY);ctx.stroke();ctx.closePath();}</script>
</html>

当lineWidth为奇数时在选区的坐标上加上0.5个像素。画出来的线段如下:

canvas lineWidth为1时线条粗细和颜色相关推荐

uni-app - 电子签字板组件（签名专用写字画板，支持调整写字板 “横纵“ 方向，可调整线条粗细颜色等，Canvas 绘制非常丝滑流畅）完美兼容 H5 APP 小程序，最好用的画板签字教程插件源码
前言网上的教程代码非常乱且都有 BUG 存在,非常难移植到自己的项目中,本文代码干净整洁注释详细. 本文实现了全端兼容,签名专用的写字板组件,真机流畅丝滑且无 BUG, 您直接复制组件源码,按照详 ...
canvas实现画板功能——选择颜色、线条粗细、橡皮擦、撤销等功能
最近在看canvas画板的部分,正好看到一个案例是关于canvas画板的,在此做下记录. 此案例是采用面向对象的编程思想,具体表现形式就是:js部分是一个对象,对象里面是一些变量和方法. html部分 ...
php网页画线,HTML5 canvas基本绘图之绘制线条
是HTML5中新增的标签,用于绘制图形,这篇文章主要为大家详细介绍了HTML5 canvas基本绘图之绘制线条方法,感兴趣的小伙伴们可以参考一下是HTML5中新增的标签,用于绘制图形,实际上,这个标 ...
路径图形html5 Canvas画图2：画线条 -java教程
空话就不多说了,开始... 如果你还不道知Canvas是什么,可以看看上一篇. 在学画画的时候,线条是最基本的了,而线条的接连可以成组任何图形.在Canvas中也是如此. 在开始之前我们先拿出画布和画 ...
ai css 线条粗细_如何训练AI将您的设计模型转换为HTML和CSS
ai css 线条粗细 by Emil Wallner 埃米尔·沃尔纳(Emil Wallner) 如何训练AI将您的设计模型转换为HTML和CSS (How you can train an AI ...
WPF4文字模糊不清晰、边框线条粗细不一致的解决方法
原文:WPF4文字模糊不清晰.边框线条粗细不一致的解决方法软件测试过程中发现在一台1600*900的分辨率电脑上文字模糊,甚至某些个文字出现压缩扭曲经过实践,发现按下面方法能解决一点问题: 在窗口 ...
解决html中表格线条粗细不一的问题
我们再html中使用原生的table时,为了美观往往会通过改变td的border来改变表格边框的样式,但是通常会处出现边框线条粗细不一的问题,下面代码解决了该问题 table {border-coll ...
cad怎么设置线的粗细_CAD图纸线条粗细如何修改?CAD图纸线宽如何调整?
在使用autocad软件绘图时,有时需要通过线条粗细来进行线条的区分,此时就要懂得如何设置线条的粗细,那么如何修改CAD图纸的线条粗细呢?线条粗细设置失败后应该怎么办?下面小编就为大家详细介绍一下,一 ...
cad线加粗怎么设置_CAD图纸线条粗细如何修改?CAD图纸线宽如何调整?
在使用autocad软件绘图时,有时需要通过线条粗细来进行线条的区分,此时就要懂得如何设置线条的粗细,那么如何修改CAD图纸的线条粗细呢?线条粗细设置失败后应该怎么办?下面小编就为大家详细介绍一下,一 ...
R语言可视化包ggplot2包调整线条粗细实战（Adjust Line Thickness）
R语言可视化包ggplot2包调整线条粗细实战(Adjust Line Thickness) 目录 R语言可视化包ggplot2包调整线条粗细实战(Adjust Line Thickness)

canvas lineWidth为1时线条粗细和颜色

canvas lineWidth为1时线条粗细和颜色相关推荐

最新文章

热门文章