lhh_12345的博客

my first canvas projectbody{ width:100%;height:100%; background:#ac9f94;}#drawing{display:block;margin:40px auto 0 auto; background:#ac9f94;}你看不见图片的时候就会看见我 //第一步找到canvasvar drawing=docume

很多人都有这样的疑问，基于HTML5 Canvas实现的元素怎么和用户进行交互？在这里我们用HT for Web（http://www.hightopo.com/guide/guide/core/beginners/ht-beginners-guide.html）给大家示例。

相信仍旧有很多人看着HT开发的各种炫酷效果，却无从着手，所以今天的主题是让小白也能应用我们的HT做出简单的图形界面。

用户鼠标移入时，有弹出框出现，这样的场景很常见。这在处理HTML元素实现时简单，但是如果是对HTML5 Canvas 构成的图形进行处理，这种方法不再适用，因为Canvas使用的是另外一套机制，无论在Canvas上绘制多少图形，Canvas都是一个整体。而图形本身实际都是Canvas的一部分，不可单独获取，所以也就无法直接给某个图形增加JavaScript事件。然而，在HT for Web中，这种

在上次的文章中，提到场景图是基于这个麻雀虽小五脏俱全的“ HTML5 拓扑编辑器”（）和“矢量编辑器”（）进行扩展出满足我需求的拓扑编辑器，看到这里，大家或许对怎么扩展编辑器有疑问，所以，今天就以一个例子介绍编辑器的扩展，先附上Demo：在这个 Demo 中，用户点击工具条上的元素后，在下方画布中拖动鼠标可以生成相应的图元，多种元素自由组合可以做个简易的农场。素材均是网上搜索 png