HTML5 Canvas - 如何填充（）一个特定的上下文 [英] HTML5 Canvas - How to fill() a specific context

问题描述

我试图做一个网站的图像是在画布上绘制，然后用户可以按一个按钮ctx.fill（）的某些部分的颜色。我遇到的问题，我只能ctx.fill（）最近创建的形状，通常不是我想要的形状。

这里是一个例子。在此代码中（位于 http://build.rivingtondesignhouse.com/piol/test/ ） ）我试图绘制第一个矩形，然后save（）它在堆栈，然后绘制第二个矩形（而不保存它），然后当我的fill（）函数被调用我想恢复（）第一个矩形和ctx.fill（）它有不同的模式。它不工作！

在实践中，我实际上试图填充这个复杂形状的灰色部分，用户在图像绘制后选择的任何颜色，但我认为技术是一样的。 （http://build.rivingtondesignhouse.com/piol/test/justTop.html）

感谢您提供任何帮助！

这里是代码：

 < script type =text / javascript 
 var canvas; 
 var ctx; 
 
 function init（）{
 canvas = document.getElementById（canvas）; 
 ctx = canvas.getContext（2d）; 
 draw（）; 
} 
 
 
 function draw（）{
 ctx.fillStyle ='＃FA6900'; 
 ctx.shadowOffsetX = 5; 
 ctx.shadowOffsetY = 5; 
 ctx.shadowBlur = 4; 
 ctx.shadowColor ='rgba（204，204，204，0.5）'; 
 ctx.fillRect（0,0,15,150）; 
 ctx.save（）; 
 
 ctx.fillStyle ='＃E0E4CD'; 
 ctx.shadowOffsetX = 10; 
 ctx.shadowOffsetY = 10; 
 ctx.shadowBlur = 4; 
 ctx.shadowColor ='rgba（204，204，204，0.5）'; 
 ctx.fillRect（30,0,30,150）; 
} 
 
 function fill（）{
 var image = new Image（）; 
 image.src =http://www.html5canvastutorials.com/demos/assets/wood-pattern.png; 
 image.onload = drawPattern; 
 function drawPattern（）{
 ctx.restore（）; 
 ctx.fillStyle = ctx.createPattern（image，repeat）; 
 ctx.fill（）; 
} 
} 
 
 init（）; 
  

解决方案>

有一些误解，我们需要清除，然后才能回答问题。

save（）和 restore（）不保存和恢复画布位图。相反，它们保存并恢复在画布上下文中设置的所有属性。

例如

  ctx.fillStyle ='red'; 
 ctx.save（）; //保存fillstyle是红色的事实
 ctx.fillStyle ='blue'; // change the fillstyle 
 ctx.fillRect（0,0,5,5）; //绘制一个蓝色矩形
 ctx.restore（）; //恢复旧的上下文状态，因此fillStyle返回为红色
 ctx.fillRect（10,0,5,5）; //绘制一个红色矩形//绘制一个红色矩形
  

查看代码这里。

所以你不是保存一个矩形）通过调用 save（）。您可以保存位图的唯一方法是将其（或其一部分）绘制到另一个画布（使用 anotherCanvasContext.drawImage（canvasIWantToSave，0，0））或保存足够的信息，您可以通过适当的更改重绘整个场景。

这里有一个例子，你可以重新安排你的代码，想： http://jsfiddle.net/xwqXb/

I'm trying to make a website where an image is drawn on Canvas, then later the user is able to press a button to ctx.fill() certain parts of it with color. I'm running into issues where I can only ctx.fill() the most recently created shape which often isn't the shape I want.

Here's an example. In this code (live at http://build.rivingtondesignhouse.com/piol/test/) I'm trying to draw the first rectangle, then save() it on the stack, then draw the second rectangle (and don't save it), then when my fill() function is called I want to restore() the first rectangle and ctx.fill() it with a different pattern. It doesn't work!

In practice, I'm actually trying to fill the gray part of this complex shape with any color the user chooses AFTER the image has been drawn, but I think the technique is the same. (http://build.rivingtondesignhouse.com/piol/test/justTop.html)

Thanks in advance for any help!!!

Here's the code:

<script type="text/javascript">
var canvas;
var ctx;

function init() {
    canvas = document.getElementById("canvas");
    ctx = canvas.getContext("2d");
    draw();
}


function draw() {   
    ctx.fillStyle = '#FA6900';
    ctx.shadowOffsetX = 5;
    ctx.shadowOffsetY = 5;
    ctx.shadowBlur    = 4;
    ctx.shadowColor   = 'rgba(204, 204, 204, 0.5)';
    ctx.fillRect(0,0,15,150);
    ctx.save();

    ctx.fillStyle = '#E0E4CD';
    ctx.shadowOffsetX = 10;
    ctx.shadowOffsetY = 10;
    ctx.shadowBlur    = 4;
    ctx.shadowColor   = 'rgba(204, 204, 204, 0.5)';
    ctx.fillRect(30,0,30,150);
}

function fill(){
    var image = new Image();
    image.src = "http://www.html5canvastutorials.com/demos/assets/wood-pattern.png";
    image.onload = drawPattern;
    function drawPattern() {
        ctx.restore();
        ctx.fillStyle = ctx.createPattern(image, "repeat");
        ctx.fill();
    }
}

init();

解决方案

There are a few misunderstands that we need to clear up before I can answer the question.

save() and restore() do not save and restore the canvas bitmap. Instead they save and restore all properties that are set on the canvas context and that's all!

For example

ctx.fillStyle = 'red';
ctx.save(); // save the fact that the fillstyle is red
ctx.fillStyle = 'blue'; // change the fillstyle
ctx.fillRect(0,0,5,5); // draws a blue rectangle
ctx.restore(); // restores the old context state, so the fillStyle is back to red
ctx.fillRect(10,0,5,5); // draws a red rectangle // draws a red rectangle

See that code live here.

So you aren't saving a rectangle (or anything drawn) by calling save(). The only way you you can save the bitmap is by drawing it (or part of it) to another canvas (using anotherCanvasContext.drawImage(canvasIWantToSave, 0, 0)) or by saving enough information that you can redraw the entire scene with the appropriate changes.

Here is an example of one way you could re-structure your code so that it does what you want: http://jsfiddle.net/xwqXb/

这篇关于HTML5 Canvas - 如何填充（）一个特定的上下文的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！