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>

來源

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; 
}

然後在做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畫布 - 更改顏色

回答

相關問題