<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#canvas{
border: 1px solid black ;
position: relative;
top:100px;
left:200px
}
</style>
</head>
<body>
<!-- 定义一个画布区域 -->
<canvas id="canvas" width="800" height="500">您的浏览器不支持</canvas>
<script>
let cvs = document.querySelector("#canvas")
//通过canvas对象获取上下文对象
let cxt=cvs.getContext("2d")
//绑定鼠标按下事件
cvs.onmousedown=function(event){
cxt.moveTo(event.pageX-this.offsetLeft,event.pageY-this.offsetTop) //记录鼠标点击时的X轴和Y轴的坐标
cvs.onmousemove=function(event){
cxt.lineTo(event.pageX-this.offsetLeft,event.pageY-this.offsetTop)
cxt.stroke()
}
//当鼠标弹起来的时候不要再继续绘制了
cvs.onmouseup=function(){
cvs.onmousemove=null
}
}
//1.定义一个画布区域
//2.当鼠标在画布上按下的时候,绘制起始点
//3.当鼠标移动的时候不断地绘制直线
//4.当鼠标弹起来的时候结束绘制(鼠标移动)
</script>
</body>
</html>
绘制画画板代码
最新推荐文章于 2024-08-25 21:41:11 发布