HTML5画布 - 更改颜色

问题描述：

我发生了此错误https://i.gyazo.com/77b934223522404fcb437efdbeb3f3d0.mp4，我试图修复它。但是我所做的一切都不起作用。HTML5画布 - 更改颜色

现场颜色在改变颜色时并未改变。

我希望有人能帮助我:)

<!-- 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>

请在此处提供代码，而非外部。 –

好的，谢谢！完成！ – 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; 
}

然后在做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代替。在我看来，它会让你的代码更容易阅读。

我希望它有帮助。

非常感谢您的帮助，但还没有奏效。我做了你给我的东西。但我仍然在学习JS和Canvas。我的帖子已更新！请看看它！ – Rabascm

在你的'redraw'方法中，你必须使用'points'数组来获取坐标和颜色。 – fgummesson

喜欢如何？感谢您的帮助 – Rabascm

HTML5画布 - 更改颜色

相关推荐