linkedin facebook linkedin facebook nod32

HTML5 da canvas tegi

Muallif: Mengliyev Sh.

Qo`shilgan sana: 2016-06-13

HTML5 da canvas tegi

Canvas tegi- JavaScript orqali turli xildagi ob’ektlarni chizish, rasm chiqarish, transformasiya va xususiyatlarni o`zgartirish imkoniyatiga ega maydon yaratadi. Yopilish tegi mavjud </canvas>.
Qo`llash
<canvas id="identifikator">
</canvas>

height
Balandligi 300 pikseldan boshlanadi.
width
Kengligi 150 pikseldan boshlanadi.
Misol:
<!DOCTYPE html>
<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');
// aylana chizish
context.strokeStyle = "#000";
context.fillStyle = "#fc0";
context.beginPath();
context.arc(100,100,50,0,Math.PI*2,true);
context.closePath();
context.stroke();
context.fill();
// chap ko`zini chizish
context.fillStyle = "#fff";
context.beginPath();
context.arc(84,90,8,0,Math.PI*2,true);
context.closePath();
context.stroke();
context.fill();
// o`ng ko`zini chizish
context.beginPath();
context.arc(116,90,8,0,Math.PI*2,true);
context.closePath();
context.stroke();
context.fill();
// Og`zini chizish
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="400" height="300">
<p>Sizning brovzeringiz chizmasa quyidagilarga amal qiling</p>
</canvas>
</body>
</html>

Natija: Rasm. 1. da keltirilgan.

Рис. 1.Html5 da canvas tegini qo`llash

Izoh: Brovzerlar: Internet Explorer 9.0, Chrome 6.0, Opera 10.6, Safari 4.0, Firefox 4.0, Android 2.2 va iOS 3.0 versiyalarda aside tegini natijani chiqarish mumkin.

1402 marta o`qildi.

Parol:
Eslab qolish.


Ro`yhatdan o`tish

testing

+998915878681

Siz o`z maxsulotingizni 3D reklama ko`rinishda bo`lishini xohlaysizmi? Unda xamkorlik qilamiz.

3D Reklama


Рейтинг@Mail.ru
Рейтинг@Mail.ru

Besucherzahler
счетчик посещений