[HTML]Web前端开发技术29（HTMLCSSJavaScript ）JavaScript基础——喵喵画网页

作者：System 时间：2024年08月15日分类：所有,css3 字数：1775

以下是一个简单的示例，展示了如何使用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>元素进行基本的交互式绘图。

[HTML]Web前端开发技术29（HTMLCSSJavaScript ）JavaScript基础——喵喵画网页

评论已关闭

推荐阅读