canvas в javascript

[alexander555]

Нарисовал в JS с помощью canvas закрашенный прямоугольник.


example.width = size1;
example.height = width1;
ctx.fillStyle = "rgba(11,118, 81, 0.5)";
ctx.fillRect (30, 30, 55, 50);

[/JS]
по заданию нужно, чтоб при нажатий на radiobutton прямоугольник менял свое расположение (right, left, center). Как провернуть такое?)

[monolithed]

абстрактный пример

window.onload = function() { 
   var ctx = document.getElementById('canvas').getContext('2d'),
        array = [[0, 0], [100, 0], [0, 100]], /* предопределенные координаты */
        forma = document.forma.elements, /* ссылка на <input type="radio" name="radio" /> - 3 элемента */
        i = forma.length;
         /*...*/
   while(i--) {
       forma[i].onchange = function(i) {
           return function() {
                  ctx.translate(array[i]); // тут меняется положение
                   /*...*/
           };
       }(i);
   }
};

[alexander555]

monolithed, спасибо за ппример)) не можешь показать как именно у меня будет? делал, делал.. не получилось.. Знаний в JS пару дней)

<canvas id='example' >Обновите браузер</canvas>

<script>
function test(size1,width1, l1, c1,r1 ){
 var example = document.getElementById("example");
  var ctx = example.getContext('2d');
  example.width  = size1;
  example.height = width1;
 ctx.fillStyle = "rgba(11,118, 81, 0.5)";
 ctx.fillRect (0,0,size1,width1);
}
</script>

 
<form>

<p> <strong>Значение параметра выравнивания</strong> </p>
<input type="radio" name="pol" name="l1" value="checked"/><strong>Left </strong><br>
<input type="radio"name="pol" name="c1"/> <strong>Center </strong><br>
<input type="radio" name="pol" name="r1"/><strong>Right</strong><br>
<br>
<br>
Длина линии (size): <input type="text" size="7" name="size1"/><br>
Толщина линии (width) : <input type="text" size="7" name="width1"/>
<br>
<input type="button" value="Просмотр"  onclick="return test(this.form.size1.value,this.form.width1.value)">
</form>
</body>
</html>

незнаю как вклинить нормально ваш код)

[monolithed]

незнаю как вклинить нормально ваш код)

я же вам расжевал как только можно, куда еще проще?

<script type="text/javascript">
window.onload = function() { 
    var canvas = document.getElementById('canvas'),
        array = [0, 220, 400],
        forma = document.forma.elements,
        i = forma.length,
        ctx = canvas.getContext('2d');
        ctx.fillStyle = "rgba(11,118, 81, 0.5)";
        ctx.fillRect(0, 0, 50, 50);
    
   while(i--) {
       forma[i].onchange = function(i) {
           return function() {
              ctx.clearRect(0, 0, canvas.width, canvas.height);
              ctx.fillRect(array[i], 0, 50, 50);
           };
       }(i);
   }
};
</script>

<form name="forma">
    <input type="radio" name="pol" checked="checked" />Left
    <input type="radio" name="pol" />Center
    <input type="radio" name="pol" />Right
</form>
<canvas id='canvas' width="500" height="500">Обновите браузер</canvas>

Знаний в JS пару дней)

за пару дней можно было нагуглить

[alexander555]

monolithed,
спасибо вам большое!!! то что нужно..

насчет гугла.. часов 5 гуглил.. ничего путного не нашел) все мануалы перелопатил про canvas )

[alexander555]

--

[monolithed]

я нуб

так писали бы в раздел работа

<script type="text/javascript">
window.onload = function() { 
    var canvas = document.getElementById('canvas'),
        array = [0, 220, 400],
        pol = document.getElementsByName('pol'),
        size = document.getElementsByName('size'),
        button = document.getElementsByName('button')[0],
        d_height = 50, 
        d_width = 50,
        i = pol.length, j,
        ctx = canvas.getContext('2d');
        ctx.fillStyle = "rgba(11,118, 81, 0.5)";
        ctx.fillRect(0, 0, d_width, d_height);
    
    while(i--) {
        pol[i].onchange = function(i) {
            return function() {
                j = i;
            };
    }(i);

    button.onclick = function(i) {
        return function() {
            var width = size[0].value, height = size[1].value;
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.fillRect(array[j], 0, size[0].value == '' ? d_width : width, size[1].value == '' ? d_height : height);
        };
    }(i);
   }
};
</script>

<form name="forma">
    <input type="radio" name="pol" checked="checked" />Left <br />
    <input type="radio" name="pol" />Center <br />
    <input type="radio" name="pol" />Right <br />
    <input type="text" name="size" value="50" /> Width <br />
    <input type="text" name="size" value="50" /> Height 
    <input type="button" name="button" value="click" />
</form>
<canvas id='canvas' width="500" height="500">Обновите браузер</canvas>