График на canvas
Возможно ли на canvas реализовать
1. Полотно с сеткой на фоне (клеточки) 2. Мне надо знать позицию курсора относительно полотна и выводить её в хинте над мышкой 3. При клике на полотно появляется точка координаты которой мы точно знаем и можем получить из вне 4. При повторном клике на эту точку она исчезает Сроки поджимают, желание глубоко изучать canvas сейчас нет, как и времени, так что нагло прошу список методов или в лучшем случае простой пример хотя бы для одного пункта |
курсовик поджимает? :write:
<canvas id="myCan" width="500" height="500" style="border: 2px solid #000000"></canvas>
<button type="button" onclick="drawgrid()">Нарисовать решотку</button>
<button type="button" onclick="clearGrid()">Стереть решотку</button>
<p>Мыша: <span id="x">0</span></p>
<p> <span id="y">0</span></p>
<hr>
</div>
<script>
var can = document.getElementById('myCan');
var ctx = can.getContext('2d');
var step = 20;//шаг решотки
//рисуем
function drawgrid(){
for (var i = step; i<can.width; i+=step){//рисуем вертикальные
ctx.beginPath();
ctx.moveTo(i, 0);
ctx.lineTo(i, can.height);
ctx.closePath();
ctx.stroke();
}
for (var i = step; i<can.height; i+=step){//рисуем Горизонтальные
ctx.beginPath();
ctx.moveTo(0, i);
ctx.lineTo(can.width, i);
ctx.closePath();
ctx.stroke();
}
}
//стираем
function clearGrid(){
ctx.clearRect(0, 0, can.width, can.height);
}
//мыша
can.addEventListener('mousemove', function(evt){
document.getElementById('x').innerHTML = evt.pageX;
document.getElementById('y').innerHTML = evt.pageY;
});
</script>
|
Скорее диплом х)
Теперь остался ещё один основной вопрос, как поставить точку и записать её местоположение и в любой момент стереть её |
var canvas = document.getElementById('canvas'),
ctx = canvas.getContent('2d');
canvas.addEventListener('click', fn, false);
function fn (e) {
var x = e.pageX - canvas.offsetLeft, y = e.pageY - canvas.offsetTop;
}
стереть можно разными способами , например
ctx.fillRect(x, y, w,h)
|
Да, но на фоне решетка, она тоже сотрется, а её трогать не надо, как тут поступить?
|
| Часовой пояс GMT +3, время: 23:39. |