`
换个号韩国红果果
  • 浏览: 46226 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类

canvas中的像素绘制问题

阅读更多
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)

分享到:
评论

相关推荐

    Go-pocketplace与朋友在同一个canvas上绘制像素

    pocketplace 与朋友在同一个canvas上绘制像素

    JavaScript通过canvas获取图片像素点并导出到文件转为RGB像素值HTML标签

    1.通过JS技术把获取已知图片的像素值 2.获取到像素值去除A通道干扰 3.把最终的像素值一维数组转换HTML文件格式并导出到文件 4.懂JS获取文件内容的技术人员可以通过JS获取导出的文件内容,赋值给HTML标签,这样图片就...

    canvas绘制像素灯泡粒子特效.rar

    通过canvas绘制灯泡粒子效果!

    canvas+svg实现标尺网格效果

    使用js+canvas绘图,结合svg图形,实现标尺栏和网格效果。

    HTML5 Canvas 旋转风车绘制

    写在前面: 亲爱的朋友们大家好,鄙人自学前端,第一次写博客,写...首先我们现在html文件里面插入&lt;canvas&gt;标签,定义画布的尺寸,我这里定义画布的尺寸为800*600像素。同时在内部样式表里面设置canvas的背景色(方便画

    canvas学习总结三之绘制路径-线段

    Canvas绘图环境中有些属于立即绘制图形方法,有些绘图方法是基于路径的。 立即绘制图形方法仅有两个strokeRect(),fillRect(),虽然strokezText(),fillText()方法也是立即绘制的,但是文本不算是图形。 基于路径的绘制...

    canvas-示例

    HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。 画布是一个矩形区域,您可以控制其每一像素。 canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法

    canvas.xmind

    新的HTML标准HTML5中Canvas 元素用于在网页上绘制图形,该元素标签 强大之处在于可以直接在HTML上进行图形操作,具有极大的应用价值。 HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。 画布是一个矩形区域...

    pixelspace:Pixelspace是用于在HTML5 Canvas中绘制和设置像素动画的极简工具

    Pixelspace是用于将像素绘制到HTML5 Canvas的极简工具包。 如果具有简洁的绘图API,简单的动画循环和少量有用的实用程序。 在Chrome,Firefox和Safari中测试 演示站点: 入门 安装 npm install 建立像素空间 ...

    canvas进阶教程ppt

    canvas进阶版ppt,学习canvas必备HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。 画布是一个矩形区域,您可以控制...canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法,可以创建丰富的图形引用。

    console-canvas:Console-Canvas 允许您使用 HTML5 Canvas 命令在终端控制台中绘制。 输出彩色 ASCII 字符而不是像素

    Console-Canvas 允许您使用 HTML5 Canvas 命令在终端/控制台中进行绘制。 输出彩色 ASCII 字符而不是像素。 ##例子 var canvas = require('console-canvas') , ansi = require('ansi') , ctx = canvas....

    html 5 canvas 手写签名

    canvas 元素用于在网页上绘制图形。 什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。 画布是一个矩形区域,您可以控制其每一像素。 canvas 拥有多种绘制路径、矩形、圆形、字符以及添加...

    html5中监听canvas内部元素点击事件的三种方法

    canvas内部元素不能像DOM元素一样方便的添加交互事件监听,因为canvas内不存在“元素”这个概念,他们仅仅是canvas绘制出来的图形。...本文将介绍三种方法,判断坐标点...像素检测法的思路是,将canvas中的多个图形(如果

    canvas案例笔记

    平移: ctx.translate(x, y) x表示从当前坐标系向x正方向移动x像素 y表示从当前坐标系向y轴的正方向移动y像素 旋转: ctx.rotate(x); x 表示弧度制单位 从当前坐标系沿着旋转x弧度 如果x值为正 顺时针旋转 反之 逆...

    HTML5 Canvas核心技术 图形、动画与游戏开发

    208 4.7 以图像制作动画 211 4.8 图像绘制的安全问题 216 4.9 性能 216 4.9.1 对比drawimage(htmlimage)、drawimage(htmlcanvas)与putimagedata()的绘图效率 217 4.9.2 在canvas中绘制另一个canvas与绘制普通...

    canvas:使用WebSocket在服务器浏览器中的Web浏览器中HTML 2D画布上绘制

    Go程序(服务器)使用二进制格式通过WebSockets将绘制命令发送到Web浏览器(客户端)。 反过来,客户端将键盘,鼠标和触摸事件发送到服务器。 该模块不需要特定于操作系统的后端或Cgo绑定。 它不使用WebAssembly,...

    python实现简易的像素艺术编辑器应用程序

    应用程序采用了Python的tkinter库构建GUI界面,并在其中嵌入了Canvas类用于绘制,Toolbar类用于提供绘制工具,以及Editor类用于整合并启动编辑器。用户可以通过点击或拖拽来绘制像素,选择不同颜色,进行放大缩小等...

    使用 HTML5 canvas 进行 Web 绘图

    HTML5 canvas 元素的出现填补了这种不足,开发人员可以使用 JavaScript 脚本语言在 canvas 中进行一系列基于命令的图形绘制操作,本文将通过讲解如何使用 canvas 元素进行基本绘图操作,以及完成简单的动画和用户...

    Html5 Canvas.docx

    来源于Mozilla网站的HTML5 Canvas教程...主要内容:Canvas的基本用法,使用Canvas来绘制图形,使用样式和颜色,绘制文本,使用图像,变形,组合,基本动画,高级动画,像素操作,点击区域和无障碍访问,Canvas的优化。

    html5-Canvas可以在web中绘制各种图形

    在html5中我觉得最重要的就是引入了Canvas,使得我们可以在web中绘制各种图形。给人感觉单在这点上有点模糊我们web和桌面程序的感觉。在html5外web中也有基于xml的绘图如:VML、SVG。而Canvas为基于像素的绘图。...

Global site tag (gtag.js) - Google Analytics