Rumah > Artikel > hujung hadapan web > Bagaimana untuk melukis elips dalam kanvas HTML5?
Bagaimana untuk melukis elips dalam kanvas HTML5?
- WBOYke hadapan
- 2023-08-31 17:41:051131semak imbas
Anda boleh cuba jalankan kod berikut untuk melukis bujur dalam kanvas HTML5 -
Contoh
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<canvas id="newCanvas" width="450" height="300"></canvas>
<script>
// canvas
var c = document.getElementById('newCanvas');
var context = c.getContext('2d');
var cX = 0;
var cY = 0;
var radius = 40;
context.save();
context.translate(c.width / 2, c.height / 2);
context.scale(2, 1);
context.beginPath();
context.arc(cX, cY, radius, 0, 2 * Math.PI, false);
context.restore();
context.fillStyle = '#000000';
context.fill();
context.lineWidth = 2;
context.strokeStyle = 'yellow';
context.stroke();
</script>
</body>
</html>Output
Atas ialah kandungan terperinci Bagaimana untuk melukis elips dalam kanvas HTML5?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Artikel sebelumnya：Tindakan WordPress lwn Penapis: Ketahui PerbezaannyaArtikel seterusnya：Tindakan WordPress lwn Penapis: Ketahui Perbezaannya