HTML5 Canvas - Изменение цвета

У меня есть эта ошибка https://i.gyazo.com/77b934223522404fcb437efdbeb3f3d0.mp4, и я попытался ее исправить. Но все, что я делаю, не работает.HTML5 Canvas - Изменение цвета

Текущий цвет в полете не менялся при изменении цвета.

Я надеюсь, что кто-то может помочь мне :)

<!-- begin snippet: js hide: false console: true babel: false --> 

<!-- language: lang-js --> 

<html> 
<head> 
<title> 
game.rabascm.nl</title> 
<style> 
* { font-family: verdana; font-size: 10pt; COLOR: gray; -webkit-touch-callout: none; 
    -webkit-user-select: none; 
    -khtml-user-select: none; 
     -moz-user-select: none; 
     -ms-user-select: none; 
      user-select: none; } 
b { font-weight: bold; } 
canvas { border: 1px solid gray;cursor: crosshair;} 
td { text-align: center; padding: 25;} 
</style> 
<script src="jscolor.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
</head> 
<body> 
<center> 
<br><br> 
<span id="display">Nothing to display</span> 
<br><br> 
Color: <input class="jscolor" id="colormixer" value="000000"><br> 
<table> 
<canvas width="400" height="400" id="canvas" ></canvas> 
</table> 
<br><br> 
</center> 

<script> 
     var canvas = document.getElementById('canvas'); 
     var context = canvas.getContext('2d'); 


$('#canvas').mousedown(function(e){ 
    var mouseX = e.pageX - this.offsetLeft; 
    var mouseY = e.pageY - this.offsetTop; 

    paint = true; 
    addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop); 
    redraw(); 
}); 


$('#canvas').mousemove(function(e){ 
    if(paint){ 
    addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true); 
    redraw(); 
    } 
}); 

$('#canvas').mouseup(function(e){ 
    paint = false; 
}); 

$('#canvas').mouseleave(function(e){ 
    paint = false; 
}); 

var clickX = new Array(); 
var clickY = new Array(); 
var clickDrag = new Array(); 
var color = new Array(); 
var paint; 

function addClick(x, y, dragging) { 
    clickX.push(x); 
    clickY.push(y); 
    clickDrag.push(dragging); 
    color.push(getCurrentColor()); 
} 

var points = new Array(); 
$('#canvas').mousemove(function(e) { 
    if (paint) { 
    var point = { 
     x: e.pageX - this.offsetLeft, 
     y: e.pageY - this.offsetTop, 
     color: getCurrentColor() 
    }; 
    points.push(point); 
    redraw(); 
    } 
}); 

function getCurrentColor(){ 
    return document.getElementById("colormixer").value; 
} 


function redraw(){ 
var color = document.getElementById("colormixer").value; 
    context.fillStyle = "#" + color; 



    for(var i=0; i < clickX.length; i++) {   
    context.beginPath(); 
    if(clickDrag[i] && i){ 
     context.moveTo(clickX[i-1], clickY[i-1]); 
    }else{ 
     context.moveTo(clickX[i]-1, clickY[i]); 
    } 

var mousePosx = clickX[i]; 
var mousePosy = clickY[i]; 

mousePosx = mousePosx.toString().slice(0, -1) * 10; 
mousePosy = mousePosy.toString().slice(0, -1) * 10; 

var mousePosx = mousePosx.toString().split(".")[0]; 
var mousePosy = mousePosy.toString().split(".")[0]; 



    context.fillRect(mousePosx, mousePosy, 10, 10); 
document.getElementById("display").innerHTML = "Cords: " + mousePosx + ":" + mousePosy; 
} 


} 




var bg = new Image(); 
bg.onload = function() { 
for (i = 0; i < 20; i++) { 
for (y = 0; y < 20; y++) { 
var top = y * 20; 
var left = i * 20; 
context.drawImage(bg, left, top, 20, 20); 
}}} 
bg.src = 'http://www.rabascm.nl/game/bg.png'; 
</script> 
</body> 
</html>

источник

2016-11-24 Rabascm

, пожалуйста, предоставьте код здесь, а не снаружи. –

Хорошо, спасибо! Готово! – Rabascm

Проблема в том, что вы не сохраняете цвет ничьей, а только координаты. В «Redraw» вы устанавливаете один «fillStyle», а затем перебираете все ваши координатные множества и применяете ** только этот «fillStyle» **. –

Легко исправить было бы добавить еще один массив с цветовыми данными в сценарии. Как это.

var clickX = new Array(); 
var clickY = new Array(); 
var clickDrag = new Array();´ 
var color = new Array(); 

function addClick(x, y, dragging) { 
    clickX.push(x); 
    clickY.push(y); 
    clickDrag.push(dragging); 
    color.push(getCurrentColor()); 
} 

function getCurrentColor(){ 
    return document.getElementById("colormixer").value; 
}

А потом iterrate по массиву цвета тоже при выполнении redraw().

Если бы я должен был сделать это, я предпочел бы группу, каждая «точка» в объект, а затем сохранить эту точку в массиве, как:

var points = new Array(); 
$('#canvas').mousemove(function(e) { 
    if (paint) { 
    var point = { 
     x: e.pageX - this.offsetLeft, 
     y: e.pageY - this.offsetTop, 
     color: getCurrentColor(); 
    }; 
    points.push(point); 
    redraw(); 
    } 
});

А затем перебрать этой points вместо. На мой взгляд, это сделает ваш код немного легче читать.

Надеюсь, это помогло.

источник

2016-11-24 12:23:33 fgummesson

Так много спасибо за помощь, но он пока не работает. Я сделал то, что дал мне. Но я все еще участвую в JS и Canvas. Мой пост обновлен! Пожалуйста, изучите его! – Rabascm

В методе 'redraw' вы должны использовать массив' points', чтобы получить координату и цвет. – fgummesson

Нравится, как? Спасибо за помощь – Rabascm

HTML5 Canvas - Изменение цвета

ответ

Смежные вопросы