Canvas проблемы
Как убрать горизонтальную линию?
И почему разработчики, решили использовать радианы, а не градусы? https://jsfiddle.net/0kujfucq/ |
|
Как ещё сделать, что бы, когда функция заново запустилась, то предыдущее изображение удалилось?
https://jsfiddle.net/53rvaLas/ |
context.clearRect(0, 0, canvas.width, canvas.height);Вообще рекомендую почитать любой урок по canvas от начала и до конца, там не так много функций и таких элементарных вопросов не останется. |
Почему текст не по центру?
https://jsfiddle.net/cu962314/ |
DivMan, потому что 0,0 - это не центр, а левый верхний угол. Вроде очевидно. *с сомнением пожал плечами*
|
Почему у снеговика нос не раскрашивается в оранжевый цвет, если я ему прописал 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>
|
Правильно ли я сделал?
Нужно написать код, рисующий окружность радиусом в 3 пикселя под курсором мышки каждый раз, когда вы передвигаете мышку над «холстом». Поскольку это событие возникает при малейшем перемещении курсора, окружности по мере движения мышки будут сливаться в линию. |
<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>
|
| Часовой пояс GMT +3, время: 11:46. |