如何在 HTML Canvas 中获取旧生成元素的引用?

本文介绍了如何在 HTML Canvas 中获取旧生成元素的引用?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

看看这个例子:

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.

相反，听起来您想要一个库来创建 场景图，例如 EaselJS, Paper.js 或 KineticJS.这些库将维护一个数据结构，用于跟踪在画布上绘制了哪些形状，然后在您想要操作这些形状时重新绘制它们.

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.