Question

我发现了这个错误https://i.gyazo.com/77b934223522404fcb437efdbeb3f3d0.mp4，我试图修复它。但我所做的一切都没有用。

改变颜色时，场内当前的颜色不得改变。

我希望有人可以帮助我:)。

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

Answer 1

简单的修复方法是将另一个带有颜色数据的数组添加到脚本中。像这样。

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()时对颜色数组进行iterrate。

如果我这样做，我宁愿将每个“点”分组到一个对象中，然后将这个点存储在一个数组中，如：

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

我希望它有所帮助。

HTML5 Canvas - 改变颜色

1 个答案: