如何用JavaScript绘制一个简单的标尺？ [英] How to draw a simple ruler with JavaScript?
本文介绍了如何用JavaScript绘制一个简单的标尺？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我从PhoneGap开始，我正在尝试一个简单的应用程序，一个统治者。我是JavaScript的乞丐，我的大部分移动工作是在原生的Android代码，但我开始我的头，我不能弄清楚出了什么问题。
由于屏幕大小不同，我的想法是计算一毫米（pixelInMm）中有多少像素获得屏幕的高度，并使用HTML5画布每N像素画一条线。
HTML的主体很简单，一个画布填满了整个屏幕
< body onload =init（）; id =stageclass =theme>
< canvas id =myCanvasstyle =width：100％; height：100％;>< / canvas>
< / body>
我已经知道如何获得每英寸设备的像素密度使用简单的数学，我们可以得到在一厘米有多少像素
var mmInInch = 25.399999999972568;
function getPixelsPerMillimeter（dpi）{
return dpi / mmInInch;
}
我的js文件的其余部分也很简单
var heightInPixels;
var heightDensity;
获取每英寸像素的高度密度
function getDeviceResolution（）{
heightDensity = window.MyConnectorClass.getYdpi（）;
heightInPixels = window.outerHeight;
console.log（Y density =+ heightDensity）;
console.log（Y pixels =+ heightInPixels）;
return heightDensity;
}
在给定的画布和y坐标中绘制水平线
function drawOnCanvas（ctx2d，y）{
console.log（Drawing on：+ y）
ctx2d.moveTo （0，y）。
ctx2d.lineTo（20，y）;
ctx2d.stroke（）;
}
我的主循环，其中每一个ppm绘制一条水平线。 p>
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）;
};
}
但不是得到预期的标尺，如下图所示我得到的是线间隔很远，远离我预期的1mm。为什么？
这里是logcat显示计算是正确的，我在测试这个在星系S2 800px高度，具有93mm的屏幕高度，因此每8.6像素我有一个mm。
09-22 \\\
：16.530：D /测试（12353）：ppm：8.602150744349842
09-22 \\\
：16.530：D / test（12353）：mmSize：93.0
09-22 \\\
：16.530： ：Pos0：5.0px
09-22 \\\
：16.530：D / test（12353）：Pos1：13.602150744349842px
09-22 \\\
：16.530：D / test（12353）：Pos2 ：22.204301488699684px
09-22 \\\
：16.530：D / test（12353）：Pos3：30.806452233049527px
09-22 \\\
：16.530：D / test（12353）：Pos4：39.40860297739937 px
09-22 \\\
：16.530：D / test（12353）：Pos5：48.01075372174921px
09-22 \\\
：16.530：D / test（12353）：Pos6：56.61290446609905px
09-22 \\\
：16.535：D / test（12353）：Pos7：65.2150552104489px
09-22 \\\
：16.535：D / test（12353）：Pos8：73.81720595479874px
09-22 \\\
：16.535：D / test（12353）：Pos9：82.41935669914858px
09-22 \\\
：16.535：D / test（12353）：Pos10：91.02150744349842px
09 -22 \\\
：16.535：D / test（12353）：Pos11：99.62365818784826px
09-22 \\\
：16.535：D / test（12353）：Pos12：108.2258089321981px
09-22 \\\
：16.535：D / test（12353）：Pos13：116.82795967654795px
09-22 \\\
：16.535：D / test（12353）：Pos14：125.43011042089779px
09-22 \ n：16.535：D / test（12353）：Pos15：134.03226116524763px
09-22 \\\
：16.540：D / test（12353）：Pos16：142.63441190959747px
09-22 \\\
： 16.540：D / test（12353）：Pos17：151.23656265394732px
09-22 \\\
：16.540：D / test（12353）：Pos18：159.83871339829716px
09-22 \\\
：16.540： D / test（12353）：Pos19：168.440864142647px
09-22 \\\
：16.540：D / test（12353）：Pos20：177.04301488699684px
09-22 \\\
：16.540：D / test（12353）：Pos21：185.64516563134669px
09-22 \\\
：16.540：D / test（12353）：Pos22：194.24731637569653px
09-22 \\\
：16.540：D / test 12353）：Pos23：202.84946712004637px
09-22 \\\
：16.540：D / test（12353）：Pos24：211.4516178643962px
09-22 \\\
：16.540：D / test ：Pos25：220.05376860874605px
09-22 \\\
：16.540：D / test（12353）：Pos26：228.6559193530959px
09-22 \\\
：16.540：D / test（12353）：Pos27 ：237.25807009744574px
09-22 \\\
：16.540：D / test（12353）：Pos28：245.86022084179558px
09-22 \\\
：16.540：D / test（12353）：Pos29：254.46237158614542 px
09-22 \\\
：16.540：D / test（12353）：Pos30：263.06452233049527px
09-22 \\\
：16.540：D / test（12353）：Pos31：271.6666730748451px
09-22 \\\
：16.540：D / test（12353）：Pos32：280.26882381919495px
09-22 \\\
：16.540：D / test（12353）：Pos33：288.8709745635448px
09-22 \\\
：16.540：D / test（12353）：Pos34：297.47312530789463px
09-22 \\\
：16.540：D / test（12353）：Pos35：306.0752760522445px
09 -22 \\\
：16.540：D / test（12353）：Pos36：314.6774267965943px
09-22 \\\
：16.540：D / test（12353）：Pos37：323.27957754094416px
09-22 \\\
：16.540：D / test（12353）：Pos38：331.881728285294px
09-22 \\\
：16.540：D / test（12353）：Pos39：340.48387902964384px
09-22 \ n：16.540：D / test（12353）：Pos40：349.0860297739937px
09-22 \\\
：16.540：D / test（12353）：Pos41：357.68818051834353px
09-22 \\\
： 16.540：D / test（12353）：Pos42：366.29033126269337px
09-22 \\\
：16.540：D / test（12353）：Pos43：374.8924820070432px
09-22 \\\
：16.540： D / test（12353）：Pos44：383.49463275139306px
09-22 \\\
：16.540：D / test（12353）：Pos45：392.0967834957429px
09-22 \\\
：16.545：D / test（12353）：Pos46：400.69893424009274px
09-22 \\\
：16.545：D / test（12353）：Pos47：409.3010849844426px
09-22 \\\
：16.545：D / test 12353）：Pos48：417.9032357287924px
09-22 \\\
：16.545：D / test（12353）：Pos49：426.50538647314227px
09-22 \\\
：16.545：D / test ：Pos50：435.1075372174921px
09-22 \\\
：16.545：D / test（12353）：Pos51：443.70968796184195px
09-22 \\\
：16.545：D / test（12353）：Pos52 ：452.3118387061918px
09-22 \\\
：16.545：D / test（12353）：Pos53：460.91398945054164px
09-22 \\\
：16.545：D / test（12353）：Pos54：469.5161401948915 px
09-22 \\\
：16.545：D / test（12353）：Pos55：478.1182909392413px
09-22 \\\
：16.545：D / test（12353）：Pos56：486.72044168359116px
09-22 \\\
：16.545：D / test（12353）：Pos57：495.322592427941px
09-22 \\\
：16.545：D / test（12353）：Pos58：503.92474317229085px
09-22 \\\
：16.545：D / test（12353）：Pos59：512.5268939166407px
09-22 \\\
：16.545：D / test（12353）：Pos60：521.1290446609905px
09 -22 \\\
：16.545：D / test（12353）：Pos61：529.7311954053404px
09-22 \\\
：16.545：D / test（12353）：Pos62：538.3333461496902px
09-22 \\\
：16.545：D / test（12353）：Pos63：546.93549689404px
09-22 \\\
：16.545：D / test（12353）：Pos64：555.5376476383899px
09-22 \ n：16.545：D / test（12353）：Pos65：564.1397983827397px
09-22 \\\
：16.545：D / test（12353）：Pos66：572.7419491270896px
09-22 \\\
： 16.545：D / test（12353）：Pos67：581.3440998714394px
09-22 \\\
：16.545：D / test（12353）：Pos68：589.9462506157893px
09-22 \\\
：16.545： D / test（12353）：Pos69：598.5484013601391px
09-22 \\\
：16.545：D / test（12353）：Pos70：607.150552104489px
09-22 \\\
：16.545：D / test（12353）：Pos71：615.7527028488388px
09-22 \\\
：16.545：D / test（12353）：Pos72：624.3548535931886px
09-22 \\\
：16.545：D / test 12353）：Pos73：632.9570043375385px
09-22 \\\
：16.545：D / test（12353）：Pos74：641.5591550818883px
09-22 \\\
：16.545：D / test ：Pos75：650.1613058262382px
09-22 \\\
：16.545：D / test（12353）：Pos76：658.763456570588px
09-22 \\\
：16.545：D / test（12353）：Pos77 ：667.3656073149378px
09-22 \\\
：16.545：D / test（12353）：Pos78：675.9677580592877px
09-22 \\\
：16.545：D / test（12353）：Pos79：684.5699088036375 px
09-22 \\\
：16.545：D / test（12353）：Pos80：693.1720595479874px
09-22 \\\
：16.545：D / test（12353）：Pos81：701.7742102923372px
09-22 \\\
：16.545：D / test（12353）：Pos82：710.3763610366871px
09-22 \\\
：16.550：D / test（12353）：Pos83：718.9785117810369px
09-22 \\\
：16.550：D / test（12353）：Pos84：727.5806625253867px
09-22 \\\
：16.550：D / test（12353）：Pos85：736.1828132697366px
09 -22 \\\
：16.550：D / test（12353）：Pos86：744.7849640140864px
09-22 \\\
：16.550：D / test（12353）：Pos87：753.3871147584363px
09-22 \\\
：16.550：D / test（12353）：Pos88：761.9892655027861px
09-22 \\\
：16.550：D / test（12353）：Pos89：770.591416247136px
09-22 \ n：16.550：D / test（12353）：Pos90：779.1935669914858px
09-22 \\\
：16.550：D / test（12353）：Pos91：787.7957177358356px
09-22 \\ 16.550：D / test（12353）：Pos92：796.3978684801855px
解决方案
p>几个问题正在进行。
查看 http ：//diveintohtml5.info/canvas.html - 它讨论了如何避免模糊线条（开始线在.5像素），并谈到画布大小（不要通过CSS）。
下面是一个例子：
http： //jsfiddle.net/QdBd7/2/
更改：
这修复了line width：
drawOnCanvas（Math.floor（topPos）+。5）
添加了缺少的开始路径：
ctx.beginPath （）;
更改为在加载时设置画布大小：
function resizeCanvas（）{
c.width = document.body.clientWidth - 5，// 5来自jsfiddle frame
c.height = document.body .clientHeight - 5;
}
即使这些更改，您仍然注意到轻微的变化，我不想指向此处： http://en.wikipedia.org/wiki/Floating_point#Accuracy_problems
但我没有任何解决方案（因为ppm可能会在某些奇怪的y值像75.812315 - 它将是.3像素关闭...）因为你绘制的更多，你可以调整的变化在某种程度上，但它变得更棘手，因为浮点错误开始进来。
希望让你开始。 p>
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屋！
查看全文
