create js自定义画板
时间: 2023-06-14 15:02:41 浏览: 49
好的,下面是一个简易的JS自定义画板的实现:
HTML部分:
```
<canvas id="myCanvas" width="500" height="500"></canvas>
```
JS部分:
```
//获取canvas元素
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
//设置画笔颜色
context.strokeStyle = "#000000";
//设置画笔粗细
context.lineWidth = 10;
//设置画笔的类型为圆形
context.lineCap = "round";
var isDrawing = false; //是否正在绘画
var lastX = 0; //上一个点的X坐标
var lastY = 0; //上一个点的Y坐标
//鼠标按下事件
canvas.addEventListener("mousedown", function(event) {
//开始绘画
isDrawing = true;
//记录当前点的坐标
lastX = event.offsetX;
lastY = event.offsetY;
});
//鼠标移动事件
canvas.addEventListener("mousemove", function(event) {
//如果正在绘画
if (isDrawing) {
//绘制直线,从上一个点到当前点
context.beginPath();
context.moveTo(lastX, lastY);
context.lineTo(event.offsetX, event.offsetY);
context.stroke();
//更新上一个点的坐标为当前点的坐标
lastX = event.offsetX;
lastY = event.offsetY;
}
});
//鼠标松开事件
canvas.addEventListener("mouseup", function(event) {
//结束绘画
isDrawing = false;
});
```
这样就可以实现简单的画板了。用户可以通过鼠标按下、移动和松开事件来绘制图形。你也可以根据自己的需求修改画笔颜色、粗细等属性。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)