|
|
| Строка 1: |
Строка 1: |
| − | https://cloud.nntc.nnov.ru/index.php/s/nis8d27GxktxKyP | + | Бегающий смайл: https://cloud.nntc.nnov.ru/index.php/s/nis8d27GxktxKyP |
| | | | |
| − | =Canvas=
| + | Бегающий квадрат: https://cloud.nntc.nnov.ru/index.php/s/KZ3wb6BQQqAGXHB |
| − | <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>
| |
