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


× Быстрый вопрос
Пользователь месяца
dos1k dos1k 1-й за Май
Очков активности: 1 194 28 тем, 115 сообщений, 4 балла репутации
Сайт: dos1k.ru
ТОП самых активных за этот месяц
  • Фотография Olya23
    #1

    Olya23
    Очков активности: 990 3 темы, 123 сообщения, 5 баллов репутации

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

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

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

    maxnik (konovalovpavel.ru)
    Очков активности: 90 0 тем, 20 сообщений, 3 балла репутации

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

    agrx (key-assort.ru)
    Очков активности: 54 0 тем, 18 сообщений, 2 балла репутации

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

    fedornabilkin (plohoneponyal.ru)
    Очков активности: 51 0 тем, 17 сообщений, 2 балла репутации

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

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

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

    Андрей WPMasterKZ (wpmaster.kz)
    Очков активности: 37.5 0 тем, 25 сообщений, 1 балл репутации

  • Фотография re-search
    #8

    re-search
    Очков активности: 36 5 тем, 9 сообщений, 1 балл репутации

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

    FIvYUr (catblogger.ru)
    Очков активности: 36 0 тем, 24 сообщения, 1 балл репутации

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

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

  • Показать весь ТОП 10
Поддержите форум! =)
Апдейты
  • Яндекс ИКС: 24.05.2019
  • Яндекс выдача: 19.06.2019
Топ 5 участников по репутации


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

#1 neitrosha

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

Отправлено 17 Апрель 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
  • Пользователь
  • 647 сообщений
  • Репутация: 192

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