canvas总结:线段宽度与像素边界

在canvas中,我们经常需要绘制线段,主要使用moveTo和lineTo两个方法,moveTo移动至线段起始点,lineTo将线段绘制至终点。同时,绘制线段时可以指定线段的宽度,使用lineWidth属性,lineWidth默认为1,必须大于0

moveTo(x, y): 移动至坐标x,y

lineTo(x, y): 线段终点坐标x,y

简单绘制代码如下:

var context = document.getElementById(‘canvas‘).getContext(‘2d‘);
context.lineWidth = 2; //设置线宽
context.beginPath(); //开始绘制路径
context.moveTo(0, 50); //移动至起始点
context.lineTo(50, 50); //移动至终点
context.stroke(); //绘制

Done, 绘制出了一条线宽为2的线段,就这么简单

那我们再绘制一条线宽为1的线段

context.lineWidth = 1;
context.beginPath();
context.moveTo(50, 50);
context.lineTo(100, 50);
context.stroke();

我勒个去,怎么跟线宽2的宽度是一样的,宽度也是2,只是颜色稍浅。

那我们换个思路,刚才绘制的Y轴左边为50,我们改成50.5呢,分别再绘制两条线宽分别是2和1的线段

context.lineWidth = 2;
context.beginPath();
context.moveTo(0, 70.5);
context.lineTo(50, 70.5);
context.stroke();

context.lineWidth = 1;
context.beginPath();
context.moveTo(0, 80.5);
context.lineTo(50, 80.5);
context.stroke();

从上至下分别称为线段1,2,3,4

显然,线段3比1,2都要宽,实际为3px,线段4实际为1px

线段1:绘制线宽2, 实际宽度2

线段2:绘制宽度1, 实际宽度2

线段3:绘制宽度2, 实际宽度3

线段4:绘制宽度1: 实际宽度1

只有1和4才是我们想要的结果

为什么呢?

其实,这跟canvas的绘制逻辑有关,当我们试图绘制一个线段时,canvas会读取lineWidth,,然后尝试将在坐标处两边各绘制一半的lineWidth,比如我们下图:

我们在坐标3处画一条宽为1的横线,canvas会以3为中轴线,在两边各画0.5像素,深蓝色就是我们期望的效果(2.5-3.5,1个像素),但实际上,浅蓝色也会被绘制出来,因为canvas无法在整个像素宽内只绘制半个像素,所以坐标轴上下两个方向都都会被扩展至整个像素宽度内(2-4,两个像素),但是扩展的像素实际的值并不是原值相同,而是取其一半,所以最直接的视觉感受是:线条比预想的变宽了,但是颜色浅了很多。

还是以宽为1的横线为例,我们如果将其绘制在纵坐标2.5处呢,即以半像素作为中轴线

同样浏览器进行绘制时,在2.5上下各绘制0.5的像素宽度,但与上面的例子不同的是,图像边界正好落在整数像素边界内,合起来正好为1个像素,这个时候,就不需要向两边扩展,而是我们预期的(2-3)的1个像素宽度。

同理,我们分别使用两种方式绘制宽度为2的线段时,效果恰恰相反,在坐标3处绘制的时候,像素正好扩展至2-4,即2个像素,符合我们的预期;而在坐标2.5处绘制时,像素扩展至1.5-3.5,未到边界,需要补足,就变成了1-4,即3个像素。

建议

在实际应用中,如果想得到更好的体验,精确的像素值,如果线段的宽度是奇数像素,绘制时以n.5,即半数像素作为中轴线,如果线段的宽度为偶数像素,绘制时以n.0,即整数像素作为中轴线

canvas总结:线段宽度与像素边界

时间: 2024-11-05 06:13:19

canvas总结:线段宽度与像素边界的相关文章

图片压缩后长度和宽度 及像素坐标

