Canvas入门06-线段与像素边界
我们知道,使用以下2个API可以绘制一条线段:
- moveTo(x, y) 向当前路径中增加一条子路径,该子路径只包含一个点,此为线段的起始点
- lineTo(x, y) 将线段的下一个点加入子路径中
context.strokeStyle = 'rgb(200, 200, 0)';
context.lineWidth = 1;
context.beginPath();
context.moveTo(0, 50);
context.lineTo(450, 50);
context.stroke();
但是你会发现,这条线段的宽度并不是1px,而是2px。
再画一条宽度为2px的线段。
context.lineWidth = 2;
context.beginPath();
context.moveTo(0, 60);
context.lineTo(450, 60);
context.stroke();
这条线段宽度与第一条相同,只是颜色更深一些。
再画一条宽度为1px的线段。
context.lineWidth = 1;
context.beginPath();
context.moveTo(0, 70.5);
context.lineTo(450, 70.5);
context.stroke();
可以看到,宽度确实比前两条线段窄。
为什么第一条线段的宽度不是1px呢?
这与canvas的绘制逻辑有关,当我们试图绘制一个线段时,canvas会读取lineWidth,,然后尝试将在坐标处两边各绘制一半的lineWidth,比如在坐标(0,2)绘制一条水平线,canvas会以坐标2 为中线,向上向下各绘制0.5px。但是,在1px之内,不可能只绘制0.5px,所以,它会继续延伸,填满整个像素。最后,加在一起就是2px了。
如果,将坐标点换成(0,1.5),沿着中心线绘制后,正好填满了整个像素,所以没有延伸。最后宽度就是1px。
建议
在实际应用中,如果想得到更好的体验,精确的像素值,如果线段的宽度是奇数像素,绘制时以n.5,即半数像素作为中轴线,如果线段的宽度为偶数像素,绘制时以n.0,即整数像素作为中轴线
参考博客:
https://www.cnblogs.com/v-rockyli/p/3833845.html
Canvas入门06-线段与像素边界的更多相关文章
- canvas学习笔记(中篇) -- canvas入门教程-- 颜色/透明度/渐变色/线宽/线条样式/虚线/文本/阴影/图片/像素处理
[中篇] -- 建议学习时间4小时 课程共(上中下)三篇 此笔记是我初次接触canvas的时候的学习笔记,这次特意整理为博客供大家入门学习,几乎涵盖了canvas所有的基础知识,并且有众多练习案例, ...
- 理解Canvas像素边界
大家看下面的例子 var context = document.getElementById('canvas').getContext('2d'); context.lineWidth = 1; co ...
- Canvas入门(2):图形渐变和图像形变换
来源:http://www.ido321.com/986.html 一.图形渐变(均在最新版Google中测试) 1.绘制线性渐变 1: // 获取canvas 的ID 2: var canvas = ...
- Canvas 入门案例
五. Canvas 入门案例 1. canvas 圆形绘制 <!DOCTYPE html> <html lang="en"> <head> ...
- Canvas入门笔记-实现极简画笔
今天学习了Html5 Canvas入门,已经有大神写得很详细了http://www.cnblogs.com/tim-li/archive/2012/08/06/2580252.html#8 在学习过后 ...
- Canvas入门(1):绘制矩形、圆、直线、曲线等基本图形
来源:http://www.ido321.com/968.html 一.Canvas的基础知识 Canvas是HTML 5中新增的元素,专门用于绘制图形.canvas元素就相当于一块“画布”,一块无色 ...
- HTML5 canvas入门
HTML5 Canvas入门 <canvas> 标签定义图形,比如图表和其他图像,您必须使用脚本来绘制图形.在画布上(Canvas)画一个红色矩形,渐变矩形,彩色矩形,和一些彩色的文字. ...
- canvas入门之时钟的实现
canvas 入门之作: 三步实现一个时钟: 直接上效果: step 1 : 背景制作首先制作从1-12的数字: var canvas = document.getElementById('ca ...
- JavaScript 基于HTML5 canvas 获取文本占用的像素宽度
基于HTML5 canvas 获取文本占用的像素宽度 by:授客 QQ:1033553122 直接上代码 // 获取单行文本的像素宽度 getTextPixelWith(text, fontS ...
随机推荐
- mac安装测试myCat
参考博文https://www.cnblogs.com/chanshuyi/p/head_first_of_mycat.html 1.下载解压mycat的mac版(位置不限) 2.cd进bin文件 ...
- ListView的创建
里面涉及到很多知识 包括3D样式的去除,重绘ListView控件,以及处理控件的边框颜色 // Test_listview_1.cpp : Defines the entry point for th ...
- event对象中offsetX,clientX,pageX,screenX的区别
1.offsetXoffset意为偏移量,是事件对象距左上角为参考原点的距离.以元素盒子模型的内容区域的左上角为参考点.不包括border.2.clientX事件对象相对于浏览器窗口可视区域的X,Y坐 ...
- default关键字
default关键字在JDK8中有两个用处. 1.在switch语句的时候使用default int gender = 3; String genderString; switch (gender) ...
- python的xlrd、xlwt模块、openpyxl /pymsql使用
xlrd模块: https://www.cnblogs.com/machangwei-8/p/10736528.html#_label0 xlwt模块 https://www.cnblogs.com/ ...
- 【SaltStack官方版】—— MANAGING THE JOB CACHE
MANAGING THE JOB CACHE The Salt Master maintains a job cache of all job executions which can be quer ...
- WIN 7 的vs2008 试用版评估期结束的解决方法
1. 在VS2008安装目录下把Setup/setup.sdb文件中的 [Product Key] T2CRQGDKBVW7KJR8C6CKXMW3D 改成 [Product Key] PYHYPWX ...
- springboot(11)使用SpringBoot validator进行数据验证
简介: 数据验证是作为一个企业级项目架构上设计的最基础的模块,前辈们曾说过:界面上传递到后台的数据没有百分之百值得相信的!为什么这么说呢?往往我们在编写程序的时候都会感觉后台的验证无关紧要,这样就会给 ...
- Linux培训教程 linux系统下分割大文件的方法
在linux中分割大文件,比如一个5gb日志文件,需要把它分成多个小文件,分割后以利于普通的文本编辑器读取. 有时,需要传输20gb的大文件,Linux培训 教程件到另一台服务器,也需要把它分割成多个 ...
- python – 如何禁用Django的CSRF验证?
如果只需要一些视图不使用CSRF,可以使用@csrf_exempt: from django.views.decorators.csrf import csrf_exempt @csrf_exempt ...