Canvas снеговик

@Definited · Регистрация: 10.10.2017

Студворк — интернет-сервис помощи студентам

Добрый вечер! Помогите пожалуйста найти ошибку в коде, а то сам никак не могу. Заранее спасибо.

HTML5
1
2
3
4
5
6
7
8
9
10
11
<!Doctype html!>
<html>
<head>
  <title>Canvas snowman</title>
</head>
<body>
    <canvas id="canvas" width="200" height="200"></canvas>
  <script>
  </script>
</body>
</html>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
 
    var circle = function (x, y, radius, fillCircle) {
      ctx.beginPath();
      ctx.arc(x, y, radius, 0, Math.Pi * 2, false);
      if (fillCircle) {
        ctx.fill();
      } else {
        ctx.stroke();
      }
    };
 
    var drawSnowman = function (x, y) {
      ctx.fillStyle = "Black";
      ctx.lineWidth = 4;
 
      circle(x + 50, y + 110, 40, false);
      circle(x + 50, y + 40, 30, false);
      circle(x + 40, y + 35, 5, true);
      circle(x + 60, y + 35, 5, true);
 
      circle(x + 50, y + 90, 5, true);
      circle(x + 50, y + 110, 5, true);
      circle(x + 50, y + 130, 5, true);
 
      ctx.fillStyle = "Orange";
      circle(x + 50, y + 45, 5, true);
    };
 
    drawSnowman(0, 0);
    drawSnowman(100, 20);

@SnapeEye · 22.10.2017, 16:23

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html>
    <head>
        <title>Canvas snowman</title>
    </head>
 
    <body>
        <canvas id="canvas" width="200" height="200" style="border-style: solid;"></canvas>
 
        <script type="text/javascript">
            var canvas = document.getElementById('canvas');
            var ctx = canvas.getContext('2d');
         
            var circle = function (x, y, radius, fillCircle) {
              ctx.beginPath();
              ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
              if (fillCircle) {
                ctx.fill();
              } else {
                ctx.stroke();
              }
            };
         
            var drawSnowman = function (x, y) {
              ctx.fillStyle = "Black";
              ctx.lineWidth = 4;
         
              circle(x + 50, y + 110, 40, false);
              circle(x + 50, y + 40, 30, false);
              circle(x + 40, y + 35, 5, true);
              circle(x + 60, y + 35, 5, true);
         
              circle(x + 50, y + 90, 5, true);
              circle(x + 50, y + 110, 5, true);
              circle(x + 50, y + 130, 5, true);
         
              ctx.fillStyle = "Orange";
              circle(x + 50, y + 45, 5, true);
            };
         
            drawSnowman(0, 0);
            drawSnowman(100, 20);
        </script>
    </body>
</html>

@8Observer8 · 22.10.2017, 23:42

В 3D с помощью three.js: https://8observer8.github.io/threejs/snowman/

https://jsfiddle.net/8Observer8/4zbym8L0/

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>Snowman in Three.js</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/87/three.min.js"></script>
    <script src="https://threejs.org/examples/js/controls/OrbitControls.js">
    </script>
</head>
 
