手机端连线题html5,基于Canvas的html5连线题

1.[图片] 4.png

2.[图片] 0.png

3.[图片] 1.png

4.[图片] 2.png

5.[图片] 3.png

6.[代码][JavaScript]代码

基于canvas连线题

小熊猫

床前明月光

456487

疑是地上霜

456487

竹子

预览

回退

重置

左侧画布连线

基于canvas连线题

55555555555

1111111111111111111

44444444444

33333333333333

6666666666666

222222222222222

44444444444

3333333333333333

222222222222

666666666666

11111111111111111

555555555555

预览

回退

重置

左侧画布连线

预览看见的canvas生成图片，保存到服务器

canvas参数为你的canvas对象，返回一个图片对象，你可以将这个image放到网页结构中，如果要保存图像，可以将canvas.toDataURL("image/png")返回的base64格式的图片数据放到input(type=hidden)中，用户点击上传按钮(或设置表单自动提交)，将base64格式的数据上传

形如：

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABbSURBVDhPY8AFMvJL/oMwlEs8yMgvJVcjyMbSYaERogCC0/OAGIkPwaVQMUhgQWiggWANIAzUhKoBpgjdMIhBUHsxAdxkUgHMBiiXeDAQNkICAsolHuC3kYEBAG/wdxC2W2tUAAAAAElFTkSuQmCC

服务器端接收到字符串(以上字符串可以直接在浏览器中打开，IE低版本就算了，能用canvas的浏览器都可以)后根据data:image/png得知应该保存的文件类型扩展名(png)，然后将base64,后面的base64编码字符串解码(后端语言实现，如PHP用base64_decode()函数)，将解码后的二进制数据以二进制的形式保存到服务器上(图片形式)

如果存数据库，可以直接存base64编码，读取时候解码也行，图片建议以文件形式存储，数据库不适合存大文件

7.[文件] canvas连线题.rar ~ 110KB     下载(437)