[HTML]Web前端开发技术27（HTMLCSSJavaScript ）JavaScript基础——喵喵画网页
以下是一个简单的示例，展示了如何使用JavaScript和CSS创建一个简单的喵喵画网页版本。
<!DOCTYPE html>
<html>
<head>
<title>喵喵画网</title>
<style>
body {
background-color: #f7f7f7;
font-family: Arial, sans-serif;
}
#paint-area {
width: 600px;
height: 400px;
border: 1px solid #000;
margin: 20px auto;
}
</style>
</head>
<body>
<div id="paint-area"></div>
<script>
// 获取画布区域
var paintArea = document.getElementById('paint-area');
// 监听鼠标事件
paintArea.addEventListener('mousedown', function(event) {
var ctx = event.target.getContext('2d');
ctx.beginPath();
ctx.moveTo(event.offsetX, event.offsetY);
event.target.addEventListener('mousemove', function(event) {
ctx.lineTo(event.offsetX, event.offsetY);
ctx.stroke();
}, { once: true });
});
</script>
</body>
</html>这段代码创建了一个简单的鼠标绘画区域，当用户在#paint-area上按下鼠标时，开始绘制。鼠标移动时，绘制线条跟随鼠标。当用户释放鼠标按钮时，停止绘制。这个示例演示了如何使用JavaScript监听鼠标事件，并在画布上绘图。
评论已关闭