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?