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


Пользователь месяца
magnet magnet 1-й за Январь
Очков активности: 621 0 тем, 69 сообщений, 6 баллов репутации
Сайт: rbfxdirect.com
ТОП самых активных за этот месяц
  • Фотография BLIK
    #1

    BLIK
    Очков активности: 472.5 0 тем, 35 сообщений, 9 баллов репутации

  • Фотография Андрей WPMasterKZ
    #2

    Андрей WPMasterKZ (wpmaster.kz)
    Очков активности: 420 Вне конкурса за определение пользователя месяца

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

    ShowPrint (ShowPrint.ru)
    Очков активности: 396 Вне конкурса за определение пользователя месяца

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

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

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

    Ixman (o5cat.ru)
    Очков активности: 306 Вне конкурса за определение пользователя месяца

  • Фотография Mandarin
    #6

    Mandarin
    Очков активности: 210 0 тем, 28 сообщений, 5 баллов репутации

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

    r0mZet (rz-style.ru)
    Очков активности: 102 0 тем, 17 сообщений, 4 балла репутации

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

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

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

    WGN (worldgamenews.com)
    Очков активности: 40.5 0 тем, 27 сообщений, 1 балл репутации

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

    player09
    Очков активности: 37.5 3 темы, 16 сообщений, 1 балл репутации

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

Новый Teasernet

Поддержите форум! =)
Апдейты
  • Яндекс ИКС: 25.12.2018
  • Яндекс выдача: 16.02.2019
Топ 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

#2 yury

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

Отправлено 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