H5 Canvas移动端的自定义画板
在线测试地址:http://huluwa-test.oss-cn-hangzhou.aliyuncs.com/pdf/index.html#/qrcode由于技术不好,只能做出这个鬼样子,希望大神们别介意(线上测试是用vue来写的 还处于学习阶段 不会写 还处于开发阶段)1.这个是线上地址打开的页面2.这是扫描二维码后手机打开的界面(不要用微信去扫,微信显示不安全 用支付宝或其...
·
在线测试地址:http://huluwa-test.oss-cn-hangzhou.aliyuncs.com/pdf/index.html#/qrcode
由于技术不好,只能做出这个鬼样子,希望大神们别介意(线上测试是用vue来写的 还处于学习阶段 不会写 还处于开发阶段)
1.这个是线上地址打开的页面
2.这是扫描二维码后手机打开的界面(不要用微信去扫,微信显示不安全 用支付宝或其他的可以出来页面)
3.当手机页面绘制忘了你想要绘制的东西,点击提交 PC端页面就会变成这个样子啦 (达到了及时更新的效果)
Html5的canvas移动端自定义内容画板,还可以将图片保存到本地哦!!!
最近的需求是手机上画好内容,图片保存到本地,百度了很久,好像都没有找到合适的代码,
百度找到的全是支持pc端的,所以我就自己改了下事件,就把只支持pc端的canvas画板改成了只支持wap端的啦
效果图:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"/>
<title>签名画板</title>
<style>
*{ padding:0; margin:0;}
body{ background:#ccc;}
canvas{ background:#fff; margin:50px 10px;}
</style>
</head>
<body>
<h1 align="center" style="color:red">只支持移动端,不支持PC端</h>
<div style="text-align: center">
<canvas height="600" width="900" id="canvas">
<span>亲,您的浏览器不支持canvas,换个浏览器试试吧!</span>
</canvas>
</div>
</div>
<h1 align="center" style="color:red">只支持移动端,不支持PC端</h>
<script>
window.onload = function(){
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.lineWidth = 6.0;
canvas.addEventListener('touchstart',function(event){//触摸点按下事件
if (event.targetTouches.length == 1) {
var touch = event.targetTouches[0];
ctx.beginPath();
ctx.moveTo(touch.clientX-canvas.offsetLeft,touch.clientY-canvas.offsetTop);
canvas.addEventListener('touchmove',function (event) {//手机拖动触摸点事件
var touche = event.targetTouches[0];
ctx.lineTo(touche.clientX - canvas.offsetLeft, touche.clientY - canvas.offsetTop);
ctx.stroke();
},false)
canvas.addEventListener('touchend',function (event) {//手机离开屏幕的事件
ctx.closePath();
},false)
}
},false)
}
</script>
</body>
</html>
代码:https://github.com/niezhiliang/prompt-response
原文章地址:http://blog.csdn.net/qq_38082304/article/details/78144153
更多推荐
已为社区贡献5条内容
所有评论(0)