Js2020: различия между версиями
Перейти к навигации
Перейти к поиску
Vovan (обсуждение | вклад) (Новая страница: «https://cloud.nntc.nnov.ru/index.php/s/nis8d27GxktxKyP») |
Vovan (обсуждение | вклад) |
||
| Строка 1: | Строка 1: | ||
https://cloud.nntc.nnov.ru/index.php/s/nis8d27GxktxKyP | https://cloud.nntc.nnov.ru/index.php/s/nis8d27GxktxKyP | ||
| + | |||
| + | =Canvas= | ||
| + | <pre> | ||
| + | <!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'); | ||
| + | // Рисуем окружность | ||
| + | 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:38, 3 марта 2020
https://cloud.nntc.nnov.ru/index.php/s/nis8d27GxktxKyP
Canvas
<!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');
// Рисуем окружность
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>
