HTML Canvas 集成得好吗？

发布于 2024-10-27 16:29:28 字数 1072 浏览 1 评论 0原文

我有一个宏伟的计划来制作这个很酷的网站，具有所有这些花哨的功能，我决定使用 HTML canvas b/c 它提供了如此多的灵活性。然而，随着时间的推移，我开始意识到我只是在重新发明轮子，例如手动实现或集成：

鼠标/键盘事件
用户（文本）输入
简单动画（即淡入淡出）
按钮、下拉菜单

第一个，特别是让人们意识到我们有多么认为像 onmouseover 这样的事情是理所当然的。我理解画布的用途——松散地收集在像素操作的保护伞下——所以我想简短地讲一下这个咆哮，我的问题是：还有其他人认为画布不能与所有其他神圣的优点很好地融合吗？ HTML5？在我的脑海中，这里有两个基本的东西可以很好地嵌入到画布中（如果它们已经包含在内，请随时纠正我）

嵌入其他网站：例如，如果我有一个星形，我想要连接其 onlcick 函数来加载网页，然后使用 context.beginPath 和 context.clip 函数使星形“空心” ' 因此该网站在星形内部可见。这可以通过将画布放在 html 页面上（在浮动框架内）并具有透明背景来在画布中实现，但是如果我想要一个由 10x10 颗星组成的网格，并且全部都有自己的网站，该怎么办？如果我想缩放每个网页的大小怎么办？
非矩形元素/小部件：我尝试解决的一件事是圆形文本编辑器。这可以通过 context.beginPath 和 context.clip 函数以及后台的 textentry 或 textarea 来实现但是，信号被画布捕获，并且不会转发到可见但仍然位于底层的 textarea 或 textentry 元素。从技术上讲，捕获每个信号、对其进行评估、从中生成新信号并将其传递到所需目标是可行的，但我根本无法让它发挥作用。如果有一种方法可以将 html 元素嵌入到画布形状中，那将非常有用。 [编辑] 另外，我忘了提及，无法塑造实际的画布元素。例如，如果您在窗口中间画一个圆圈，画布仍然是一个矩形，圆圈之外的区域仍然会遮挡底层内容和/或捕获用户生成的事件

原文

I had this grand scheme to make this cool website with all these bells and whistles, and I decided to use HTML canvas b/c it offers so much flexibility. However, as time wore on, I began to realize that I was just reinventing the wheel, for example manually implementing or integrating:

Mouse/Keyboard events
User (text) input
Simple Animations (ie. fade)
Buttons, drop down menus

The first one, especially makes one realize how much we take for granted things like onmouseover. I understand what the canvas is for --loosely collected under the umbrella of pixel manipulation-- so I guess to cut this rant short, my question is this: Does anyone else think the canvas does not integrate well with all the other godly goodness of HTML5? Off the top of my head, here are two basic things that would be neat to embed in the canvas (please feel free to correct me if they are already included)

Embedding of other websites: For example, If I have a star shape, I want to connect its onlcick function to load a web page, then use the context.beginPath and context.clip functions to make the star 'hollow' so the web site is visible inside the star. This is attainable in the canvas by putting the canvas over the html page (inside a floating frame) and having a transparent background, but what if I want, for example, a grid of 10x10 stars all with their own web site? What if I want to scale the size of each web page?
Non rectangular elements/widgets: One thing I tried to tackle with was a circular text editor. This is attainable with the context.beginPath and context.clip functions, with the textentry or textarea in the background, however, the signals are caught by the canvas, and not relayed through to the visible, but nonetheless underlying, textarea or textentry element. It is technically possible to catch each signal, assess it, generate new signals from it, and pass it onto the desired target, but I could not get it to work at all. It would be very useful if there was a way to embed html elements into a canvas shape. [edit] Also, I forgot to mention that one can not shape the actual canvas element. For example if you draw a circle in the middle of the window, the canvas is still a rectangle, and the areas outside of the circle will still occlude underlying content and/or capture user generated events