×Закрыть

Рисуем квадрат или прямоугольник используя HTML 5 canvas и JavaScript

<html> 
<head> 
<meta charset="utf-8"/> 
<title>Рисуем квадрат или прямоугольник используя HTML 5 canvas и JavaScript</title> 
</head>

<body> 
  <canvas id="myCanvas" width="455" height="350" style="border:1px solid #000000;">Эту запись вы увидите, если ваш браузер не поддерживает HTML5 canvas тег.</canvas>   
   
  <script type="application/javascript"> 
    var ctx = document.getElementById('myCanvas').getContext('2d'); 

    ctx.fillStyle = "rgb(255,0,0)"; 
    ctx.fillRect (0, 0, 50, 50); 
      
    ctx.fillStyle = "rgba(200, 0, 200, 0.5)"; 
    ctx.fillRect (30, 30, 50, 50);    

  ctx.fillRect(125,125,100,100);
  ctx.clearRect(145,145,60,60);
  ctx.strokeRect(150,150,50,50);
    
  for (var i=0;i<6;i++){
    for (var j=0;j<6;j++){
      ctx.fillStyle = 'rgb(' + Math.floor(255-42.5*i) + ',' +
                               Math.floor(255-42.5*j) + ',0)';
      ctx.fillRect(300+j*25,195+i*25,25,25);      
     }
  }
</script>   
</body>
</html>

Демо.

👍НравитсяПонравилось0
В избранноеВ избранном0
LinkedIn

Похожие топики

Допустимые теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter
Допустимые теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter

Ну наконец-то рабочий скрипт. Спасибо.

100500 уроков в инете по canvas.

Рисунки на заборах в стиле Hi-Tech )))

По-моему, этот пост значительно полезнее всяких «Где найти парня\девушку?», пусть даже баян и элементарщина. Форум программистов, все-таки.

Лабу сдала, молодец. А теперь курсовая: создать приложение, рисующее график произвольной функции от x. Функция и граничные значения x должны вводиться пользователем. Разрешается использовать любые библиотеки, кроме библиотек для рисования графика.

нафига велосипед изобретать опять? тыщщи библотек уже для этого существует

не юзай JS там де можна обійтись CSS’ом

и в чем полезность данного поста — не ясно...

Переходите сразу к www.fishgl.com

Подписаться на комментарии