Question

Q 1：是否有可能有一个不可见的矩形？

Q2：可以在方法上调用方法吗？见下文。

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.fillStyle = "";
ctx.strokeStyle = "";
// as far FF 3.67 goes, no way
// the goal is to fill the rectangle with some text
ctx.fillRect(50,50,50,20).fillText("you rock",250,250);

感谢。

Answer 1

q1：是否可以有一个不可见的矩形？

确实是这样！

ctx.fillStyle = 'rgba(255,255,255,0)';
ctx.fillRect(50,50,50,20);

虽然这也有效，但更简洁：

q2：可以在方法上调用方法吗？

可以想象你可以这样做：

//Naive generic chainer function
//returns this even if the default
//value is significant!
function chain(obj) {
 function F() {}
 F.prototype = obj;
 var cobj = new F();

 for (var i in obj) {
   if (typeof obj[i] == 'function') {
     //Function Bind-ish
     cobj[i] = (function() {
       var method = i;
       return function() {
         this.constructor.prototype[method].apply(this, arguments);
         return this;
       };
     }());
   }
 }
 return cobj;
}


var chained = chain(ctx);   

chained.fillRect(0,0,200,200)
.fillRect(100,100,200,200)
.fillRect(400,400,100,100)
.fillText("I CAN HAS INVISDIBLE??", 250, 250);

但是，为什么要这么做呢？

with (ctx) {
  fillRect(100,100,200,200);
  fillRect(300,300,100,100);
  fillStyle = 'green'; //I CAN SEE
  fillText("SCREW BEST PRACTICES");
}

Answer 2

您似乎正在尝试将canvas元素用作SVG。请尝试使用Raphaël。然后，您的“文本对象”实际上是对象，您可以通过调整其属性来移动它们，还可以定义一个组并在一次操作中将它们全部移动。您还可以将onclick个事件附加到他们身上。

Answer 3

为什么要一个不可见的矩形？我假设您使用fillText()电话作为界限。答案是否定的：一旦你调用fillRect()，画布就没有某个位置存在矩形的概念。将画布视为一个愚蠢的像素集合，仅此而已，仅使用一些辅助方法，因此您不必一次设置一个像素。

Answer 4

您需要某种数据结构来跟踪画布中的文本对象。一旦你在画布上书写，就无法知道你画的是什么对象。您可以获取像素信息但不能获取对象。因此，在画布上绘制时，请跟踪数组中的对象。然后编写一个鼠标处理程序来检测画布上的点击，然后使用数据结构将其映射回来。

Answer 5

你应该查看Canvas.js，它是Rob Larsen的一个小型库，可以启用ctx.chaining， https://github.com/roblarsen/CanvasJS

不可见的矩形，是可能的，当然。我没有看到任何原因。

你可以使strokeStyle =矩形的背景颜色，1px。

它确实需要被填充或抚摸，我很确定。如果你不这样做，那么你用来制作它的方法，rect（）或其他什么方法都将处于上下文状态，所以无论何时你填充或描边，它都将应用于矩形。

使用.save（）和.restore（） - 帮助分离堆栈状态，并缩进代码。在状态堆栈中更容易阅读和跟踪。

HTML5画布挑战！

5 个答案: