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'を1つ設定してからすべての座標セットをループし、その '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 Canvas - 色を変更する

答えて

関連する問題