2

所以我有一些基本的画布和一个<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问题是我认为它会覆盖一切，因为我再也看不到眼睛和嘴巴了......我只想更新风格它。

4

3 回答 3

2

你必须重新绘制它。创建您的绘图例程和颜色状态变量。当您更改某些内容时，只需用新颜色重新绘制它。

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

更改为这个并查看演示：

$(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);
}
于 2013-02-22T21:18:58.163 回答
1

所有 HTML5 画布图形（矩形、圆形、线条等）都不是实体对象，您不能像 JavaScript DOM 对象那样对它们进行操作。因此，您必须重新绘制整个画布图像以更改单独元素的选项。

于 2013-02-22T21:40:36.843 回答
0

也许 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>
于 2013-03-02T15:12:47.557 回答