<body>
    <canvas id="myCanvas" width="300" height="300" style="border-style: solid;"></canvas>
 
    <script>
        function createScene()
        {
            var canvas = document.getElementById("myCanvas");
 
            var renderer = new THREE.WebGLRenderer({ antialias: true, canvas: canvas });
            renderer.setClearColor(new THREE.Color(0x00bfff));
            renderer.setSize(canvas.clientWidth, canvas.clientHeight);
            renderer.shadowMapEnabled = true;
 
            var scene = new THREE.Scene();
 
            var camera = new THREE.PerspectiveCamera(50, canvas.clientWidth / canvas.clientHeight);
            camera.position.set(2, 2, 6.5);
            scene.add(camera);
 
            var orbitControls = new THREE.OrbitControls(camera, renderer.domElement);
            orbitControls.target.set(1.2, 1, 0);
 
            var light = new THREE.AmbientLight(0xffffff, 0.7);
            scene.add(light);
 
            var light2 = new THREE.DirectionalLight(0xffffff, 1);
            light2.position.set(3, 2, 3);
            light2.castShadow = true;
            scene.add(light2);
 
            var groundGeometry = new THREE.PlaneGeometry(60, 40, 1, 1);
            var groundMaterial = new THREE.MeshPhongMaterial({ color: 0xcccccc });
            var ground = new THREE.Mesh(groundGeometry, groundMaterial);
            ground.rotation.x = -90 * Math.PI / 180;
            ground.receiveShadow = true;
            scene.add(ground);
 
            function render()
            {
                orbitControls.update();
                renderer.render(scene, camera);
                requestAnimationFrame(render);
            }
            render();
 
            return scene;
        }
 
        function drawSnowman(x, y, z, scene)
        {
            var bodyRadius = 1;
            var body = new THREE.Mesh(new THREE.SphereGeometry(bodyRadius, 16, 16), new THREE.MeshPhongMaterial());
            body.position.set(x, y + bodyRadius, z);
            body.castShadow = true;
            body.receiveShadow = true;
            scene.add(body);
 
            var headRadius = 0.5;
            var head = new THREE.Mesh(new THREE.SphereGeometry(headRadius, 16, 16), new THREE.MeshPhongMaterial());
            head.position.set(x, y + bodyRadius * 2 + headRadius - headRadius / 5, z);
            head.castShadow = true;
            head.receiveShadow = true;
            scene.add(head);
 
            var noseHeight = 0.5;
            var nose = new THREE.Mesh(new THREE.ConeGeometry(0.2, 1, 16), new THREE.MeshPhongMaterial({ color: 0xffa500 }));
            nose.position.set(x, head.position.y, z + headRadius);
            nose.rotation.x = 90 * Math.PI / 180;
            nose.castShadow = true;
            nose.receiveShadow = true;
            scene.add(nose);
 
            var eyeRadius = 0.07;
            var eyeAngle = 35;
 
            var leftEye = new THREE.Mesh(new THREE.SphereGeometry(eyeRadius), new THREE.MeshPhongMaterial({ color: 0x000000 }));
            leftEye.position.set(
                x + headRadius * Math.sin(THREE.Math.degToRad(eyeAngle)) * Math.cos(THREE.Math.degToRad(eyeAngle)),
                headRadius * Math.sin(THREE.Math.degToRad(eyeAngle)) * Math.sin(THREE.Math.degToRad(eyeAngle)) + head.position.y,
                z + headRadius * Math.cos(THREE.Math.degToRad(eyeAngle)));
            scene.add(leftEye);
 
            var rightEye = new THREE.Mesh(new THREE.SphereGeometry(eyeRadius), new THREE.MeshPhongMaterial({ color: 0x000000 }));
            rightEye.position.set(
                x + headRadius * Math.sin(THREE.Math.degToRad(-eyeAngle)) * Math.cos(THREE.Math.degToRad(-45)),
                headRadius * Math.sin(THREE.Math.degToRad(-eyeAngle)) * Math.sin(THREE.Math.degToRad(-eyeAngle)) + head.position.y,
                z + headRadius * Math.cos(THREE.Math.degToRad(-eyeAngle)));
            scene.add(rightEye);
 
            var buttonRadius = 0.1;
            var buttonAngle = 25;
 
            var button0 = new THREE.Mesh(new THREE.SphereGeometry(buttonRadius), new THREE.MeshPhongMaterial({ color: 0x000000 }));
            button0.position.set(
                x,
                bodyRadius * Math.sin(THREE.Math.degToRad(buttonAngle)) + body.position.y,
                z + bodyRadius * Math.cos(THREE.Math.degToRad(buttonAngle)));
            scene.add(button0);
 
            var button1 = new THREE.Mesh(new THREE.SphereGeometry(buttonRadius), new THREE.MeshPhongMaterial({ color: 0x000000 }));
            button1.position.set(
                x,
                body.position.y,
                z + bodyRadius);
            scene.add(button1);
 
            var button2 = new THREE.Mesh(new THREE.SphereGeometry(buttonRadius), new THREE.MeshPhongMaterial({ color: 0x000000 }));
            button2.position.set(
                x,
                bodyRadius * Math.sin(THREE.Math.degToRad(-buttonAngle)) + body.position.y,
                z + bodyRadius * Math.cos(THREE.Math.degToRad(-buttonAngle)));
            scene.add(button2);
        }
 
        var scene = createScene();
 
        drawSnowman(0, 0, 0, scene);
        drawSnowman(2.5, 0, 1.5, scene);
    </script>
</body>
 
</html>

Новые блоги и статьи Все статьи Все блоги /
Программный контроль заполнения реквизита табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать контроль заполнения реквизита "ПричинаСписания". . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/	Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .	Вывод данных в справочнике через динамический список Maks 01.04.2026 Реализация из решения ниже выполнена на примере нетипового справочника "Спецтехника" разработанного в конфигурации КА2. Задача: вывести данные из ТЧ нетипового документа. . .
Программное заполнения текстового поля в реквизите формы документа Maks 01.04.2026 Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .	К слову об оптимизации kumehtar 01.04.2026 Вспоминаю начало 2000-х, университет, когда я писал на Delphi. Тогда среди программистов на форумах активно обсуждали аккуратную работу с памятью: нужно было следить за переменными, вовремя. . .	Идея фильтра интернета (сервер = слой+фильтр). Hrethgir 31.03.2026 Суть идеи заключается в том, чтобы запустить свой сервер, о чём я если честно мечтал давно и давно приобрёл книгу как это сделать. Но не было причин его запускать. Очумелые учёные напечатали на. . .	Модель здравосоХранения 6. ESG-повестка и устойчивое развитие; углублённый анализ кадрового бренда anaschu 31.03.2026 В прикрепленном документе раздумья о том, как можно поменять модель в будущем