【html画板】网页画板绘画效果

最新推荐文章于 2024-03-30 11:42:57 发布

菜鸟黄某

最新推荐文章于 2024-03-30 11:42:57 发布

阅读量890

点赞数 1

分类专栏： JS 文章标签： html5 前端 javascript

本文链接：https://blog.csdn.net/weixin_62061392/article/details/124035699

版权

JS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

文章目录

效果图

在这里插入图片描述

功能实现：

按钮点击实现相应的功能

源代码

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<canvas id="myCanvas" width="600" height="300" style="border: 1px solid red; background-color: black ;"></canvas>
		<br />
		<button style="width: 80PX; background-color: mistyrose;" onclick="xd = '0'">线条</button>
		<button style="width: 80PX; background-color: cornflowerblue;" onclick="xd = '1'">矩形</button>
		<br />
		<button style="width: 80PX; background-color: yellow;" onclick="linecolor = 'yellow'">YELLOW</button>
		<button style="width: 80PX; background-color: red;" onclick="linecolor = 'red'">RED</button>
		<button style="width: 80PX; background-color: green;" onclick="myFunction()" id="demo">clear</button>

	</body>
	<script type="text/javascript">
		var myCanvas = document.getElementById("myCanvas");
		var ctx = myCanvas.getContext("2d");

		ctx.strokeStyle = "blue";
		ctx.fillStyle = "palevioletred";

		//1.先做一个背景  矩形
		ctx.fillStyle = "black";
		ctx.fillRect(0, 0, 600, 300);

		//变量
		var oldX = 0;
		var oldY = 0;
		var onOff = false;
		var linecolor = "white";
		var cccc = 0;
		var xd = 0;

		//2响应3个鼠标事件，鼠标按下，鼠标移动鼠标弹起
		//增加监听事件
		function myFunction() {
			document.getElementById("demo");
			cccc = "1";
			if(cccc == 1) {
				ctx.clearRect(0, 0, 600, 300);
			}
		}

		myCanvas.addEventListener("mousedown", down);
		myCanvas.addEventListener("mousemove", move);
		myCanvas.addEventListener("mouseup", up);

		function down(event) {
			console.log(event);
			onOff = true;
			oldX = event.pageX - 10;
			oldY = event.pageY - 10;

		}

		function move(event) {
			console.log(event);
			if(onOff == true) {
				var newX = event.pageX - 10;
				var newY = event.pageY - 10;

				if(xd == 1) {
					ctx.beginPath();
				    ctx.clearRect(oldX-4, oldY-4, newX-oldX+10,newY-oldY+10);
					ctx.strokeRect(oldX,oldY,newX-oldX,newY-oldY);
					ctx.lineCap = "round";
					ctx.strokeStyle = linecolor;
					ctx.lineWidth = 4;
					ctx.stroke();
				} else {
					ctx.beginPath();
					ctx.moveTo(oldX, oldY);
					ctx.lineTo(newX, newY);
					ctx.strokeStyle = linecolor;
					ctx.lineWidth = 4;
					ctx.lineCap = "round";
					ctx.stroke();

					oldX = newX;
					oldY = newY;
				}

			}

		}

		function up() {
			onOff = false;
		}
	</script>

</html>