Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 19.03.2011, 12:20
Интересующийся
Отправить личное сообщение для alexander555 Посмотреть профиль Найти все сообщения от alexander555
 
Регистрация: 16.03.2011
Сообщений: 16

canvas в javascript
Нарисовал в 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). Как провернуть такое?)
Ответить с цитированием
  #2 (permalink)  
Старый 19.03.2011, 13:31
Особый гость
Посмотреть профиль Найти все сообщения от monolithed
 
Регистрация: 02.04.2010
Сообщений: 4,260

абстрактный пример
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);
   }
};

Последний раз редактировалось monolithed, 19.03.2011 в 13:39.
Ответить с цитированием
  #3 (permalink)  
Старый 19.03.2011, 16:25
Интересующийся
Отправить личное сообщение для alexander555 Посмотреть профиль Найти все сообщения от alexander555
 
Регистрация: 16.03.2011
Сообщений: 16

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>


незнаю как вклинить нормально ваш код)
Ответить с цитированием
  #4 (permalink)  
Старый 19.03.2011, 20:10
Особый гость
Посмотреть профиль Найти все сообщения от monolithed
 
Регистрация: 02.04.2010
Сообщений: 4,260

Сообщение от alexander555
незнаю как вклинить нормально ваш код)
я же вам расжевал как только можно, куда еще проще?
<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>


Сообщение от alexander555
Знаний в JS пару дней)
за пару дней можно было нагуглить

Последний раз редактировалось monolithed, 19.03.2011 в 21:00.
Ответить с цитированием
  #5 (permalink)  
Старый 19.03.2011, 20:36
Интересующийся
Отправить личное сообщение для alexander555 Посмотреть профиль Найти все сообщения от alexander555
 
Регистрация: 16.03.2011
Сообщений: 16

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

насчет гугла.. часов 5 гуглил.. ничего путного не нашел) все мануалы перелопатил про canvas )
Ответить с цитированием
  #6 (permalink)  
Старый 20.03.2011, 00:44
Интересующийся
Отправить личное сообщение для alexander555 Посмотреть профиль Найти все сообщения от alexander555
 
Регистрация: 16.03.2011
Сообщений: 16

--

Последний раз редактировалось alexander555, 20.03.2011 в 11:51.
Ответить с цитированием
  #7 (permalink)  
Старый 21.03.2011, 20:06
Особый гость
Посмотреть профиль Найти все сообщения от monolithed
 
Регистрация: 02.04.2010
Сообщений: 4,260

Сообщение от alexander555
я нуб
так писали бы в раздел работа
<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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
[Книга] Stoyan Stefanov, Javascript Patterns Dmitry A. Soshnikov Учебные материалы 20 13.08.2013 11:37
Последние книги по JavaScript! monolithed Учебные материалы 7 26.10.2010 19:40
Выдвет ошибку JavaScript Ромио Opera, Safari и др. 4 21.10.2010 20:34
just fun + javascript canvas + ajax hangover Ваши сайты и скрипты 4 20.07.2010 10:37
JavaScript на Яндекс.Фотки - почему тормозит браузеры? ZavFirefox Javascript под браузер 23 27.09.2009 19:24