html5如何修改画布颜色,HTML5画布 - 更改颜色

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

我希望有人能帮助我:)

game.rabascm.nl

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

Nothing to display

Color:

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

2016-11-24

Rabascm

+0

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

+0

好的，谢谢！完成！ –

+0

问题是你不保存绘制的颜色，只有坐标。在'Redraw'中，你设置了一个'fillStyle'，然后循环遍历所有的坐标集并且只应用** fillStyle **。 –