canvas中的像素绘制问题

这篇博客探讨了在canvas中进行像素绘制时遇到的问题,重点讲述了如何处理线宽在不同情况下(如整数倍、奇数或偶数)的绘制策略。当绘制点处于相邻像素交叉线时,线宽必须是2的整数倍以确保像素饱满;而绘制奇数线宽的线,使用像素中点坐标可达到理想效果。通过特定的绘制方法,即使颜色变淡也能创造出独特视觉效果。
摘要由CSDN通过智能技术生成
pixl的绘制,1.如果绘制点正处于相邻像素交叉线,绘制x像素的线宽,则从交叉线分别向前向后绘制x/2个像素,如果x/2是整数,则刚好填满x个像素,如果是小数,则先把整数格填满,再去绘制剩下的小数部分,绘制时,是将小数部分的颜色用来除以一个像素的宽度,颜色会变淡。所以要用整数坐标来画的话(即绘制点正处于相邻像素交叉线时),线宽必须是2的整数倍。否则会出现不饱满的像素。
2.如果绘制点为一个像素的中间位置,情况跟上面一样。也是分别向前向后绘制x/2个像素.要用它来绘制饱满的线宽,线宽必须是奇数。因为这样除以2后小数部分有个0.5,刚好填充中间位置的这个像素,剩下的整数部分用来指定剩下的像素点。
从上面可以知道,要绘制偶数线宽的线,为使其饱满,必须用整数坐标,绘制奇数线宽的直线,必须用像素中点坐标;
3.还可以这样使用,既然当是小数时,可能会使颜色变淡.看起来感觉还不错测试代码如下:

function drawGrid(w,h,stepx,stepy){
context.save();
context.lineWidth=3;//在这里更改线宽
context.strokeStyle='#666'
context.clearRect(0,0,w,h);
var k=0;
// interval=interval|| 5.5;//default 5;
for(var i=stepx;i<w;i+=step
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值