• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

rysowanie pionowe na osi Y

0 głosów
72 wizyt
pytanie zadane 7 stycznia w JavaScript, jQuery, AJAX przez sekut1626 Obywatel (1,220 p.)

Witam, mam problem z wyrysowaniem cyfr na osi Y w canvasie

 

mój kod HTML:


<html lang='pl'> 
<head>
	<meta charset='utf-8'>
	<meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1'>

	<link rel='stylesheet' href='css/style.css'>
</head>
<body>
<div class='container'>
	<section id="main">
                <canvas style="border:1px solid black;" id="obrazek" width="700" height="450"></canvas>
                <input type="text" name="function" id="function" value="" />
                <input type="submit" name="button" id="button" value="Rysuj" />
                <button id="clear" onclick="javascript:location.reload()">czyść</button><br />
                
                </select><br/>
                <script type="text/javascript" src="jquery-1.4.2.js"></script>
                <script type="text/javascript" src="main.js"></script>
       
</div>
</body>
</html>

 

oraz kod js rysujący obrazek:

var canvas = document.getElementById('obrazek');
var ctx = canvas.getContext('2d');
var w = canvas.width;
var h = canvas.height;
var range = 25;
var bl = 1;
var rangex = w/range;
var rangey = h/range;
var color = "#00FF00";

function grid()
{
        
        for(i=1;i<=Math.floor(rangex*2);i++)
        {
                ctx.lineWidth = 1/6;
                ctx.beginPath();
                ctx.moveTo((range/2)*i,0);
                ctx.lineTo((range/2)*i,h);
                ctx.closePath();
                ctx.stroke();
        }
        for(i=1;i<=Math.floor(rangey*2);i++)
        {
                ctx.lineWidth = 1/6;
                ctx.beginPath();
                ctx.moveTo(0,(range/2)*i);
                ctx.lineTo(w,(range/2)*i);
                ctx.closePath();
                ctx.stroke();
        }
        ctx.lineWidth = 1;
        ctx.beginPath();
        ctx.moveTo(0,h/2);
        ctx.lineTo(w,h/2);
        ctx.closePath();
        ctx.stroke();
 
        ctx.beginPath();
        ctx.moveTo(w/2,0);
        ctx.lineTo(w/2,h);
        ctx.closePath();
        ctx.stroke();
        for(i=-(rangex/2);i<=(rangex/2);i++)
        {
                ctx.fillText(i,(i+(rangex/2))*range,h/2);
        }
        ctx.save();
}
grid();

ctx.closePath();
ctx.stroke();

 

 

 

Jakim warunkiem mogę wymusić rysowanie pionowe na canvasie ?

Udaje mi się wyrysować ciąg znaków o wysokości osi Y, ale nie jestem w stanie wypisać go w pozycji pionowej..., czy jest jakaś metoda odwracająca ciąg znaków o 90 stopni? czy pownienem w momencie wypisywania ciągu cyfr zdefiniować warunek który wypisze je w pozycji pionowej?

 

1 odpowiedź

0 głosów
odpowiedź 8 stycznia przez maciej.tokarz Dyskutant (8,070 p.)

Generalnie jest sporo różnych metod tzw. transformacji, a obrót jest jedną z: przykład.

Omówienie

M.

Podobne pytania

0 głosów
1 odpowiedź 58 wizyt
pytanie zadane 25 stycznia 2016 w HTML i CSS przez tirex Gaduła (4,320 p.)
+1 głos
0 odpowiedzi 62 wizyt
0 głosów
1 odpowiedź 82 wizyt
pytanie zadane 30 sierpnia 2016 w JavaScript, jQuery, AJAX przez Ardian Początkujący (300 p.)
...