canvas中strokeRect的渲染问题>>strokeRect把一像素的边框渲染成两像素
来源:互联网 发布:淘宝活动代报 编辑:程序博客网 时间:2024/05/16 00:35
> 结论写在头
var oC = document.getElementById('c1');var oGC = oC.getContext('2d');oGC.strokeRect(50,50,100,100);//默认绘制黑色一像素的线
像这个用canvas绘制出一个方形的时候,由于设置的top值和left值是50px,所以canvas会在第50和第51个像素之间从中间开始绘制一像素的线,第50和第51个像素各占0.5像素。
计算机并不能渲染0.5个像素,所以导致第50和第51个像素都被渲染了,渲染的颜色就成了灰色。(白加黑:背景色加线的颜色)
> 解决办法
既然会因为0.5像素的问题而渲染了两个像素,那么在设置top值和left值时,增加或减少0.5像素就可以解决了。想绘制在第51个像素就设置50.5,想绘制在第50个像素就设置49.5。
另外,值得注意的是,画出来的方形大小只有99*99像素,要除去一边线的宽度。
阅读全文
0 0
- canvas中strokeRect的渲染问题>>strokeRect把一像素的边框渲染成两像素
- HTML5中Canvas rect(), strokeRect() 和 fillRect() 的区别
- 移动端一像素的边框问题
- 一像素边框的实现
- html5 canvas 渲染像素混合模式
- html5 rect()、fillrect()、strokeRect()的区别
- <html5 canvas>一个简单的矩形,clearRect(), strokeRect(), fillRect(), 鼠标事件onmousedown
- HTML5 canvas 中的 fillstyle fillrect strokeStyle strokeRect fill stroke rect 的简单理解
- 腾讯ISUX: 浏览器亚像素渲染与小数位的取舍
- Unity中截图只渲染有像素的区域,并且压缩保存到本地
- AGG学习之四----像素渲染器与mask渲染器的适配器
- 【坑】html5中使用canvas绘制两个strokeRect之间忘了用beginPath()
- BufferedImage 与像素级渲染
- ios 点坐标、渲染像素、物理像素、设备像素
- 一像素边框
- 一像素边框实现
- 生成一像素表格边框的五种方法
- 移动端1像素边框问题的解决方案
- SL代码生成配置
- 为什么canvas宽高要设置在标签内>>宽高设置在style和设置在canvas的区别
- python 中对配置文件的解析 ConfigParser & ConfigObj
- 关于beginPath()和closePath()的关系>>canvas的beginPath和closePath分析总结,包括多段弧的情况
- angular2入门简介
- canvas中strokeRect的渲染问题>>strokeRect把一像素的边框渲染成两像素
- eclipse快捷键大全
- 到今天,需要遵循优雅降级和渐进增强吗
- python 继承
- cookie,localStorage和sessionStorage的区别
- 浮动清除,模型定位
- 【转】老生常谈-从输入url到页面展示到底发生了什么
- 2017.11.5与章丘四中互测莱芜试题
- 关于数据库基本命令