Question

我已经为视力测试创建了小脚本。我在https://jsfiddle.net/jaka_87/bpadyanh/

上发布了部分内容

背后的理论：画布充满了图案。在每个图案中都绘制了3条线。两个黑色的，中间是白色的。白线有2 *与一条黑线。当这条线的宽度太小以至于我们的眼睛无法区分这三条线时，我们只看到灰色的背景（即使你的线仍然存在）。

我在几台计算机上测试过它。在大多数情况下它运作良好（你看到一些较旧的一些奇怪的图案 - 一列垂直的白线然后2-3黑暗的列然后白色....）我假设它已经做了显示器/显卡或类似的东西。我在一些移动设备上测试了它。它在我的Nexus 7和Moto G上工作得很好，但不能在我的Transformer Prime垫上（如前所述的奇怪图案 - 我再次责怪平板电脑）。

在我的Ipad和我的朋友Iphone上看起来绝对可怕（迄今为止所有测试中的最差）。我期待那里的效果最好，因为他们以非常好的屏幕闻名，但结果太可怕了。当线条足够宽时它可以正常但是当它们变得更窄时它们被合并到一条黑色或白色线条中 - 没有单独显示。

有没有办法解决这个问题，以便在iOS上运行？

var povecava2 = "0.04226744186046511";
var izmerjeno =1;
var razmak =3.5;
var contrast = 1;

var canvas = document.getElementById('canvas1');
var ctx = canvas.getContext('2d');

// širina canvasa
 ctx.canvas.width  = window.innerWidth-23;
 ctx.canvas.height = window.innerHeight-70;

 var sirinaopto=Math.round(200*izmerjeno*povecava2*razmak);
if(sirinaopto & 1){sirinaopto=sirinaopto;}else{   sirinaopto=sirinaopto+1;}  // če je širina optotipa soda ali liha

var enota4 =((0.19892970392*130*izmerjeno*povecava2)/4).toFixed(2); // 1 kotna minuta

var center= Math.round((ctx.canvas.width-(sirinaopto))/2);

// kolkrat gre v višino
var kolkratgre = Math.floor(ctx.canvas.height/(sirinaopto));
var visina2= sirinaopto*kolkratgre;

// kolkrat gre v širino
var kolkratgrehor = Math.ceil(ctx.canvas.width/sirinaopto); if(kolkratgrehor % 2 == 0) {   var  kolkratgrehor=kolkratgrehor-1; }
var zacetek = (ctx.canvas.width-(kolkratgrehor*sirinaopto))/2;



ctx.rect(0,0,ctx.canvas.width,ctx.canvas.height);
ctx.fillStyle="rgb(140,140,140)";
ctx.fill();

// 90 stopinj
var canvasPattern0 = document.createElement("canvas");
canvasPattern0.width = sirinaopto;
canvasPattern0.height = sirinaopto;
var contextPattern0 = canvasPattern0.getContext("2d");

contextPattern0.mozImageSmoothingEnabled = false;
contextPattern0.imageSmoothingEnabled = false;

contextPattern0.translate((canvasPattern0.width/2)-(enota4*2),(canvasPattern0.width/2)-(10*enota4));
contextPattern0.beginPath();
contextPattern0.globalAlpha = contrast;
contextPattern0.moveTo(enota4/2,0); 
contextPattern0.lineTo(enota4/2,20*enota4);
contextPattern0.lineWidth=enota4;
contextPattern0.strokeStyle = 'black';
contextPattern0.stroke();
contextPattern0.closePath();    

contextPattern0.beginPath();
contextPattern0.globalAlpha = contrast;
contextPattern0.moveTo(enota4*2,0); 
contextPattern0.lineTo(enota4*2,20*enota4);
contextPattern0.lineWidth=enota4*2;
contextPattern0.strokeStyle = 'white';
contextPattern0.stroke();
contextPattern0.closePath();

contextPattern0.beginPath();
contextPattern0.globalAlpha = contrast;
contextPattern0.moveTo(enota4*3.5,0); 
contextPattern0.lineTo(enota4*3.5,20*enota4);
contextPattern0.lineWidth=enota4;
contextPattern0.strokeStyle = 'black';
contextPattern0.stroke();
contextPattern0.closePath();

// 0 stopinj
var canvasPattern1 = document.createElement("canvas");
canvasPattern1.width = sirinaopto;canvasPattern1.height = sirinaopto;
var contextPattern1 = canvasPattern1.getContext("2d");
contextPattern1.translate(sirinaopto/2, sirinaopto/2);  
contextPattern1.rotate(90*Math.PI/180);
contextPattern1.drawImage(canvasPattern0, sirinaopto*(-0.5), sirinaopto*(-0.5));
contextPattern1.save();




var imagesLoaded = [];
imagesLoaded.push(canvasPattern0);
imagesLoaded.push(canvasPattern1);

var randomPattern = function(imgWidth, imgHeight, areaWidth, areaHeight) {
// either set a defined width/height for our images, or use the first one's
          imgWidth = sirinaopto;
          imgHeight = sirinaopto;
          // restrict the randmoness size by using an areaWidth/Height
          areaWidth = ctx.canvas.width;
          areaHeight = visina2;

          // create a buffer canvas
          var patternCanvas = canvas.cloneNode(true);
          var patternCtx = patternCanvas.getContext('2d');

          patternCanvas.width = areaWidth;
          patternCanvas.height = areaHeight;

        // var xloops = Math.ceil(areaWidth / imgWidth); 
         var xloops = Math.ceil(areaWidth / imgWidth);  if(xloops % 2 == 0) {   var  xloops=xloops-1; }
          var yloops = Math.ceil(areaHeight / imgHeight);
        //alert(xloops);


          for (var xpos = 0; xpos < xloops; xpos++) {
            for (var ypos = 0; ypos < yloops; ypos++) {
              var img = imagesLoaded[Math.floor(Math.random() * imagesLoaded.length)];
              patternCtx.drawImage(img, (xpos * imgWidth)+zacetek, (ypos * imgHeight), imgWidth, imgHeight);
            }
          }

          // create a pattern from this randomly created image
          return patternCtx.createPattern(patternCanvas, 'repeat');
        }
        var draw = function() {
          //create the random pattern (should be moved out of the draw)
          var patt = randomPattern(sirinaopto,sirinaopto);
          ctx.fillStyle = patt;
          ctx.fillRect(0,0,ctx.canvas.width, visina2)
        };

        draw();

Ipad没有正确显示画布线

0 个答案: