canvas

项目场景：

在项目的日常开发过程中，会有很多场景用到画布，这个问题也是长久不衰的话题，那么如何去实现这个逻辑呢....

例如：项目场景：游戏开发、数据可视化、图像编辑、广告效果、画板和涂鸦等

Canvas概述

提示：Canvas 是 HTML5 提供的一个用于绘制图形的功能强大的元素。它可以在网页上绘制图形、动画、游戏等交互性较强的内容。

例如：运用canvas做图像处理的时候一般都需要去拖动画布，进行展示较全面的画布信息和内容。
以下是关键性代码：

鼠标按下事件
canvasbody.value.onmousedown = (e) => {
	// 获取x坐标和y坐标
	dargObj.x = e.clientX;
	dargObj.y = e.clientY;
	// 获取左部和顶部的偏移量
	dargObj.left = newCanvas.value.offsetLeft;
	dargObj.top= newCanvas.value.offsetTop;
	// 开关打开
	dargObj.isDragDown = true
}
鼠标移动事件（鼠标右击拖动画布）:
canvasbody.value.onmousemove = (e) => {
	darObj.isDragDown ? canvasbody.value.style.cursor = 'all-scroll' : ''
	if(dargObj.isDragDown === false) return;
	let nx = e.clientX;
	let ny = e.clientY;
	let nl  = nx - (darnObj.x - dargObj.left);
	let nt = ny - (dargObj.y - dargObj.top);
	newCanvas.value.style.left = (nl) + 'px'
	newCanvas.value.style.top = (nt) + 'px'
}
鼠标抬起事件
canvasbody.value.onmouseup = (e) => {
	if(dargObj.isDragDown === false) {
		return;
	}
	dargObj.isDragDown = false;
	canvasbody.value.style.cursor = 'default';
}

---

逻辑分析：

提示：需要实现canvas拖动其实就是在canvas外层包裹一层div，在移动canvas的时候让画布在div内部自由移动，也就是absolute；

提示：以上方法需要定义在新的函数里面在初始化的时候调用。

---

canvas方案总结：

1、创建 Canvas 元素：在 HTML 文件中通过 标签创建一个画布，通过指定宽度和高度来定义画布的大小。
2、获取绘图上下文：通过 Canvas 的 getContext 方法获取绘图上下文。绘图上下文是一个对象，提供了绘制图形和图像的方法。
3、绘制图形和图像：使用绘图上下文的方法，可以绘制各种图形和图像。例如，矩形、圆形、直线、路径等。
4、绘制文本：使用绘图上下文的 fillText 方法可以绘制文本，并可以设置字体、字号、填充颜色等属性。
5、绘制图像：使用绘图上下文的 drawImage 方法可以绘制图像，并可以控制图像的位置和大小。
6、清空画布：使用 clearRect 方法可以清空画布，从而实现动画效果。
7、动画：通过使用 requestAnimationFrame 或 setInterval 方法，结合绘图和清空画布的操作，可以实现简单的动画效果。
8、交互性：可以监听鼠标事件和键盘事件，实现与用户的交互，例如拖拽、点击等。
9、数据可视化：Canvas 可以用于绘制各种图表和图形，实现数据的可视化展示。
10、游戏开发：Canvas 可以用于开发 2D 或简单的 3D 游戏，实现游戏中的场景、角色、动画等元素。
11、性能注意：Canvas 的绘图是基于像素的，绘制复杂图形或动画可能会对性能产生影响，需要做好优化。
12、兼容性：Canvas 在现代浏览器中支持良好，但在老旧浏览器中可能不兼容。