Public account: wechat search front end tool person; Take more dry goods
A, requirements,
The salesman must sign his name when submitting the application…
Second, the code
Code is not simple to understand, directly look at the code
<! DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
background: #ccc;
}
#oc{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin:200px auto;
background: white;
}
.span{
display: inline-block;
width: 100px;
height: 50px;
background: #fff;
line-height: 50px;
text-align: center;
margin: 193px 0 0 200px;
cursor: pointer;
}
</style>
</head>
<body>
<canvas id="oc" width="500" height="500"></canvas>
<span class="span" onclick="reset()"Reset > < / span >
</body>
<script type="text/javascript">
// Get canvas node
let testNode = document.getElementById('oc');
window.onload = function() {
// Check whether support is supported
if(testNode.getContext){
var ctx = testNode.getContext("2d")
testNode.onmousedown = function(ev){
var ev = ev || event;
ctx.beginPath();
ctx.moveTo(ev.clientX - this.offsetLeft,ev.clientY - this.offsetTop);
if(testNode.setCapture){
testNode.setCapture(); // Capture the mouse
}
document.onmousemove = function(ev){
var ev = ev || event;
ctx.lineTo(ev.clientX - testNode.offsetLeft,ev.clientY - testNode.offsetTop); // Draw lines
Ctx.stroke () // Draw the stroke
// console.log(ev.clientX - testNode.offsetLeft,ev.clientY - testNode.offsetTop)
}
document.onmouseup = function() {
document.onmousemove = document.onmouseup=null;
if(document.releaseCapture){
document.releaseCapture(); // Release the mouse capture
}
}
// Disallow the default behavior of events to handle drag-and-drop compatibility issues in mainstream browsers
return false;
}
}
}
/ / reset
function reset() {
testNode.getContext("2d").clearRect(0, 0, testNode.width, testNode.height); // Empty the canvas
}
</script>
</html>
Copy the codeEffect of three,
Fourth, the end
Article source: your blog at https://www.cnblogs.com/ljx20180807/p/10323697.html