[HTML]Web前端开发技术29（HTMLCSSJavaScript ）JavaScript基础——喵喵画网页
以下是一个简单的示例，展示了如何使用JavaScript和CSS创建一个简单的喵喵画网页版本。
<!DOCTYPE html>
<html>
<head>
<title>喵喵画网</title>
<style>
body {
background-color: #f7f7f7;
font-family: Arial, sans-serif;
}
#container {
width: 600px;
margin: 20px auto;
padding: 20px;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 5px;
}
#title {
text-align: center;
color: #333;
}
#drawing-area {
margin-top: 10px;
text-align: center;
}
canvas {
border: 1px solid #000;
}
</style>
</head>
<body>
<div id="container">
<h1 id="title">喵喵画网</h1>
<div id="drawing-area">
<canvas id="drawing-canvas" width="500" height="500"></canvas>
</div>
</div>
<script>
const canvas = document.getElementById('drawing-canvas');
const context = canvas.getContext('2d');
// 绘制图形的函数
function drawShape(shape) {
context.beginPath();
context.arc(250, 250, 200, 0, Math.PI * 2); // 圆形
context.strokeStyle = 'blue';
context.stroke();
}
// 清除画布
function clearCanvas() {
context.clearRect(0, 0, canvas.width, canvas.height);
}
// 用户交互逻辑
function handleInteraction(event) {
clearCanvas();
drawShape();
}
// 监听鼠标移动事件
canvas.addEventListener('mousemove', handleInteraction);
</script>
</body>
</html>这段代码创建了一个简单的喵喵画网页，用户将在画布上绘制一个蓝色的圆形图案，当鼠标移动时触发重绘事件。这个示例主要用于演示如何使用JavaScript和HTML5的<canvas>元素进行基本的交互式绘图。
评论已关闭