整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
过使用tldraw和gpt-4-vision API，根据用户绘制的线框生成HTML，在Next.js框架下运行，使用OpenAI API密钥访问GPT-4 Vision API
官网：https://www.draw-a-ui.com/
Github: https://github.com/SawyerHood/draw-a-ui
周在给学生讲授JavaScript课程中setInterval方法时，想到了我们在网上看到的各类GIF动图比较有意思，就将其引入到教学中，教学内容设计如果通过HTML5与JavaScript实现网页类似GIF效果的动态图。于是在网上搜集了部分gif格式动图，将每一个Gif动图分解为一组jpg格式图片，再采用setInterval与html5 Canvas进行动画的实现。通过学习可以让学生进一步了解canvas动画实现的过程与原理。并将其发布到头条，也希望对有兴趣的初学者了解HTML5 Canvas等有所帮助。图片分组图片素材如下：
素材一
实现动画的素材我们已经给出，主要通过gif动图导出一组图片，下面对html5动画实现过程进行简单说明。
实现其动画的基本思路是通过HTML5提供的canvas元素进行图片的绘制与展示，借助setInterval方法实现间隔指定时间调用新的图片实现重新绘图。其中绘图主要使用drawImage方法进行绘图，最终通过图片依次重绘实现动画效果。具体实现过程如下：
在页面body部分添加Canva标签，设置其id属性为canv，宽度为600，高度为400,编写代码描述如下图：
添加画布元素
canvas浏览效果
使用Canvas借助JavaScript提供的drawImage方法进行绘图，需要提供要绘制的图片资源即绘图的坐标位置。该方法原型如下：
drawImage方法原型
因此我们需要加载图片资源，本例由于需要调用多个img实现定时不同图片的绘制，因此我们可以使用数组存储所加载的图片资源。本例图片数量为14，因此我们数组长度为14。使用素组存储图片实现代码如下：
加载图片资源代码
本例设计在页面加载时自动播放动画，因此需要在JavaScript脚本中添加页面onload事件，在事件中编写绘图相关代码，主要代码包括获取画布canva与实例化绘图对象context。部分代码描述如下：
onload事件及绘图初始化
使用setInterval方法实现动画主要需要定义回调函数与回调函数触发执行的周期，本例中我们使用匿名函数作为回调函数，触发周期设置为100毫秒。setInterval函数定义如下：
setInterval函数
在定义完函数之后可在其匿名函数函数体部分写入绘图方法dramImage(),实现周期调用不同图片资源进行绘图，最终展示出动画效果。为了保证循环调用14张图片，我们需要设置一计数全局变量i，由于我们图片采用数组存储，下标为数组，且从0-13进行编号，因此当计数值小于13时自动+1，指向下一数组下标，当为13时，设置计数值为0，回到数组第一元素，最终实现数组访问下标的循环。setInterval实现完整代码如下：
setInterval完整代码
HTML动画效果展示
本头条号长期关注编程资讯分享；编程课程、素材、代码分享及编程培训。如果您对以上方面有兴趣或代码错误、建议与意见，可以联系作者，共同探讨。期待大家关注！如需案例完整代码请关注并私信，往期前端设计文章链接如下：
rawio是一款强大的图表绘制软件，支持在线云端版本以及windows, macOS, linux安装版。 如果想在线直接使用，则直接输入网址draw.io或者使用drawon(桌案), drawon.cn内部完整的集成了drawio的所有功能，并实现了云端存储，以及在线共创，分享，协作的功能。
看板能够把大项目，大工程拆解成一个个的小的任务，你也可以设置优先级，跟进他们的完成情况。 通过看板可以在项目协作过程中获得更多的好处。看板能够帮助每个人可视化工作流， 项目的状态，以及当前的工作负载。
看板是一种方法论， 或者一个系统， 通常被用于项目管理，产品经理，敏捷开发，或者系统开发工程师，设计师和内容营销人员。 几乎所有的商业领域都会使用这个方法去跟进工作， 识别瓶颈， 改善过程。
你可以使用不同的方式，画一个远程的看板，然后一起去协作——你也不必使用简单的看板模板，如下所展示。 你可以使用简单的粘性贴纸类的图形，使用不同的颜色的矩形， 列举元素， 实体表格图形——以你便捷舒服的方式去使用。
然而， 在drawio或者drawon中，简单的看板模板在绘制中。 将根据任务所在的列(泳道或状态)自动为任务上色，并相应地更新标签文本。
注意，你不能限定看板只有三列数据，列可以动态根据需求添加。 模板使用泳道（列）自定义的图形属性去设置标签文本和泳道的颜色。
删除任务：选择任务， 按下Delete偶然 Backspace键
团队可以远程的工作，并在看板上进行协作。 增加外部的网站连接，或者文档， 或者增加连接到其他图表页面， 表决并设置优先级。
删除列： 选择列（泳道）， 点击Delete或者Backspace
在列上改变任务的颜色
任务的颜色会去匹配泳道的填充色，
在任务标签上改变状态文本
如上面所属， 状态文字在简单的看板上是一个占位符。 当你在一个任务上选择文本， 你可以看到文字status会被百分比符号包围： %status%
在泳道的自定义属性中， 文本会被代替。
注意： 列的标题不会被自动设置， 选择列，开始输入文字覆盖列的标题。
之后的文章中， 你将会学习更多的自定义属性和占位符。
有很多不同的drawio的集成，使用这些工具集成，你可以使用看板。 drawon.cn中集成了drawio。
在你选择工作的地方嵌入你的看板： HTML页面， VSCode和GitHub项目。 谷歌Workplace. Microsoft Office， Atlassian Confluence， Notion pages ， 国内的drawon。这些都可以使用drawio的看板。
如果你想把看板或者drawio嵌入到其他应用程序中。 你可以阅读相关的文章。
使用最小化或者草稿编辑主题， 会默认去掉网格， 这让看板感觉更像一个便利贴。 如下图所示
关于更多可以在drawon中使用。打开drawon.cn使用。
*请认真填写需求信息，我们会在24小时内与您取得联系。
