结合使用Canvas API与History API—

大家都对画图软件不陌生吧，可以在画布上随意涂鸦、绘画，还可以为你画的每一步进行撤销和恢复。今天正好得空，便结合Canvas API 与History API做了一个模拟绘图的示例，当然，这里面我主要讲的还是history API的使用。下面的实例中显示一个canvas元素，用户可以在该元素中随意使用鼠标书写文字或绘制图画，当用户单击一次或连续单击浏览器的后退按钮时，可以撤销当前书写或绘制的最后一笔或多笔，当用户单击或连续单击浏览器的前进按钮时，可以重绘当前书写或绘制的最后一笔或多笔。好了，废话不多说，跟我一起动手做做吧！

1.Html代码及样式

页面中的img元素加载的是一个黑色小圆点图片，这里作为绘图用的笔刷。当用户在canvas元素中按下并连续拖动鼠标左键时，按照用户拖动的轨迹连续绘制该黑色小圆点，这样处理之后会在浏览器中显示用户书写文字或绘制图画时所绘制的每一笔。

2.javascript脚本代码

A) 首先要获取页面canvas元素，img元素，引用canvas上下文context对象，以及用于控制是否继续进行绘制操作的布尔值变量isDrawing，当isDrawing的值为true时代表用户已按下鼠标左键，可以继续绘制，当该值为false时表示用户已松开鼠标左键，停止绘制。

B) 接下来屏蔽用户在canvas元素中通过按下鼠标左键、以手指或书写笔触发的pointerdown事件(pointerdown事件属于一种touch event事件)

C) 然后，监听用户在canvas元素中按下鼠标左键时触发的mousedown事件，并将事件处理函数指定为startDrawing函数；监听用户在canvas元素中移动鼠标时触发的mousemove事件，并将事件处理函数指定为draw函数；监听用户在canvas元素中松开鼠标左键时触发的mouseup事件，并将事件处理函数指定为stopDrawing函数；监听用户单击浏览器的后退按钮或前进按钮时触发的popstate事件，并将事件处理函数指定为loadState函数。代码如下：

写到这里，简单的绘制功能已经完成，不过该页面还是存在一个问题，即当用户在canvas元素中绘制了多笔之后，重新在浏览器的地址栏中输入页面地址(这时浏览器中的canvas元素显示空白图像)，/然后绘制第一笔，之后再单击浏览器的后退按钮时，canvas元素中并不显示空白图像，而是直接显示输入页面地址之前的绘制图像，这样看起来浏览器中的历史纪录并不连贯，因为canvas元素中缺少了一副空白图像。为了修正这个问题，我们在页面打开时就将canvas元素中的空白图像保存在历史记录中，所以有了以下两行代码。

结合使用Canvas API与History API——模拟绘图相关推荐

巧用Html5 History Api解决SPA的SEO问题
背景想当年,我做了一个新媒体网站项目(AIISPO,已下线).跟普通资讯网站不一样的是,老板要求PC端前台的文章阅读模式一定得是瀑布流+模态框.瀑布流指的是以瀑布流的形式将文章罗列出来,而模态框则指 ...
HTML5无刷新修改URL：利用 History API 无刷新更改地址栏
为什么80%的码农都做不了架构师?>>> HTML5 新增的历史记录 API 可以实现无刷新更改地址栏链接,配合 AJAX 可以做到无刷新跳转. 简单来说:假设当前页面为ren ...
大熊君学习html5系列之------History API（SPA单页应用的必备------重构完结版）
一,开篇分析 Hi,大家好!大熊君又和大家见面了,(*^__^*) 嘻嘻--,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例, 让大家一步一步的体会" ...
java局部刷新session过期_Ajax局部页面刷新和History API结合的陷阱
ajax在现代网站已经得到非常普遍地应用,主要的好处大家都知道(异步加载数据,不用刷新整个浏览器,更小的数据传输尺寸).对于那些老网站或者老项目来说全盘改造成ajax并不现实,于是就有了"局 ...
「前端」History API与浏览器历史堆栈管理
本文由尚妆前端开发工程师欲休撰写本文发表于尚妆博客,欢迎订阅! 移动端开发在某些场景中有着特殊需求,如为了提高用户体验和加快响应速度,常常在部分工程采用SPA架构.传统的单页应用基于url的hash ...
用history api偷换浏览器历史记录
HTML5提供了新的history接口,例如pushstate,以及popstate.通常情况下,浏览器的历史记录能保存访问历史,但是因为有了history api,pushstate和replace ...
Canvas学习：封装Canvas绘制基本图形API
Canvas学习:封装Canvas绘制基本图形API Canvas Canvas学习从前面的文章中我们了解到,通过Canvas中的CanvasRenderingContext2D对象中的属性和方法, ...
使用 History API 构建 JavaScript 路由器
在本文中,我们将构建一个客户端路由系统.客户端路由是一种路由类型,用户在其中导航应用程序,即使页面的 URL 发生更改,也不会重新加载整个页面,而是显示新内容. 为了构建它,我们需要一个简单的服务器来 ...
java api 设计_Java API设计实践
使你的API在模块化和非模块化Java环境中都可用在优锐课的java学习分享中,对微服务有了更深层次的新概念.关于API设计实践一点就通了. 介绍了解设计Java API时应应用的一些API设计实 ...
html5在线api,HTML5 历史记录API
HTML5 历史记录API HTML5历史记录API的使用方法,在线实例演示HTML5历史记录API如何使用.浏览器的兼容性.语法定义及它的属性值详细资料等. HTML5历史记录API使您可以通过Ja ...

结合使用Canvas API与History API——模拟绘图

结合使用Canvas API与History API——模拟绘图相关推荐

最新文章

热门文章