canvas html 5 et affichage

Ce script ne s'affiche pas correctement, y at-il un problème?canvas html 5 et affichage

Il manque des lignes dans l'affichage du navigateur. J'utilise des boucles pour créer un système de coordonnées rectangulaires à deux dimensions et j'aimerais savoir si le code a quelque chose qui ne va pas.

<html> 
<head> 

<script type="text/javascript"> 

function start() { 

    var winwidth = window.innerWidth; 
    var winheight = window.innerHeight; 
    var canvas=document.getElementById("myCanvas"); 
    var ctx=canvas.getContext("2d"); 
    // Sets size of canvas and interior of canvas to window 
    ctx.canvas.width = 1200; 
    ctx.canvas.height = 600; 
    var cname = "ctx"; 

    // ------------------------------------------- 
    ctx.beginPath(); 
    ctx.lineWidth = 1; 
    ctx.strokeStyle = '#ff0000'; 
    // Origin Y-Axis 
    ctx.moveTo(0,300); 
    ctx.lineTo(1200,300); 
    // Origin X-Axis 
    ctx.moveTo(600,0); 
    ctx.lineTo(600,600); 
    ctx.stroke(); 
    // ------------------------------------------- 

    // ------------------------------------------- 
    ctx.beginPath(); 
    ctx.lineWidth = 0.5; 
    ctx.strokeStyle = '#0000ff'; 
    majoraxes = new Array(); 
    j=0; 
    // Horizontal Major Axes 
    for (hundreth=0; hundreth<7; hundreth++) { 
     // Skips past 300 
     if (hundreth==3) { 
      hundreth=4; 
      } 
     for (c=0; c<2; c++) { 
      if (c==0) { 
       majoraxes[j] = cname+".moveTo(0,"+hundreth+"00);"; 
       j = j+1; 
       } 
      if (c==1) { 
       majoraxes[j] = cname+".lineTo(1200,"+hundreth+"00);"; 
       j = j+1; 
       } 
      } 
     } 
    // Vertical Major Axes 
    for (hundreth=0; hundreth<13; hundreth++) { 
     // Skips past 600 
     if (hundreth==6) { 
      hundreth=7; 
      } 
     for (c=0; c<2; c++) { 
      if (c==0) { 
       majoraxes[j] = cname+".moveTo("+hundreth+"00,0);"; 
       j = j+1; 
       } 
      if (c==1) { 
       majoraxes[j] = cname+".lineTo("+hundreth+"00,600);"; 
       j = j+1; 
       } 
      } 
     } 
    for (t=0; t < majoraxes.length; t++) { 
     eval(majoraxes[t]); 
     } 
    ctx.stroke(); 
    // --------------------------------------- 


    // --------------------------------------- 
    ctx.beginPath(); 
    ctx.lineWidth = .2; 
    ctx.strokeStyle = '#0000ff'; 
    minoraxes = new Array(); 
    j=0; 
    // Horizontal Minor Axes 
    for (hundreth=0; hundreth<7; hundreth++) { 
     for (tenth=1; tenth<10; tenth++) { 
      for (c=0; c<2; c++) { 
       if (c==0) { 
        minoraxes[j] = cname+".moveTo(0,"+hundreth+""+tenth+"0);"; 
        j = j+1; 
        } 
       if (c==1) { 
        minoraxes[j] = cname+".lineTo(1200,"+hundreth+""+tenth+"0);"; 
        j = j+1; 
        } 
       } 
      } 
     } 
    // Vertical Minor Axes 
    for (hundreth=0; hundreth<13; hundreth++) { 
     for (tenth=1; tenth<10; tenth++) { 
      for (c=0; c<2; c++) { 
       if (c==0) { 
        minoraxes[j] = cname+".moveTo("+hundreth+""+tenth+"0,0);"; 
        j = j+1; 
        } 
       if (c==1) { 
        minoraxes[j] = cname+".lineTo("+hundreth+""+tenth+"0,600);"; 
        j = j+1; 
        } 
       } 
      } 
     } 
    for (t=0; t < minoraxes.length; t++) { 
     eval(minoraxes[t]); 
     } 
    ctx.stroke(); 
    // -------------------------------------- 

    } 

