X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> Банальная елочка с помощью Canvas
neitrosha
neitrosha
Topic Starter сообщение 17.4.2012, 18:05; Ответить: neitrosha
Сообщение #1


Начал недавно смотреть Canvas, возник такой вопрос - как сделать для каждой фигуры свой цвет? У елочки я делаю зеленый, а как правильно сделать коричневый цвет у ствола.
Код прилагаю ниже, буду очень рад любым советам, поскольку хочется разобраться конкретно в этом случае.


<html>
<head>
  <script type="text/javascript">
      function drawShape() {
          // get the canvas element using the DOM
          var canvas = document.getElementById('tutorial');
          // Make sure we don't execute when canvas isn't supported
          if (canvas.getContext) {
              // use getContext to use the canvas for drawing
              var ctx = canvas.getContext('2d');
              ctx.beginPath();
              ctx.fillStyle = "green";
              ctx.moveTo(150, 25);
              ctx.lineTo(90, 75);
              ctx.lineTo(210, 75);
              ctx.moveTo(150, 55);
              ctx.lineTo(70, 110);
              ctx.lineTo(230, 110);
              ctx.moveTo(150, 75);
              ctx.lineTo(60, 150);
              ctx.lineTo(240, 150);
              //var m = canvas.getContext('2d');
            
              //ctx.fillStyle = 'orange';
               ctx.fillRect(140, 150, 15, 30);
               //ctx.fillRect(140, 150, 15, 30); x и y это координаты верхнего левого угла, а w и h это ширина и высота
            
              ctx.fill();

      
          } else {
              alert('You need Safari or Firefox 1.5+ to see this demo.');
          }
      }
  </script>
</head>
<body onload="drawShape();">
   <canvas id="tutorial" width="500" height="500"></canvas>
</body>
</html>
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
yury_mw
yury_mw
сообщение 17.4.2012, 18:34; Ответить: yury_mw
Сообщение #2


Есть подозрение, что достаточно менять цвет заливки до ее использования:
<html>
<head>
<script type="text/javascript">
    function drawShape() {
        // get the canvas element using the DOM
        var canvas = document.getElementById('tutorial');
        // Make sure we don't execute when canvas isn't supported
        if (canvas.getContext) {
            // use getContext to use the canvas for drawing
            var ctx = canvas.getContext('2d');
            ctx.beginPath();
            ctx.fillStyle = "green";
            ctx.moveTo(150, 25);
            ctx.lineTo(90, 75);
            ctx.lineTo(210, 75);
            ctx.moveTo(150, 55);
            ctx.lineTo(70, 110);
            ctx.lineTo(230, 110);
            ctx.moveTo(150, 75);
            ctx.lineTo(60, 150);
            ctx.lineTo(240, 150);
            ctx.fill();
            ctx.fillStyle = "brown";
            ctx.fillRect(140, 150, 15, 30);
        } else {
            alert('You need Safari or Firefox 1.5+ to see this demo.');
        }
    }
</script>
</head>
<body onload="drawShape();">
   <canvas id="tutorial" width="500" height="500"></canvas>
</body>
</html>


Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Раскройте свой потенциал заработка с помощью 2x2 Media Network — вашего пути к выгодным предложениям CPA!
Присоединяйтесь к 2x2 Media Network, вашему надежному партнеру в мире
9 2x2MediaLimited 2794 20.3.2024, 4:33
автор: 2x2MediaLimited
Горячая тема (нет новых ответов) Проверка позиций сайтов в поисковых системах с помощью Positon.ru
Мониторинг продвижения сайтов
182 Positon 178937 23.2.2024, 9:53
автор: Positon
Открытая тема (нет новых ответов) WEB и SMM дизайн — решение ваших бизнес задач с помощью дизайна
8 justburger 5297 6.7.2020, 9:18
автор: justburger
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыЦелевой трафик +30% за 4 месяца с помощью SEO продвижения у Хачатура - отзывы и кейсы в топике
6 Mikejones 3420 9.7.2019, 10:47
автор: Mikejones
Открытая тема (нет новых ответов) Гарантированно привлечем от 1000 подписчиков за 1 месяц с помощью комплексного продвижения
8 masija_coke 3158 1.1.2019, 0:59
автор: masija_coke


 



RSS Текстовая версия Сейчас: 28.3.2024, 22:05
Дизайн