使用canvas实现画板功能

最新推荐文章于 2025-10-12 17:35:56 发布

原创

最新推荐文章于 2025-10-12 17:35:56 发布 · 1.5k 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#canvas #你猜我画 #画布

本文介绍了canvas作为画布用于绘制图像的基本概念，并详细讲解了如何绘制矩形、设置颜色和阴影效果、绘制线条、创建路径、二次贝塞尔曲线以及弧度绘制等操作，帮助读者掌握在web页面上实现画板功能的技术要点。

1、canvas是什么？
画布、用于绘制图像
在这里插入图片描述
代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>你画我猜</title>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
	</head>
	<body>
		<div class="canvas">
			<canvas width="800px" height="500px"></canvas>
		</div>
		<div class="btn-box">
			<button class="brush" data-style="brush">画笔</button>
			<button class="linear" data-style="linear">直线</button>
			<button class="rect" data-style="rect">矩形</button>
			<button class="arc" data-style="arc">圆心</button>
			<button class="clear" data-style="clear">清屏</button>
			<button class="erase" data-style="erase">橡皮檫</button>
			<button class="retrue" data-style="retrue">撤销</button><br />