HTML թեգ <canvas>
![]() | ![]() | ![]() | ![]() | ![]() |
<canvas> թեգը ստեղծում է տարածք, որտեղ դուք կարող եք օգտագործել JavaScript-ը տարբեր առարկաներ նկարելու, պատկերներ ցուցադրելու, դրանք փոխակերպելու և հատկությունները փոխելու համար: Օգտագործելով <canvas> պիտակը, կարող եք ստեղծել գծագրեր, անիմացիաներ, խաղեր և այլն:
Օրինակ՝
<canvas id="նույնացուցիչ">... </canvas>
Ատրիբուտներ՝
- height
- Սահմանում է կտավի բարձրությունը: Նախնականը 300 պիքսել է:
- width
- Սահմանում է կտավի լայնությունը: Նախնականը 150 պիքսել է:
Օգտագործման օրինակ՝
<html>
<head>
<title>html թեգ button</title>
<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>
Կիսվել սոցցանցերում









