HTML画图软件

学习智者

已于 2023-07-22 15:07:19 修改

阅读量60

点赞数

文章标签： html 前端 javascript

于 2023-07-21 21:50:55 首次发布

本文链接：https://blog.csdn.net/2301_77161129/article/details/131860730

版权

1.画图软件（红绿蓝,清空）

候梯：HTML画图软件的代码：


<!DOCTYPE html>
<html>
<head>
	<title>HTML画图软件</title>
	<style>
		canvas {
			border: 1px solid black;
		}
	</style>
</head>
<body>
	<h1>HTML画图软件</h1>
	<canvas id="drawingBoard" width="500" height="500"></canvas>
	<br>
	<button onclick="changeColor('red')">红色</button>
	<button onclick="changeColor('blue')">蓝色</button>
	<button onclick="changeColor('green')">绿色</button>
	<button onclick="clearCanvas()">清空</button>

	<script>
		var canvas = document.getElementById("drawingBoard");
		var ctx = canvas.getContext("2d");
		var isDrawing = false;

		canvas.addEventListener("mousedown", startDrawing);
		canvas.addEventListener("mousemove", draw);
		document.addEventListener("mouseup", stopDrawing);

		function startDrawing(e) {
			isDrawing = true;
			ctx.beginPath();
			ctx.moveTo(e.clientX - canvas.getBoundingClientRect().left, e.clientY - canvas.getBoundingClientRect().top);
		}

		function draw(e) {
			if (isDrawing) {
				ctx.lineTo(e.clientX - canvas.getBoundingClientRect().left, e.clientY - canvas.getBoundingClientRect().top);
				ctx.stroke();
			}
		}

		function stopDrawing() {
			isDrawing = false;
		}

		function changeColor(color) {
			ctx.strokeStyle = color;
		}

		function clearCanvas() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);
		}
	</script>
</body>
</html>

候梯：实现了一个简单的画板功能，可以在画布上用鼠标绘制图形，并可以选择不同的颜色来绘制。还提供了清空画布的功能。

候梯：不过只有红色、蓝色、绿色。

2.加上红橙黄绿青蓝紫。

小白：加上红橙黄绿青蓝紫

<!DOCTYPE html>
<html>
<head>
	<title>HTML画图软件</title>
	<style>
		canvas {
			border: 1px solid black;
		}
	</style>
</head>
<body>
	<h1>HTML画图软件</h1>
	<canvas id="drawingBoard" width="500" height="500"></canvas>
	<br>
	<button onclick="changeColor('red')">红色</button>
	<button onclick="changeColor('orange')">橙色</button>
	<button onclick="changeColor('yellow')">黄色</button>
	<button onclick="changeColor('green')">绿色</button>
	<button onclick="changeColor('cyan')">青色</button>
	<button onclick="changeColor('blue')">蓝色</button>
	<button onclick="changeColor('purple')">紫色</button>
	<button onclick="clearCanvas()">清空</button>

	<script>
		var canvas = document.getElementById("drawingBoard");
		var ctx = canvas.getContext("2d");
		var isDrawing = false;

		canvas.addEventListener("mousedown", startDrawing);
		canvas.addEventListener("mousemove", draw);
		document.addEventListener("mouseup", stopDrawing);

		function startDrawing(e) {
			isDrawing = true;
			ctx.beginPath();
			ctx.moveTo(e.clientX - canvas.getBoundingClientRect().left, e.clientY - canvas.getBoundingClientRect().top);
		}

		function draw(e) {
			if (isDrawing) {
				ctx.lineTo(e.clientX - canvas.getBoundingClientRect().left, e.clientY - canvas.getBoundingClientRect().top);
				ctx.stroke();
			}
		}

		function stopDrawing() {
			isDrawing = false;
		}

		function changeColor(color) {
			ctx.strokeStyle = color;
		}

		function clearCanvas() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);
		}
	</script>
</body>
</html>

3.笑话

有一天，小明去参加了一个面试，面试官问他：“你最擅长的领域是什么？”小明兴奋地回答：“我最擅长的是立体几何！”面试官疑惑地问：“那请问你知道什么是‘球面’吗？”小明自信满满地答道：“当然知道，球面就是一个长得像球一样的面啊！”面试官眉头一皱，冷冷地指向旁边：“请你用手指出与我们对面的那位候选人。”尴尬的小明一确实没法手指出来，因为后面根本没有候选人。小明做完面试走出办公室，心情十分尴尬。他打算乘坐电梯下楼，但却发现电梯坏了，只能走楼梯。他低着头心事重重地走着，走了几步后脚一滑，整个人摔倒了。他抬头一看，原来是自己踩到了一个香蕉皮上。尴尬的小明更加尴尬了！小明尴尬地从楼梯上爬起来，继续走着。走到地铁站的时候，他刚好看到地铁开来。他急忙往前冲，但一不小心又扯到了一个女士的衣裙。女士生气地说：“你怎么这么没礼貌！”小明连忙道歉，并解释说自己是赶时间上地铁。女士见他一脸尴尬的样子，不禁笑了起来。终于，小明顺利地上了地铁。他站在车厢里的时候，突然感觉有人在背后拍他的肩膀。他转过头，却发现是个陌生人。小明尴尬地问：“对不起，你找我有什么事吗？”陌生人笑着说：“不好意思，你的裤子拉链没拉上。”小明一看，顿时脸红如火，迅速解决了尴尬的问题。这一天，小明遇到了一系列的尴尬事，但是他没有气馁，反而笑着对自己说：“今天真是个尴尬的幸运日呀！”

学习智者

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML画图软件

候梯：实现了一个简单的画板功能，可以在画布上用鼠标绘制图形，并可以选择不同的颜色来绘制。还提供了清空画布的功能。小白：编一个简单的HTML画图软件呗？候梯：不过只有红色、蓝色、绿色。小白：加上红橙黄绿青蓝紫。
复制链接

扫一扫