Перейти к содержимому


Пользователь месяца
WGN WGN 1-й за Июль
Очков активности: 850 2 темы, 75 сообщений, 7 баллов репутации
Сайт: worldgamenews.com
ТОП самых активных за этот месяц
  • Фотография TimurR
    #1

    TimurR
    Очков активности: 372 3 темы, 22 сообщения, 8 баллов репутации

  • Фотография WGN
    #2

    WGN (worldgamenews.com)
    Очков активности: 75 Вне конкурса за определение пользователя месяца

  • Фотография ShowPrint
    #3

    ShowPrint (ShowPrint.ru)
    Очков активности: 72 0 тем, 8 сообщений, 6 баллов репутации

  • Фотография BlackLion
    #4

    BlackLion
    Очков активности: 36 0 тем, 24 сообщения, 1 балл репутации

  • Фотография Vmir
    #5

    Vmir
    Очков активности: 25.5 Вне конкурса за определение пользователя месяца

  • Фотография Napoleon-007
    #6

    Napoleon-007
    Очков активности: 21 0 тем, 14 сообщений, 1 балл репутации

  • Фотография Ixman
    #7

    Ixman (o5cat.ru)
    Очков активности: 21 0 тем, 7 сообщений, 2 балла репутации

  • Фотография alekswebart
    #8

    alekswebart
    Очков активности: 19.5 1 тема, 10 сообщений, 1 балл репутации

  • Фотография r0mZet
    #9

    r0mZet (rz-style.ru)
    Очков активности: 18 2 темы, 6 сообщений, 1 балл репутации

  • Фотография bor10811
    #10

    bor10811
    Очков активности: 15 2 темы, 4 сообщения, 1 балл репутации

  • Показать весь ТОП 10

Kwork.ru - услуги фрилансеров от 500 руб.

Поддержите форум! =)
Апдейты
  • Яндекс тИЦ: 19.11.2017
  • Яндекс выдача: 21.08.2018
Топ 5 участников по репутации


Банальная елочка с помощью Canvas

#1 neitrosha

neitrosha
  • Неактивные
  • 7 сообщений
  • Репутация: 0
0

Отправлено 17 April 2012 - 17:05

Начал недавно смотреть 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

robot

robot
  • Пользователь PRO
  • 2652 сообщений
  • Репутация: 85
Советую обратить внимание на следующее:
  1. Как выровнять элементы списка в строчку
  2. Вставить HTML код на страницу (cncat)
  3. Как вывести картинки на сайте в несколько колонок
  4. Добавить class="active" в меню, выводимое с помощью цикла
  5. Как сделать промежутки между банерами и сбоку и с верху и снизу

#2 yury

yury
  • Пользователь
  • 642 сообщений
  • Репутация: 188

Отправлено 17 April 2012 - 17:34

Есть подозрение, что достаточно менять цвет заливки до ее использования:
<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>

  • 0


Оформление форума – IPBSkins.ru