自己写的canvas 手写画板
2024-09-01 19:06:01
<!DOCTYPE html>
<html>
<head>
<title>canvas</title>
<meta charset="utf-8" >
<script src="js/jquery.js"></script>
</head>
<body>
<div>
<canvas id="canvas" width="1000px;" height="500px" style="background:green;border:1px solid #fff;"></canvas><br/>
<button class="clear" style="cursor:pointer;margin-top:10px;margin-left:10px;width:150px;height:100px;font-size:40px;">清除</button>
<button class="save" style="cursor:pointer;margin-top:10px;margin-left:10px;width:180px;height:100px;font-size:40px;">保存图片</button>
<div class="img"><img src=""></div>
</div>
<script>
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
ctx.lineWidth = '5';
var bbox = c.getBoundingClientRect();
// ctx.moveTo(0, 0);
// ctx.lineTo(290, 140);
// ctx.stroke();
var state = '';
$(".clear").click(function () {
ctx.beginPath();
ctx.clearRect(0, 0, 1000, 500);
})
function browserRedirect() {
var sUserAgent = navigator.userAgent.toLowerCase();
var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
var bIsMidp = sUserAgent.match(/midp/i) == "midp";
var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
var bIsAndroid = sUserAgent.match(/android/i) == "android";
var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile"; if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
$("body").on("touchstart", "#canvas", function (e) { })
$("body").on("touchmove", "#canvas", function (e) {
e.preventDefault();
var _touch = e.originalEvent.targetTouches[0];
var x = _touch.clientX - bbox.left * (c.width / bbox.width);
var y = _touch.clientY - bbox.top * (c.height / bbox.height);
if (!state) {
ctx.moveTo(x, y);
state = '1';
}
ctx.lineTo(x + 1, y + 1);
ctx.strokeStyle = '#AACDEE';
ctx.stroke();
})
$("body").on("touchend", "#canvas", function (e) {
state = '';
})
} else {
var state = '';
$("body").on("mousedown", "#canvas", function () {
$("body").on("mousemove", "#canvas", function (e) {
var x = e.clientX - bbox.left * (c.width / bbox.width);
var y = e.clientY - bbox.top * (c.height / bbox.height);
if (!state) {
ctx.moveTo(x, y);
state = '1';
}
ctx.lineTo(x + 1, y + 1);
ctx.strokeStyle = '#AACDEE';
ctx.stroke();
console.log(x, y);
})
})
$("body").on("mouseup", "#canvas", function () {
state = '';
$("body").off("mousemove", "#canvas");
})
}
}
browserRedirect(); $(".save").click(function () {
var img = c.toDataURL();
$(".img img").attr("src", img);
})
</script>
</body>
</html>
最新文章
- MySQL 排名统计
- 解决：error: Cannot fetch repo (TypeError: expected string or buffer)
- Azure 媒体服务可将优质内容传输至 Apple TV
- Auto Mapper04(MVC中的配置)
- 对mysql进行分表
- 关于自定义jar包(tomcat)的添加
- SpringMVC ModelAndView、Map、Model、ModelMap
- Volley 图片加载相关源码解析
- Facebook主页照片和封面照片的尺寸要求
- IntelliJ IDEA 2018.3 升级功能介绍
- 电脑kail linux 连接手机Nethunter，手机和电脑互传文件
- flask中利用from来进行对修改修改时旧密码的验证
- 完全分布式hadoop2.5.0安装 VMware下虚拟机centos6.4安装1主两从hadoop
- AngularJS 脏检查机制
- PAT甲题题解-1042. Shuffling Machine (20)-模拟
- 二、vue中组件的使用
- 操作iframe 的方法与兼容性
- P2865 【[USACO06NOV]路障Roadblocks】（次短路）
- Java简单方法批量修改Windows文件夹下的文件名(简单IO使用)
- [转帖]从HTTP/0.9到HTTP/2：一文读懂HTTP协议的历史演变和设计思路