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


Партнерская программа Kredov

Банальная елочка с помощью 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
  • Пользователь
  • 629 сообщений
  • Репутация: 176

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