HTML | Основы Canvas

Опубликовано: 1 Марта, 2022

Что такое HTML Canvas?
Элемент «холст» HTML используется для рисования графики с помощью JavaScript. Элемент «холст» является только контейнером для графики. Для фактического рисования графики необходимо использовать JavaScript. В Canvas есть несколько методов для рисования контуров, прямоугольников, кругов, текста и т. Д. и добавление изображений.

Пример: холст представляет собой прямоугольную область на странице HTML. По умолчанию холст не имеет рамки и содержимого. Для ссылки в скрипте указан атрибут id, а для определения размера холста - атрибут ширины и высоты. Атрибут стиля используется для добавления границы.

INPUT :

<!DOCTYPE html>
<html>
<body>
  
<canvas id="myCanvas" width="400" height="200" 
style="border:2px solid #000000;">
</canvas>
  
</body>
</html>

ВЫХОД :

Давайте посмотрим на некоторые формы, которые можно нарисовать с помощью Canvas:

Drawing A Circle

INPUT :

<!DOCTYPE html>
<html>
<body>
  
<canvas id="myCanvas" width="400" height="200 style
="border:2px solid #d3d3d3;">
  
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(200,100,50,0,2*Math.PI);
ctx.stroke();
</script> 
  
</body>
</html>

OUTPUT :

Drawing a Text

INPUT :

<!DOCTYPE html>
<html>
<body>
  
<canvas id="myCanvas" width="600" height="200" 
style="border:1px solid #d3d3d3;">
  
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("GeeksForGeeks",170,50);
</script>
  
</body>
</html>

OUTPUT :

Drawing Linear Gradient

INPUT :

<!DOCTYPE html>
<html>
<body>
  
<canvas id="myCanvas" width="400" height="200" style="border:2px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
  
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var grd = ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"yellow");
grd.addColorStop(1,"grey");
ctx.fillStyle = grd;
ctx.fillRect(50,50,300,80);
</script>
  
</body>
</html>

OUTPUT :

Drawing Image On A Canvas

INPUT :

<!DOCTYPE html>
<html>
<body>
  
<p>Image to use:</p>
<img id="scream" src="http://www.theartstory.org/images20/works/van_gogh_vincent_7.jpg" alt="VAN GOGH" width="100" height="200">
  
<p>Canvas to fill:</p>
<canvas id="myCanvas" width="150" height="250"
style="border:1px solid #d3d3d3;">
</canvas>
  
<p><button onclick="myCanvas()">Click to Try</button></p>
  
<script>
function myCanvas() {
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    var img = document.getElementById("scream");
    ctx.drawImage(img,0,0);
}
</script>
  
</body>
</html>

OUTPUT :

HTML Canvas Shadow blur property

INPUT :

<!DOCTYPE html>
<html>
<body>
  
<canvas id="myCanvas" width="500" height="250";">
  
<script>
  
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.shadowBlur = 20;
ctx.shadowColor = "yellow";
ctx.fillStyle = "red";
ctx.fillRect(30, 20, 100, 80);
  
</script>
  
</body>
</html>

OUTPUT :

Rotate method in HTML Canvas

INPUT :

<!DOCTYPE html>
<html>
<body>
  
<canvas id="myCanvas" width="300" height="150;">
  
  
<script>
  
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.rotate(20 * Math.PI / 180);
ctx.fillRect(100, 20, 100, 50);
  
</script>
  
</body>
</html>

OUTPUT :

HTML Canvas Translate
The translate() method remaps the (0,0) position on the canvas.
INPUT :

Run »Result Size: 625 x 590
  
<!DOCTYPE html>
<html>
<body>
?
<canvas id="myCanvas" width="300" height="150;">
?
?
<script>
?
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillRect(10, 10, 100, 50);
ctx.translate(80, 90);
ctx.fillRect(10, 10, 100, 50);
?
</script>
?
</body>
</html>
?

OUTPUT :

Transform method in HTML Canvas

INPUT :

<!DOCTYPE html>
<html>
<body>
  
<canvas id="myCanvas" width="300" height="150;">
  
<script>
  
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
  
ctx.fillStyle = "yellow";
ctx.fillRect(0, 0, 250, 100)
  
ctx.transform(1, 0.5, -0.5, 1, 30, 10);
ctx.fillStyle = "grey";
ctx.fillRect(0, 0, 250, 100);
  
ctx.transform(1, 0.5, -0.5, 1, 30, 10);
ctx.fillStyle = "black";
ctx.fillRect(0, 0, 250, 100);
  
</script>
  
</body>
</html>

OUTPUT :

Creating Animation in HTML Canvas
Javascript helps to simulate good animation over a HTML5 canvas.

Two important Javascript methods which can be used to animate an image on a canvas :

setInterval(callback, time):This method repeatedly executes the supplied code after a given time.
setTimeout(callback, time):This method executes the supplied code only once after a given time.

INPUT :

<!DOCTYPE HTML>
<html>
   <head>
        
      <script type="text/javascript">
         var pattern= new Image();
           
         function animate(){
            pattern.src = 
"https://www.reproduction-gallery.com/catalogue/uploads/1463472974_large-image_pablopicassowomanfacingtotheright1934lg.jpg";
            setInterval(drawShape, 100);
         }
           
         function drawShape(){
           var canvas = document.getElementById("mycanvas");
              
               var ctx = canvas.getContext("2d");
               ctx.fillStyle = "rgba(20,20,20,20)";
               ctx.strokeStyle = "rgba(0,153,255,0.4)";
               ctx.save();
               ctx.translate(150,150); 
                 
               var time = new Date(); 
               ctx.rotate( ((2*Math.PI)/6)*time.getSeconds() 
                   + ( (2*Math.PI)/6000)*time.getMilliseconds() );
               ctx.translate(0,28.5);
               ctx.drawImage(pattern,-3.5,-3.5);
               ctx.restore();
              
         }
      </script>
   </head>
     
   <body onload="animate();">
      <canvas id="mycanvas" width="400" height="400"></canvas>
   </body>
     
</html>

OUTPUT :
Kindly visit the link below to see the output of the above code:

HTML

HTML | Основы Canvas

РЕКОМЕНДУЕМЫЕ СТАТЬИ