如何画使用JavaScript一个简单的尺子？ [英] How to draw a simple ruler with JavaScript?
本文介绍了如何画使用JavaScript一个简单的尺子？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我开始与PhoneGap的，和我想要一个简单的应用，一把尺子。我是一个初学者在JavaScript中，我大部分的移动工作的是原生的Android code，但我对这个破解我的头，我无法弄清楚什么是错的。
由于不同尺寸的屏幕我的想法是计算有多少像素具有以一毫米（pixelsInMm）得到屏幕的高度和使用HTML5画布画一条线每N个像素。
我的HTML的身体是很简单，画布填充整个屏幕
＆LT;身体的onload =的init（）; ID =舞台级=主题＆GT;
＆LT;帆布ID =myCanvas的风格=宽度：100％;身高：100％;＆GT;＆LT; /帆布＆GT;
＆LT; /身体GT;
我已经想通了如何让每设备（DPI），并用简单的数学我们可以得到英寸的像素密度，我们有多少像素具有一个CM
VAR mmInInch = 25.399999999972568;
功能getPixelsPerMillimeter（DPI）{
返回DPI / mmInInch;
}
和我的js文件的其余部分也很简单
VAR heightInPixels;
VAR heightDensity;
获取高密度每英寸的像素
函数getDeviceResolution（）{
heightDensity = window.MyConnectorClass.getYdpi（）;
heightInPixels = window.outerHeight;
的console.log（Y密度=+ heightDensity）;
的console.log（Y像素=+ heightInPixels）;
返回heightDensity;
}
画一条水平线在给定的帆布和y坐标
函数drawOnCanvas（ctx2d，Y）{
的console.log（借鉴：+ Y）
ctx2d.moveTo（0，y）基
ctx2d.lineTo（20，y）基
ctx2d.stroke（）;
}
我的主回路，其中在每一个PPM它画一条水平线。
函数drawRuler（）{
的console.log（追加标尺）
变种YDpi = getDeviceResolution（）;
VAR PPM = getPixelsPerMillimeter（YDpi）;
变种C =的document.getElementById（myCanvas）;
变种CTX = c.getContext（2D）;
ctx.lineWidth = 1;
对于（VAR I = 0; I＆LT; 90;我++）{
VAR topPos =（5+我* PPM）;
的console.log（topPos+ topPos）;
drawOnCanvas（CTX，topPos）;
};
}
但不是得到预期的统治者，你可以下面的图片就是我得到的线条非常间隔看，远离1mm的我的预期。为什么？也行它绘制具有不同的尺寸，并且它们definetelly不1px的宽
下面是logcat中显示该计算是正确的，我在一个星系S2具有800像素高度测试此，与93毫米屏幕高度，所以每次8.6个像素我有一毫米。
09-22 \\ N：16.530：D /测试（12353）：PPM：8.602150744349842
09-22 \\ N：16.530：D /测试（12353）：mmSize：93.0
09-22 \\ N：16.530：D /测试（12353）：POS0：5.0px
09-22 \\ N：16.530：D /测试（12353）：POS1：13.602150744349842px
09-22 \\ N：16.530：D /测试（12353）：POS2：22.204301488699684px
09-22 \\ N：16.530：D /测试（12353）：POS3：30.806452233049527px
09-22 \\ N：16.530：D /测试（12353）：POS4：39.40860297739937px
09-22 \\ N：16.530：D /测试（12353）：POS5：48.01075372174921px
09-22 \\ N：16.530：D /测试（12353）：POS6：56.61290446609905px
09-22 \\ N：16.535：D /测试（12353）：POS7：65.2150552104489px
09-22 \\ N：16.535：D /测试（12353）：Pos8：73.81720595479874px
09-22 \\ N：16.535：D /测试（12353）：Pos9：82.41935669914858px
09-22 \\ N：16.535：D /测试（12353）：Pos10：91.02150744349842px
09-22 \\ N：16.535：D /测试（12353）：POS11：99.62365818784826px
09-22 \\ N：16.535：D /测试（12353）：POS12：108.2258089321981px
09-22 \\ N：16.535：D /测试（12353）：Pos13：116.82795967654795px
09-22 \\ N：16.535：D /测试（12353）：Pos14：125.43011042089779px
09-22 \\ N：16.535：D /测试（12353）：Pos15：134.03226116524763px
09-22 \\ N：16.540：D /测试（12353）：Pos16：142.63441190959747px
09-22 \\ N：16.540：D /测试（12353）：Pos17：151.23656265394732px
09-22 \\ N：16.540：D /测试（12353）：Pos18：159.83871339829716px
09-22 \\ N：16.540：D /测试（12353）：Pos19：168.440864142647px
09-22 \\ N：16.540：D /测试（12353）：Pos20：177.04301488699684px
09-22 \\ N：16.540：D /测试（12353）：Pos21：185.64516563134669px
09-22 \\ N：16.540：D /测试（12353）：Pos22：194.24731637569653px
09-22 \\ N：16.540：D /测试（12353）：Pos23：202.84946712004637px
09-22 \\ N：16.540：D /测试（12353）：Pos24：211.4516178643962px
09-22 \\ N：16.540：D /测试（12353）：Pos25：220.05376860874605px
09-22 \\ N：16.540：D /测试（12353）：Pos26：228.6559193530959px
09-22 \\ N：16.540：D /测试（12353）：Pos27：237.25807009744574px
09-22 \\ N：16.540：D /测试（12353）：Pos28：245.86022084179558px
09-22 \\ N：16.540：D /测试（12353）：Pos29：254.46237158614542px
09-22 \\ N：16.540：D /测试（12353）：Pos30：263.06452233049527px
09-22 \\ N：16.540：D /测试（12353）：POS31：271.6666730748451px
09-22 \\ N：16.540：D /测试（12353）：POS32：280.26882381919495px
09-22 \\ N：16.540：D /测试（12353）：Pos33：288.8709745635448px
09-22 \\ N：16.540：D /测试（12353）：Pos34：297.47312530789463px
09-22 \\ N：16.540：D /测试（12353）：Pos35：306.0752760522445px
09-22 \\ N：16.540：D /测试（12353）：Pos36：314.6774267965943px
09-22 \\ N：16.540：D /测试（12353）：Pos37：323.27957754094416px
09-22 \\ N：16.540：D /测试（12353）：Pos38：331.881728285294px
09-22 \\ N：16.540：D /测试（12353）：Pos39：340.48387902964384px
09-22 \\ N：16.540：D /测试（12353）：Pos40：349.0860297739937px
09-22 \\ N：16.540：D /测试（12353）：Pos41：357.68818051834353px
09-22 \\ N：16.540：D /测试（12353）：Pos42：366.29033126269337px
09-22 \\ N：16.540：D /测试（12353）：Pos43：374.8924820070432px
09-22 \\ N：16.540：D /测试（12353）：Pos44：383.49463275139306px
09-22 \\ N：16.540：D /测试（12353）：Pos45：392.0967834957429px
09-22 \\ N：16.545：D /测试（12353）：Pos46：400.69893424009274px
09-22 \\ N：16.545：D /测试（12353）：Pos47：409.3010849844426px
09-22 \\ N：16.545：D /测试（12353）：Pos48：417.9032357287924px
09-22 \\ N：16.545：D /测试（12353）：Pos49：426.50538647314227px
09-22 \\ N：16.545：D /测试（12353）：Pos50：435.1075372174921px
09-22 \\ N：16.545：D /测试（12353）：Pos51：443.70968796184195px
09-22 \\ N：16.545：D /测试（12353）：Pos52：452.3118387061918px
09-22 \\ N：16.545：D /测试（12353）：Pos53：460.91398945054164px
09-22 \\ N：16.545：D /测试（12353）：Pos54：469.5161401948915px
09-22 \\ N：16.545：D /测试（12353）：Pos55：478.1182909392413px
09-22 \\ N：16.545：D /测试（12353）：Pos56：486.72044168359116px
09-22 \\ N：16.545：D /测试（12353）：Pos57：495.322592427941px
09-22 \\ N：16.545：D /测试（12353）：POS58：503.92474317229085px
09-22 \\ N：16.545：D /测试（12353）：Pos59：512.5268939166407px
09-22 \\ N：16.545：D /测试（12353）：Pos60：521.1290446609905px
09-22 \\ N：16.545：D /测试（12353）：Pos61：529.7311954053404px
09-22 \\ N：16.545：D /测试（12353）：Pos62：538.3333461496902px
09-22 \\ N：16.545：D /测试（12353）：Pos63：546.93549689404px
09-22 \\ N：16.545：D /测试（12353）：Pos64：555.5376476383899px
09-22 \\ N：16.545：D /测试（12353）：Pos65：564.1397983827397px
09-22 \\ N：16.545：D /测试（12353）：Pos66：572.7419491270896px
09-22 \\ N：16.545：D /测试（12353）：Pos67：581.3440998714394px
09-22 \\ N：16.545：D /测试（12353）：Pos68：589.9462506157893px
09-22 \\ N：16.545：D /测试（12353）：Pos69：598.5484013601391px
09-22 \\ N：16.545：D /测试（12353）：Pos70：607.150552104489px
09-22 \\ N：16.545：D /测试（12353）：Pos71：615.7527028488388px
09-22 \\ N：16.545：D /测试（12353）：Pos72：624.3548535931886px
09-22 \\ N：16.545：D /测试（12353）：Pos73：632.9570043375385px
09-22 \\ N：16.545：D /测试（12353）：Pos74：641.5591550818883px
09-22 \\ N：16.545：D /测试（12353）：Pos75：650.1613058262382px
09-22 \\ N：16.545：D /测试（12353）：Pos76：658.763456570588px
09-22 \\ N：16.545：D /测试（12353）：Pos77：667.3656073149378px
09-22 \\ N：16.545：D /测试（12353）：Pos78：675.9677580592877px
09-22 \\ N：16.545：D /测试（12353）：Pos79：684.5699088036375px
09-22 \\ N：16.545：D /测试（12353）：Pos80：693.1720595479874px
09-22 \\ N：16.545：D /测试（12353）：Pos81：701.7742102923372px
09-22 \\ N：16.545：D /测试（12353）：Pos82：710.3763610366871px
09-22 \\ N：16.550：D /测试（12353）：Pos83：718.9785117810369px
09-22 \\ N：16.550：D /测试（12353）：Pos84：727.5806625253867px
09-22 \\ N：16.550：D /测试（12353）：Pos85：736.1828132697366px
09-22 \\ N：16.550：D /测试（12353）：Pos86：744.7849640140864px
09-22 \\ N：16.550：D /测试（12353）：Pos87：753.3871147584363px
09-22 \\ N：16.550：D /测试（12353）：Pos88：761.9892655027861px
09-22 \\ N：16.550：D /测试（12353）：Pos89：770.591416247136px
09-22 \\ N：16.550：D /测试（12353）：Pos90：779.1935669914858px
09-22 \\ N：16.550：D /测试（12353）：Pos91：787.7957177358356px
09-22 \\ N：16.550：D /测试（12353）：Pos92：796.3978684801855px
解决方案
夫妻问题回事。
看看 http://diveintohtml5.info/canvas.html - 它提供了如何为了避免模糊线（开始.5像素线），并谈到了画布大小（不通过CSS做）。
作为一个例子看看这里：
http://jsfiddle.net/QdBd7/2/
的变化：
这修正了奇数行宽：
drawOnCanvas（Math.floor（topPos）+ 5）
补充丢失开始的路径：
ctx.beginPath（）;
更改设置画布大小上载：
函数resizeCanvas（）{
c.width = document.body.clientWidth - 5，// 5是从的jsfiddle帧
c.height = document.body.clientHeight - 5;
}
即使有这些变化，你仍然看到的细微变化，我wan't指向这： HTTP ：//en.wikipedia.org/wiki/Floating_point#Accuracy_problems
不过，我没有任何的解决方案（因为PPM可能会对像75.812315一些奇怪的y值结束了 - 这将是0.3像素关闭...），你吸引更多的，你可以调整为莫名其妙的变化但它作为浮点错误开始进来会变得更加棘手。
希望得到您开始。
I'm starting with PhoneGap, and I'm trying a simple application, a Ruler. I'm a begginer in JavaScript, most of my mobile work was in native Android code, but I'm cracking my head on this and I can't figure out what's wrong.
Due to different sizes of screens my idea is to calculate how many pixels I have in one millimeter(pixelsInMm) get the height of the screen and using a HTML5 canvas draw a line every N pixels.
The body of my HTML is simple enough, a canvas filling the whole screen
<body onload="init();" id="stage" class="theme">
<canvas id="myCanvas" style="width: 100%;height: 100%;"></canvas>
</body>
I've already figured out how to get the density in pixels per inch of the device(dpi) and using simple math we can get how many pixels we have in one cm
var mmInInch = 25.399999999972568;
function getPixelsPerMillimeter(dpi){
return dpi/mmInInch;
}
And the rest of my js file is also straightforward
var heightInPixels;
var heightDensity;
Get the height density in pixels per inch
function getDeviceResolution(){
heightDensity = window.MyConnectorClass.getYdpi();
heightInPixels = window.outerHeight;
console.log("Y density = " + heightDensity);
console.log("Y pixels = " + heightInPixels);
return heightDensity;
}
Draw a horizontal line in the given canvas and y coordinate
function drawOnCanvas(ctx2d,y){
console.log("Drawing on :" + y)
ctx2d.moveTo(0,y);
ctx2d.lineTo(20,y);
ctx2d.stroke();
}
My main loop, where at every ppm it draw one horizontal line.
function drawRuler(){
console.log("append Ruler")
var YDpi = getDeviceResolution();
var ppm = getPixelsPerMillimeter(YDpi);
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.lineWidth = 1;
for(var i=0; i<90; i++){
var topPos = (5+ i*ppm);
console.log("topPos" + topPos);
drawOnCanvas(ctx,topPos);
};
}
But instead of getting the expected ruler, as you can see in the image below what I'm getting are lines very spaced, far from the 1mm I expected. Why? Also the lines it draws have different sizes, and they are definetelly not 1px wide.
Here is the logcat showing that the calculations are right, I'm testing this in a galaxy S2 with 800px Height, with 93mm screen height, So every 8.6 pixels I have one mm.
09-22 \n:16.530: D/test(12353): ppm:8.602150744349842
09-22 \n:16.530: D/test(12353): mmSize:93.0
09-22 \n:16.530: D/test(12353): Pos0: 5.0px
09-22 \n:16.530: D/test(12353): Pos1: 13.602150744349842px
09-22 \n:16.530: D/test(12353): Pos2: 22.204301488699684px
09-22 \n:16.530: D/test(12353): Pos3: 30.806452233049527px
09-22 \n:16.530: D/test(12353): Pos4: 39.40860297739937px
09-22 \n:16.530: D/test(12353): Pos5: 48.01075372174921px
09-22 \n:16.530: D/test(12353): Pos6: 56.61290446609905px
09-22 \n:16.535: D/test(12353): Pos7: 65.2150552104489px
09-22 \n:16.535: D/test(12353): Pos8: 73.81720595479874px
09-22 \n:16.535: D/test(12353): Pos9: 82.41935669914858px
09-22 \n:16.535: D/test(12353): Pos10: 91.02150744349842px
09-22 \n:16.535: D/test(12353): Pos11: 99.62365818784826px
09-22 \n:16.535: D/test(12353): Pos12: 108.2258089321981px
09-22 \n:16.535: D/test(12353): Pos13: 116.82795967654795px
09-22 \n:16.535: D/test(12353): Pos14: 125.43011042089779px
09-22 \n:16.535: D/test(12353): Pos15: 134.03226116524763px
09-22 \n:16.540: D/test(12353): Pos16: 142.63441190959747px
09-22 \n:16.540: D/test(12353): Pos17: 151.23656265394732px
09-22 \n:16.540: D/test(12353): Pos18: 159.83871339829716px
09-22 \n:16.540: D/test(12353): Pos19: 168.440864142647px
09-22 \n:16.540: D/test(12353): Pos20: 177.04301488699684px
09-22 \n:16.540: D/test(12353): Pos21: 185.64516563134669px
09-22 \n:16.540: D/test(12353): Pos22: 194.24731637569653px
09-22 \n:16.540: D/test(12353): Pos23: 202.84946712004637px
09-22 \n:16.540: D/test(12353): Pos24: 211.4516178643962px
09-22 \n:16.540: D/test(12353): Pos25: 220.05376860874605px
09-22 \n:16.540: D/test(12353): Pos26: 228.6559193530959px
09-22 \n:16.540: D/test(12353): Pos27: 237.25807009744574px
09-22 \n:16.540: D/test(12353): Pos28: 245.86022084179558px
09-22 \n:16.540: D/test(12353): Pos29: 254.46237158614542px
09-22 \n:16.540: D/test(12353): Pos30: 263.06452233049527px
09-22 \n:16.540: D/test(12353): Pos31: 271.6666730748451px
09-22 \n:16.540: D/test(12353): Pos32: 280.26882381919495px
09-22 \n:16.540: D/test(12353): Pos33: 288.8709745635448px
09-22 \n:16.540: D/test(12353): Pos34: 297.47312530789463px
09-22 \n:16.540: D/test(12353): Pos35: 306.0752760522445px
09-22 \n:16.540: D/test(12353): Pos36: 314.6774267965943px
09-22 \n:16.540: D/test(12353): Pos37: 323.27957754094416px
09-22 \n:16.540: D/test(12353): Pos38: 331.881728285294px
09-22 \n:16.540: D/test(12353): Pos39: 340.48387902964384px
09-22 \n:16.540: D/test(12353): Pos40: 349.0860297739937px
09-22 \n:16.540: D/test(12353): Pos41: 357.68818051834353px
09-22 \n:16.540: D/test(12353): Pos42: 366.29033126269337px
09-22 \n:16.540: D/test(12353): Pos43: 374.8924820070432px
09-22 \n:16.540: D/test(12353): Pos44: 383.49463275139306px
09-22 \n:16.540: D/test(12353): Pos45: 392.0967834957429px
09-22 \n:16.545: D/test(12353): Pos46: 400.69893424009274px
09-22 \n:16.545: D/test(12353): Pos47: 409.3010849844426px
09-22 \n:16.545: D/test(12353): Pos48: 417.9032357287924px
09-22 \n:16.545: D/test(12353): Pos49: 426.50538647314227px
09-22 \n:16.545: D/test(12353): Pos50: 435.1075372174921px
09-22 \n:16.545: D/test(12353): Pos51: 443.70968796184195px
09-22 \n:16.545: D/test(12353): Pos52: 452.3118387061918px
09-22 \n:16.545: D/test(12353): Pos53: 460.91398945054164px
09-22 \n:16.545: D/test(12353): Pos54: 469.5161401948915px
09-22 \n:16.545: D/test(12353): Pos55: 478.1182909392413px
09-22 \n:16.545: D/test(12353): Pos56: 486.72044168359116px
09-22 \n:16.545: D/test(12353): Pos57: 495.322592427941px
09-22 \n:16.545: D/test(12353): Pos58: 503.92474317229085px
09-22 \n:16.545: D/test(12353): Pos59: 512.5268939166407px
09-22 \n:16.545: D/test(12353): Pos60: 521.1290446609905px
09-22 \n:16.545: D/test(12353): Pos61: 529.7311954053404px
09-22 \n:16.545: D/test(12353): Pos62: 538.3333461496902px
09-22 \n:16.545: D/test(12353): Pos63: 546.93549689404px
09-22 \n:16.545: D/test(12353): Pos64: 555.5376476383899px
09-22 \n:16.545: D/test(12353): Pos65: 564.1397983827397px
09-22 \n:16.545: D/test(12353): Pos66: 572.7419491270896px
09-22 \n:16.545: D/test(12353): Pos67: 581.3440998714394px
09-22 \n:16.545: D/test(12353): Pos68: 589.9462506157893px
09-22 \n:16.545: D/test(12353): Pos69: 598.5484013601391px
09-22 \n:16.545: D/test(12353): Pos70: 607.150552104489px
09-22 \n:16.545: D/test(12353): Pos71: 615.7527028488388px
09-22 \n:16.545: D/test(12353): Pos72: 624.3548535931886px
09-22 \n:16.545: D/test(12353): Pos73: 632.9570043375385px
09-22 \n:16.545: D/test(12353): Pos74: 641.5591550818883px
09-22 \n:16.545: D/test(12353): Pos75: 650.1613058262382px
09-22 \n:16.545: D/test(12353): Pos76: 658.763456570588px
09-22 \n:16.545: D/test(12353): Pos77: 667.3656073149378px
09-22 \n:16.545: D/test(12353): Pos78: 675.9677580592877px
09-22 \n:16.545: D/test(12353): Pos79: 684.5699088036375px
09-22 \n:16.545: D/test(12353): Pos80: 693.1720595479874px
09-22 \n:16.545: D/test(12353): Pos81: 701.7742102923372px
09-22 \n:16.545: D/test(12353): Pos82: 710.3763610366871px
09-22 \n:16.550: D/test(12353): Pos83: 718.9785117810369px
09-22 \n:16.550: D/test(12353): Pos84: 727.5806625253867px
09-22 \n:16.550: D/test(12353): Pos85: 736.1828132697366px
09-22 \n:16.550: D/test(12353): Pos86: 744.7849640140864px
09-22 \n:16.550: D/test(12353): Pos87: 753.3871147584363px
09-22 \n:16.550: D/test(12353): Pos88: 761.9892655027861px
09-22 \n:16.550: D/test(12353): Pos89: 770.591416247136px
09-22 \n:16.550: D/test(12353): Pos90: 779.1935669914858px
09-22 \n:16.550: D/test(12353): Pos91: 787.7957177358356px
09-22 \n:16.550: D/test(12353): Pos92: 796.3978684801855px
解决方案
Couple issues going on.
Take a look at http://diveintohtml5.info/canvas.html - it goes over how to avoid blurry lines (start lines at .5 pixels) and talks about the canvas size (don't do it via css).
As an example take a look here: http://jsfiddle.net/QdBd7/2/
Changes:
This fixes the odd line width:
drawOnCanvas(Math.floor(topPos)+.5)
Added missing begin path:
ctx.beginPath();
Change to set canvas size on load:
function resizeCanvas(){
c.width = document.body.clientWidth - 5, // 5 is from jsfiddle frame
c.height = document.body.clientHeight - 5;
}
Even with these changes you still notice slight variations, I wan't to point this to: http://en.wikipedia.org/wiki/Floating_point#Accuracy_problems
But I don't have any solutions (since the ppm might end up at some odd y value like 75.812315 -- it'll be .3 pixels off...) as you draw more you could adjust for the variations somehow but it gets even more tricky as the floating point errors start to come in.
Hope that gets you started.
这篇关于如何画使用JavaScript一个简单的尺子？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
