canvas中strokeRect的渲染问题strokeRect把一像素的边框渲染成两像素

> 结论写在头

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像素，要除去一边线的宽度。

转载于:https://www.cnblogs.com/jacobb/p/6814328.html

canvas中strokeRect的渲染问题strokeRect把一像素的边框渲染成两像素相关推荐

html5绘制矩形动画,HTML5 Canvas中绘制矩形实例
本文翻译自Steve Fulton & Jeff Fulton HTML5 Canvas, Chapter 2, "The Basic Rectangle Shape". ...
html5中阴影,HTML5 Canvas 中的颜色、样式和阴影的属性和方法
颜色.样式和阴影的属性与方法 fillStyle 设置或返回用于填充绘画的颜色.渐变或模式 strokeStyle 设置或返回用于笔触的颜色.渐变或模式 ...
html5怎么转换,HTML5 canvas中的转换方法
转换方法 scale(scalewidth,scaleheight) 缩放当前绘图至更大或更小 scalewidth 缩放当前绘图的宽度 (1=100%, ...
矩形做成翻页的效果html5,HTML5 在canvas中绘制矩形附效果图
一.绘制矩形 canvas使用原点(0,0)在左上角的坐标系统,x坐标向右递增,y坐标向下递增. 使用绘图环境的矩形绘制函数来绘制矩形. fillRect(x,y,width,height) : 绘制 ...
在Canvas中绘制圆角矩形
问题的提出要在Canvas中绘制一个矩形,使用strokeRect或fillRect函数即可. var canvas = document.getElementById("canvas&q ...
c语言随机选几个球,WebAssembly Demo之Canvas中随机运动圆球
作者:云荒杯倾 1.Demo功能介绍实现了一个圆球在800px * 600px画布内随机运动,固定时间间隔随机运动一次,运动方向由x和y轴组成的向量决定,这个向量是随机值(后面会称它为随机向量),从 ...
unity2D学习（14）血条显示、Canvas中Render Mode的三种模式介绍
1 血条素材处理分割处理:对上一章画出来的血条图片做分割处理整理素材格式: Sprite Mode选择Multiple:因为一张图片包含多个素材. Pixels Per Unit单位像素为16:与 ...
java todataurl_利用canvas中toDataURL()将图片转为dataURL(base64)的方法详解
将图片转为base64的好处将图片转换为Base64编码,可以让你很方便地在没有上传文件的条件下将图片插入其它的网页.编辑器中. 这对于一些小的图片是极为方便的,因为你不需要再去寻找一个保存图片的地 ...
canvas中的碰撞检测笔记
2019独角兽企业重金招聘Python工程师标准>>> canvas中的碰撞检测笔记时间 2016-01-19 08:29:00 博客园精华区原文 http://www. ...

canvas中strokeRect的渲染问题strokeRect把一像素的边框渲染成两像素

> 结论写在头

> 解决办法

canvas中strokeRect的渲染问题strokeRect把一像素的边框渲染成两像素相关推荐

最新文章

热门文章