Question

所以我有一些基本画布和<input type="color">，我想改变颜色的某个形状on change的颜色。

这是我的代码

var colorRect = '#000';

var ball = document.getElementById("canvas");
var ctx = ball.getContext("2d");
var ctx1 = ball.getContext("2d");
ctx1.fillStyle = colorRect;
ctx1.fillRect(0,0,200,200);
ctx1.save();

//Left eye
ctx.fillStyle = '#fff';
ctx.fillRect(50,80,10,10);

//Right eye
ctx.fillStyle = '#fff';
ctx.fillRect(150,80,10,10);

//Nose
ctx.fillStyle = '#fff';
ctx.fillRect(100,110,10,20);

//Mouth

ctx.fillStyle = 'red';
ctx.fillRect(60,150,100,10);

$('#favcolor').on('change',function(){
  colorRect = $(this).val();
  ctx1.fillStyle = $(this).val();
  ctx1.fillRect(0,0,200,200);
});

在这里你可以看到它：http://jsbin.com/inewum/1问题是我认为它会覆盖所有东西，因为我再也看不到眼睛和嘴巴......我只想更新它的风格。< / p>

Answer 1

你必须重绘它。创建绘图例程和颜色状态变量。当你改变一些东西时，只需用新颜色重新绘制它。

您只需更改上下文填充样式并在其上绘制一个矩形。这就是眼睛和嘴巴消失的原因。

更改为此并查看DEMO：

$(function () {

    draw();
    $('#favcolor').on('change', function () {
        colorRect = $(this).val();
        draw();
    });

});

var colorRect = '#000';

function draw() {

    var ball = document.getElementById("canvas");
    var ctx = ball.getContext("2d");
    var ctx1 = ball.getContext("2d");
    ctx1.fillStyle = colorRect;
    ctx1.fillRect(0, 0, 200, 200);
    ctx1.save();

    //Left eye
    ctx.fillStyle = '#fff';
    ctx.fillRect(50, 80, 10, 10);

    //Right eye
    ctx.fillStyle = '#fff';
    ctx.fillRect(150, 80, 10, 10);

    //Nose
    ctx.fillStyle = '#fff';
    ctx.fillRect(100, 110, 10, 20);

    //Mouth

    ctx.fillStyle = 'red';
    ctx.fillRect(60, 150, 100, 10);
}

Answer 2

所有HTML5画布图形（矩形，圆形，直线等）都不是实体对象，您无法使用JavaScript DOM对象进行操作。因此，您必须重绘整个画布图像以更改单独元素的选项。

Answer 3

也许SVG更符合您的需求，您可以像处理任何旧HTML一样处理SVG元素。

以下是您使用SVG http://jsbin.com/inewum/15/edit

完成的示例

该脚本可以简化为：

$('#favcolor').on('change',function(){
    $('.face').css({
      'fill': $(this).val()
    });
});

画布可以替换为：

<svg height=200 width=200 viewBox='0 0 200 200'>
   <rect width=200 height=200 class="face" />
   <!-- left eye -->
   <rect x=50 y=80 width=10 height=10 fill="white"/>
   <!-- right eye -->
   <rect x=150 y=80 width=10 height=10 fill="white"/>
   <!-- nose -->
   <rect x=100 y=110 width=10 height=20 fill="white"/>
   <!-- mouth -->
   <rect x=60 y=150 width=100 height=10 fill="red"/>
</svg>

更新画布样式

3 个答案: