15.10.2016, 20:41
|
|
Профессор
|
|
Регистрация: 08.03.2016
Сообщений: 429
|
|
|
Canvas проблемы
Как убрать горизонтальную линию?
И почему разработчики, решили использовать радианы, а не градусы?
https://jsfiddle.net/0kujfucq/ |
|
15.10.2016, 20:59
|
 |
Тлен
|
|
Регистрация: 02.01.2010
Сообщений: 6,589
|
|
Например так, или можно использовать moveTo().
Ты не закрывал путь перед началом рисования следующего круга, потому переход от одного радиуса к другому тоже считался частью пути.
Вообще круги рисовать лучше соответствующей функцией.
А радианы всегда удобнее в машинных вычислениях.
__________________
29375, 35
Последний раз редактировалось Aetae, 15.10.2016 в 21:18.
|
|
15.10.2016, 21:08
|
|
Профессор
|
|
Регистрация: 08.03.2016
Сообщений: 429
|
|
Как ещё сделать, что бы, когда функция заново запустилась, то предыдущее изображение удалилось?
https://jsfiddle.net/53rvaLas/ |
|
15.10.2016, 21:17
|
|
Тлен
|
|
Регистрация: 02.01.2010
Сообщений: 6,589
|
|
context.clearRect(0, 0, canvas.width, canvas.height);
Вообще рекомендую почитать любой урок по canvas от начала и до конца, там не так много функций и таких элементарных вопросов не останется.
__________________
29375, 35
|
|
16.10.2016, 10:13
|
|
Профессор
|
|
Регистрация: 08.03.2016
Сообщений: 429
|
|
|
|
|
16.10.2016, 11:26
|
|
Тлен
|
|
Регистрация: 02.01.2010
Сообщений: 6,589
|
|
|
DivMan, потому что 0,0 - это не центр, а левый верхний угол. Вроде очевидно. *с сомнением пожал плечами*
__________________
29375, 35
|
|
23.12.2016, 00:11
|
|
Профессор
|
|
Регистрация: 08.03.2016
Сообщений: 429
|
|
Почему у снеговика нос не раскрашивается в оранжевый цвет, если я ему прописал ctx.fill()?
https://jsfiddle.net/bxa1zrbq/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<canvas id="canvas" width="200" height="400"></canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var circle = function (x, y, radius, color) {
ctx.strokeStyle = color;
ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI * 2, false);
};
ctx.lineWidth = 2;
circle(100, 100, 50, 'black');
ctx.stroke();
circle(80, 90, 10, 'black');
ctx.fill();
circle(120, 90, 10, 'black');
ctx.fill();
circle(100, 110, 10, 'orange');
ctx.fill();
circle(100, 220, 70, 'black');
ctx.stroke();
circle(100, 195, 10, 'black');
ctx.fill();
circle(100, 220, 10, 'black');
ctx.fill();
circle(100, 245, 10, 'black');
ctx.fill();
</script>
</body>
</html>
|
|
23.12.2016, 13:46
|
|
Профессор
|
|
Регистрация: 08.03.2016
Сообщений: 429
|
|
|
Правильно ли я сделал?
Нужно написать код, рисующий окружность радиусом в 3 пикселя под курсором мышки каждый раз, когда вы передвигаете мышку над «холстом».
Поскольку это событие возникает при малейшем перемещении курсора,
окружности по мере движения мышки будут сливаться в линию.
Последний раз редактировалось DivMan, 23.12.2016 в 13:49.
|
|
23.12.2016, 13:48
|
|
Профессор
|
|
Регистрация: 08.03.2016
Сообщений: 429
|
|
<script>
var clickHandler = function () {
var canvas = document.createElement('canvas');
canvas.width = 9;
canvas.height = 9;
canvas.setAttribute('class', 'canvas')
document.body.appendChild(canvas)
var canvas = document.querySelectorAll("canvas");
for(var i = 0; i < canvas.length; i++){
var ctx = canvas[i].getContext("2d");
ctx.lineWidth = 2;
ctx.strokeStyle = "Green";
ctx.beginPath();
ctx.arc(5, 5, 3, 0, Math.PI * 2, false);
ctx.stroke();
}
};
document.addEventListener('mouseover', clickHandler)
</script>
|
|
|
|