图片压缩后长度和宽度 及像素坐标 CGFloat    scaleFloat = 0.6;+ (UIImage *) scaleImage: (UIImage *)image scaleFactor:(float)scaleFloat{    CGSize size = CGSizeMake(image.size.width * scaleBy, image.size.height * scaleBy); UIGraphicsBeginImageContext(size);    CGConte

pcl-设置多线段宽度和颜色

显示点云有使用vtk的,有使用 ros 中riz ?库的,使用pcl显示点云数据比较方便,但是对于一些模型形状只能固定特定的效果,比如说直线段,只能绘制点到点两点之间的线段.但是项目需要绘制点1到点2到...点n多条线段的连接,并且绘制设置线段宽度. 步骤: 1.把 vtkRenderWindowInteractorFix.cpp vtkRenderWindowInteractorFix.h pcl_visualizer.h pcl_visualizer.cpp shapes.h shapes.

canvas 计算文字宽度(常用于文字换行)

var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.font="30px Arial"; var txt="Hello World" ctx.fillText("width:" + ctx.measureText(txt).width,10,50) ctx.fillText(txt,10,100); 用法 me

【30分钟学完】canvas动画|游戏基础(4):边界与碰撞

前言 本系列前几篇中常出现物体跑到画布外的情况,本篇就是为了解决这个问题. 阅读本篇前请先打好前面的基础. 本人能力有限,欢迎牛人共同讨论,批评指正. 越界检测 假定物体是个圆形,如图其圆心坐标即是物体的x轴和y轴坐标. 越界是常见的场景,一般会有两种场景的越界:一是整个物体移出区域,二是物体接触到区域边界.我们以画布边界为例进行讨论,示例中矩形边界即是: let top = 0; let bottom = canvas.height; let left = 0; let right = can

Opengl研究4.0 走样与反走样

DionysosLai([email protected]) 2014-06-25 走样与反走样,也叫混淆与反混淆.所谓走样,是由于使用离散量(像素)表示连续量(图形)而引起的失真. 走样现象: 1.      阶梯状的图形边界 如图所示: 由于像素点是一块一块的,存在锯齿状. 2.       图形细节失真 由于显示图形的最小单位为像素,像素是由宽度的.有时候,我们可能显示的线段比像素要窄,要小.那么可能出现两种情况:a. 如果显示的线段宽度比像素宽度小一点,将被保留:b. 如果线段很细,就不

Canvas 彩色像素滚动条动画 案例分析

最近在学习canvas学习过程中记录下我个人对canvas用法的理解与分析,之前没有用canvas做案例的时候 就只知道canvas有一些属性,但是用到的时候才知道自己知道的canvas是那么少.下面我就分析一下今天我研究一天的canvas案例吧.多有不足之处 请看到的同学批评指正.大概就是类似图片样式滚动显示效果. 1.HTML代码部分 写进<canvas></canvas>标签 2.用javascript代码控制canvas画布,下面是代码部分 代码的解析我就直接在代码展示区域

[转]html5 Canvas画图教程(3)—canvas出现1像素线条模糊不清的原因

上次我们讲到,canvas有时候会出现1像素的线条模糊不清且好像更宽的情况,如下图:  这样的线条显然不是我们想要的. 这篇文章的目的就是弄清楚里面的原理,以及解决它. 大家都知道屏幕上最小的显示尺寸就是1像素,虽然小于1像素的东西可能显示不出来,但计算机可不管,他会试着画一下. 其实像素终究来说也是一个单位,假如我们把画布放大到足够大,足以看清楚每个像素,会是什么情况呢?大概是这个样子: 每个像素都有起止范围,如图所示,他们的范围从左起,跨过1像素,到右止. 如果我们画1像素线条的时候,遵循像

用Canvas制作简单的画图工具

今天用Canvas制作了一个画图工具,非常简单,功能也不是很多,主要有背景网格,画线,画圆,画矩形和画圆角矩形,也用到了canvas的一些基本知识,在这里一一列举. 1.线段的绘制: 如何绘制真正的1像素的线段? 如果在像素边界处绘制一条1像素宽的垂直线段,那么canvas的绘图环境对象会试着将半个像素画在边界中线的右边,将另外半个像素画在边界中线的左边.然而,在一个整像素的范围内绘制半个像素宽的线段是不可能的,,所以左右两个方向上的半像素都被扩展为1像素.如图所示 本来我们想要将线段绘制在深灰

canvas绘制形状

栅格 之前简单模板中有个宽/高150px的canvas元素.如下图所示,canvas元素默认被网格所覆盖.通常来说网格中的一个单元相当于canvas元素中的一像素.栅格的起点为左上角(坐标为(0,0)).所有元素的位置都相对于原点定位.所以图中蓝色方形左上角的坐标为距离左边(Y轴)x像素,距离上边(X轴)y像素(坐标为(x,y)). 绘制矩形 不同于SVG,HTML中的元素canvas只支持一种原生的图形绘制:矩形.所有其他的图形的绘制都至少需要生成一条路径. canvas提供了三种方法绘制矩形