如何获取HTML Canvas中的旧生成元素的引用？ [英] How do I get reference of old generated elements in HTML Canvas?

问题描述

看看这个例子：

  var c = document.getElementById（myCanvas）; 
 var ctx = c.getContext（2d）; 
 
 //第一个矩形创建
 ctx.fillRect（20,20,150,100）; 
 
 //创建第二个矩形
 ctx.fillRect（20,150,150,100）; 
 
 //创建第三个矩形
 ctx.fillRect（20,300,150,100）; 
  

我在这里创建了三个矩形。创建第三个矩形后，我想旋转第一个矩形。如何获取第一个矩形的引用？

解决方案

画布只是一个哑像素的网格。它不明白它上面画的是什么形状。您的代码（或您的代码使用的库）必须跟踪您绘制的形状。

相反，它听起来像是您希望库创建场景图，如 EaselJS ， Paper.js 或 KineticJS 。这些库将维护一个数据结构，用于跟踪画布上已绘制的形状，然后当您想操纵这些形状时，它们将重新绘制它们。

Take a look at this example:

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

    // First rectangle created    
    ctx.fillRect(20,20,150,100);

    // Second rectangle created    
    ctx.fillRect(20,150,150,100);

    // Third rectangle created    
    ctx.fillRect(20,300,150,100);

I created three rectangles here. After creating third rectangle I want to rotate first rectangle. How do i get reference of first rectangle now?

解决方案

A canvas is just a dumb grid of pixels. It doesn't understand what shapes have been drawn on it. Your code (or a library that your code uses) must keep track of the shapes that you've drawn.

Instead, it sounds like you want a library to create a scene graph, like EaselJS, Paper.js, or KineticJS. These libraries will maintain a data structure that tracks what shapes have been drawn on the canvas, and they will then redraw them when you want to manipulate those shapes.

这篇关于如何获取HTML Canvas中的旧生成元素的引用？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！