当前位置:首页 > 开发 > Web前端 > 前端 > 正文

canvas中的像素绘制问题

发表于: 2015-07-06   作者:换个号韩国红果果   来源:转载   浏览:
摘要: pixl的绘制,1.如果绘制点正处于相邻像素交叉线,绘制x像素的线宽,则从交叉线分别向前向后绘制x/2个像素,如果x/2是整数,则刚好填满x个像素,如果是小数,则先把整数格填满,再去绘制剩下的小数部分,绘制时,是将小数部分的颜色用来除以一个像素的宽度,颜色会变淡。所以要用整数坐标来画的话(即绘制点正处于相邻像素交叉线时),线宽必须是2的整数倍。否则会出现不饱满的像素。 2.如果绘制点为一个像素的
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+=stepx){
       			k=i;//上面介绍的第一种情况
       			context.beginPath()
       			context.moveTo(k,0);
       			
       			context.lineTo(k,h);
       			context.stroke();

       		}
       		for(var i=stepy;i<h;i+=stepy){
       			k=i+0.5;//第二种情况
       			context.beginPath()
       			context.moveTo(1,k);
       			
       			context.lineTo(w,k);
       			context.stroke();

       		}
       		context.restore()
       }
       drawGrid(context.canvas.width,context.canvas.height,10,10)

canvas中的像素绘制问题

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
问题的提出 要在Canvas中绘制一个矩形,使用strokeRect或fillRect函数即可。 var canvas = document
本博客只要没有注明“转”,那么均为原创,转贴请注明本博客链接链接 我们在自定义View中有的时候会
本博客只要没有注明“转”,那么均为原创,转贴请注明本博客链接链接 我们在自定义View中有的时候会
HTML5在canvas中绘制复杂形状附效果截图 一、绘制复杂形状或路径 在简单的矩形不能满足需求的情况下
本博客只要没有注明“转”,那么均为原创,转贴请注明本博客链接链接 我们在自定义View中有的时候会
我们在自定义View中有的时候会想自己绘制文字,自己绘制文字的时候,我们通常希望把文字精确定位,文
在Android中绘制基本的集合图形,本程序就是自定义一个View组件,程序重写该View组件的onDraw(Canva
android游戏开发中,使用android.graphics中的类来绘制2D向量图和文字。 一 画布Canvas 在Android中
HTML5 Canvas 绘制时钟 2013-01-29 15:47 by VVG, 315 阅读, 0 评论, 收藏, 编辑 demo演示: contex
beginPath方法表示开始绘制路径,moveTo(x, y)方法设置线段的起点,lineTo(x, y)方法设置线段的终点
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号