(2/2)Canvas的交互&存为图片-爬坑篇
需求介绍
page2上的canvas可交互，并实时显示交互结果；
点击下一步，page2消失，page3显示；
page3显示的是一张图片，图片有canvas交互区和另外的一些元素组成。
实现思路
canvas重绘
运用canvas重绘的方法可以实时同步canvas的交互结果。
canvas重绘：在canvas有交互操作时，先清空画布，将canvas中所有的元素都重新画到画布上；
var fillTextArr = function(el){ //清空画布 el.clearRect(0, 0, width, height); el.beginPath(); //绘制 };这里只需绘制封装的cavas元素对象绘制
交互只需操作封装的对象，改变对象的属性，如颜色，文本等。
图片合成
思路
如下图，点击下一步时，将底部元素绘制到cavas，最后将整体canvas取出为图片显示；
合成
合成要进行的操作
将交互区canvas绘制到缓存cachecanvas中
将图片底部绘制到cachecanvas中
cacheCanvas转换为图片
1、3两点都可以用drawImage方法实现
drawImage(_image_, _x_, _y_)drawImage(_image_, _x_, _y_, _width_, _height_)drawImage(_image_, _sourceX_, _sourceY_, _sourceWidth_, _sourceHeight_, _destX_, _destY_, _destWidth_, _destHeight_)//第一个参数表示 标记或者屏幕外图像的 Image 对象，或者是 Canvas 元素。注：src为base64编码的img对象，在微信ios客户端中，被用做drawImage的第一个参数时，不会绘制到canvas上，且不报错
canvas转换成图片
//取出canvas的Base64编码var dataImg = canvas.toDataURL('image/png');重置page3中的
；
img标签可以解析base64编码为图片
$('# result').attr('src', dataImg);BugList
微信中toDataURL的同源限制
微信中执行var dataImg = canvas.toDataURL('image/png');此条语句时，当前的canvas中的图片，不能有跨域的图片资源，例如：
var img = new Image();img.src = "跨域的图片地址"；img.onload = fucntion(){ canvas.drawImage(img,0,0,100,100);}//在微信中时，本行代码不执行。var dataImg = canvas.toDataURL('image/png');微信长按保存失败
微信安卓客户端长按保存base64编码格式的图片时，保存失败
ios长按保存正常
解决：将base64编码给后台，后台处理成jpg等常用格式的图片，返回图片保存的地址。
ios点击闪烁
原因：移动端click事件造成；
参考信息
解决办法
给canvas添加样式
canvas { -webkit-tap-highlight-color: rgba(0,0,0,0);}换成touch事件
由于使用的判断点击位置的方法依赖于:layerX 、layerY、offsetX、offsetY
var getEventPosition = function(ev){ var x, y; if (ev.layerX || ev.layerX == 0) { x = ev.layerX; y = ev.layerY; } else if (ev.offsetX || ev.offsetX == 0) { // Opera x = ev.offsetX; y = ev.offsetY; } return {x: x, y: y}; };touch事件对layerX 、layerY、offsetX、offsetY支持测试如下(此处未深究，仅供参考)：
ios微信 touchstart的e.touches[0]支持，安卓不可以
微信，ios、安卓都的click都支持上述函数，都有延迟，但是ios会闪烁
微信，ios、安卓的tap都不支持上述事件
文中若有错误，还请各位大侠及时告知。
关键字：html5
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！