<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
*{margin:0;padding: 0 }
</style>
<body>
<canvas id="cvs" width="400" height="500" style="border:1px solid red"> </canvas>
</body>
<script>
var cvs = document.getElementById("cvs")
var bi = cvs.getContext("2d")
cvs.onmousedown=function(e){
bi.beginPath()
bi.moveTo(e.clientX-cvs.offsetLeft,e.clientY-cvs.offsetTop)
document.onmousemove=function(e){
bi.lineTo(e.clientX-cvs.offsetLeft,e.clientY-cvs.offsetTop)
bi.strokeStyle="blue"
bi.lineWidth = 2
bi.stroke()
console.log(e.clientX-cvs.offsetLeft,e.clientY-cvs.offsetTop)
}
document.onmouseup=function(){
document.onmousedown=null
document.onmousemove =null
}
}
</script>
</html>canvas制作画板
猜你喜欢
转载自blog.csdn.net/QQ_Empire/article/details/81395383
今日推荐
周排行