</script> 

<style type="text/css"> 
html, body { 
    width: 100%; 
    height: 100%; 
    margin: 0px; 
} 
#myCanvas { 
    width:1200; 
    height:600; 
    image-rendering:optimize-contrast; 
} 
</style> 
</head> 
<body onload="start()"> 

<canvas id="myCanvas" style="border:1px solid #c3c3c3;"> 
Your browser does not support the canvas element. 
</canvas> 


</body> 
</html>

Source

2012-07-10 user1516251

On dirait que vous ne dessiniez pas assez de lignes. Vous pouvez les modifier dans votre version pour le faire fonctionner.

// Horizontal Minor Axes 
    for (hundreth=0; hundreth<7; hundreth++) { 
     for (tenth=1; tenth<12; tenth++) { // changed to 12 

    // Vertical Minor Axes 
    for (hundreth=0; hundreth<13; hundreth++) { 
     for (tenth=1; tenth<12; tenth++) { // changed to 12

Pour être honnête, bien que vous puissiez vraiment raccourcir le code beaucoup, vérifiez ceci. J'ai également ajouté dans la fonctionnalité pour rendre la grille de la taille que vous voulez.

Working Demo

Full screen demo

function start() { 
    var winwidth = window.innerWidth; 
    var winheight = window.innerHeight; 
    var canvas=document.getElementById("myCanvas"); 
    var ctx=canvas.getContext("2d"); 
    // Sets size of canvas and interior of canvas to window 
    var width = 1200, 
     height = 600; 

    canvas.width = width; 
    canvas.height = height; 

    var cname = "ctx"; 

    // ------------------------------------------- 
    ctx.beginPath(); 
    ctx.lineWidth = 1; 
    ctx.strokeStyle = '#ff0000'; 
    // Origin X-Axis 
    ctx.moveTo(0,height/2); 
    ctx.lineTo(width,height/2); 
    // Origin Y-Axis 
    ctx.moveTo(width/2,0); 
    ctx.lineTo(width/2,height); 
    ctx.stroke(); 
    // ------------------------------------------- 

    // ------------------------------------------- 
    ctx.beginPath(); 
    ctx.lineWidth = 0.5; 
    ctx.strokeStyle = '#0000ff'; 
    majoraxes = new Array(); 
    j=0; 

    for(var hundreth = 0; hundreth < height/100; hundreth++){ 
     if(hundreth !== (height/2)/100){ 
      ctx.moveTo(0,hundreth*100); 
      ctx.lineTo(width, hundreth*100); 
     } 
    } 

    // Vertical Major Axes 
    for (hundreth=0; hundreth < width/100; hundreth++) { 
     if(hundreth !== (width/2)/100){ 
      ctx.moveTo(hundreth*100, 0); 
      ctx.lineTo(hundreth*100,height); 
     } 
    } 

    ctx.stroke(); 
    // --------------------------------------- 

    // --------------------------------------- 
    ctx.beginPath(); 
    ctx.lineWidth = .2; 
    ctx.strokeStyle = '#0000ff'; 
    minoraxes = new Array(); 
    j=0; 

    for(var tenth= 0; tenth< height/10; tenth++){ 
     ctx.moveTo(0,tenth*10); 
     ctx.lineTo(width, tenth*10); 
    } 

    // Vertical Major Axes 
    for (tenth=0; tenth< width/10; tenth++) { 
     ctx.moveTo(tenth*10, 0); 
     ctx.lineTo(tenth*10,height); 
    } 

    ctx.stroke(); 
    // -------------------------------------- 
}

Source

2012-07-11 00:55:14 Loktar

merci, qui travaille – user1516251

@ user1516251 impressionnant, pourriez-vous le sélectionner comme la réponse choisie et/ou upvote il? – Loktar

canvas html 5 et affichage

Répondre

Questions connexes