Js2020: различия между версиями

Материал из wiki.nntc.nnov.ru
Перейти к навигации Перейти к поиску
 
(не показана 1 промежуточная версия этого же участника)
Строка 1: Строка 1:
−
https://cloud.nntc.nnov.ru/index.php/s/nis8d27GxktxKyP
+
Работа с CANVAS: http://htmlbook.ru/html/canvas
  
−
=Canvas=
+
Бегающий смайл: https://cloud.nntc.nnov.ru/index.php/s/nis8d27GxktxKyP
−
<pre>
+
 
−
<!DOCTYPE html>
+
Бегающий квадрат: https://cloud.nntc.nnov.ru/index.php/s/KZ3wb6BQQqAGXHB
−
<html>
 
−
<head>
 
−
  <title>canvas</title>
 
−
  <meta charset="utf-8">
 
−
  <script>
 
−
  window.onload = function() {
 
−
    var drawingCanvas = document.getElementById('smile');
 
−
    if(drawingCanvas && drawingCanvas.getContext) {
 
−
    var context = drawingCanvas.getContext('2d');
 
−
    // Рисуем окружность
 
−
    context.strokeStyle = "#000";
 
−
    context.fillStyle = "#fc0";
 
−
    context.beginPath();
 
−
    context.arc(100,100,50,0,Math.PI*2,true);
 
−
    context.closePath();
 
−
    context.stroke();
 
−
    context.fill();
 
−
    // Рисуем левый глаз
 
−
    context.fillStyle = "#fff";
 
−
    context.beginPath();
 
−
    context.arc(84,90,8,0,Math.PI*2,true);
 
−
    context.closePath();
 
−
    context.stroke();
 
−
    context.fill();
 
−
    // Рисуем правый глаз
 
−
    context.beginPath();
 
−
    context.arc(116,90,8,0,Math.PI*2,true);
 
−
    context.closePath();
 
−
    context.stroke();
 
−
    context.fill();
 
−
    // Рисуем рот
 
−
    context.beginPath();
 
−
    context.moveTo(70,115);
 
−
    context.quadraticCurveTo(100,130,130,115);
 
−
    context.quadraticCurveTo(100,150,70,115);
 
−
    context.closePath();
 
−
    context.stroke();
 
−
    context.fill();
 
−
    }
 
−
  }
 
−
  </script>
 
−
</head>
 
−
<body>
 
−
  <canvas id="smile" width="200" height="200">
 
−
    <p>Ваш браузер не поддерживает рисование.</p>
 
−
  </canvas>
 
−
</body>
 
−
</html>
 
−
</pre>
 

Текущая версия на 18:45, 10 марта 2020

Работа с CANVAS: http://htmlbook.ru/html/canvas

Бегающий смайл: https://cloud.nntc.nnov.ru/index.php/s/nis8d27GxktxKyP

Бегающий квадрат: https://cloud.nntc.nnov.ru/index.php/s/KZ3wb6BQQqAGXHB

Источник — https://wiki.nntc.nnov.ru/index.php?title=Js2020&oldid=9050