VPF::Отображение canvas по нажатию кнопки

silverst

Дата 2.1.2012, 16:37 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 18
Регистрация: 2.4.2011

Репутация: нет
Всего: нет

Работаю с Canvas при помощи js. И тут возникла проблема:
Я хотел бы, чтобы js-скрипт выполнялся по нажатии кнопки. Это нужно например для того чтобы нарисовать линию длинной, которую ты задаш в текстовом поле.Я объявил соотвествующую функцию, но ничего не вышло.
Прошу помощи.

Скрипт

Код


<script>
        //*function draw() {
      var canvas=document.getElementById("example");
      var context=canvas.getContext("2d");
      var line=canvas.getContext("2d");
      var line1=canvas.getContext("2d");
      var line2=canvas.getContext("2d");
      var line3=canvas.getContext("2d");
      var line4=canvas.getContext("2d");
      var rect=canvas.getContext("2d");
      var rect2=canvas.getContext("2d");
      var rnd=canvas.getContext("2d");
      var rnd1=canvas.getContext("2d");
      var d=25;
      var l=+7.5;
      var x=Math.sqrt(200*200-200*(d/90)*200*(d/90));
      var prop=x/200;
      var k=270-(d/90)*200;
      var az=270+(l/90)*x; 

       context.fillStyle="#00BFFF";
       context.beginPath();
       context.arc(270, 270, 200, 0, Math.PI*1,true);
       context.fill();
       context.lineWidth=1;//*толщина контура
       context.stroke();//*0бводит контур линии
       context.closePath();
       
      //*рисуем солнышко
       rnd1.fillStyle="#FFD700";
       rnd1.beginPath();
       rnd1.arc(az, k, 6, 0, Math.PI*2,true);
       rnd1.fill();
       rnd1.stroke();
       rnd1.lineWidth=0;
       rnd1.closePath();
       
        rnd.fillStyle = '#000000';
        rnd.font = 'bold 15px sans-serif';
        rnd.textBaseline = 'top';
        rnd.fillText ('З', 270, 270);
       
        rnd.fillStyle = '#000000';
        rnd.font = 'bold 15px sans-serif';
        rnd.textBaseline = 'top';
        rnd.fillText ('Ю', 70, 270);
       
        rnd.fillStyle = '#000000';
        rnd.font = 'bold 15px sans-serif';
        rnd.textBaseline = 'top';
        rnd.fillText ('C', 460, 270); //*°
       
        rnd.fillStyle = '#000000';
        rnd.font = 'bold 10px sans-serif';
        rnd.textBaseline = 'top';
        rnd.fillText ('Вид неба 22/08/2012 17:00:00 в пункте Тольятти', 70, 290); 
       
       //*drawCircle(270, 270, 100);
        //*rect.fillRect(50, 50, 450, 360);
      //*rect.fillStyle = "#0f0";
      //*rect2.fillStyle = "";
      //*rect2.fillRect(55, 55, 440, 350);
      //*rect2.clear.Arc(270, 270, 199, 0, Math.PI*1,true);
            //*context.strokeStyle = "000000";
      //*context.stroke();
           
      line1.moveTo(55, 55);
      line1.lineTo(495, 55);
      line2.moveTo(55, 55);
      line2.lineTo(55, 405);
      line3.moveTo(55, 405);
      line3.lineTo(495, 405);
      line3.moveTo(495, 405);
      line3.lineTo(495, 55);
      line.lineWidth=1;
      line.strokeStyle="black";
      line.moveTo(70,270);
      line.lineTo(470,270);
      line.stroke();
      //*}
      </script>

Кнопка:

Код


 <input onclick="draw" value="Вычислить" type="button">

Это сообщение отредактировал(а) silverst - 2.1.2012, 16:39

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »