使用HTML5+CSS3+JavaScript实现简易画板教程

"该文档提供了一个使用HTML5的canvas元素，结合CSS3和JavaScript实现简易画板的示例代码。用户可以通过选择不同的颜色和笔触宽度进行绘画操作。" 在这个简易画板应用中，主要涉及以下知识点： 1. **HTML5 Canvas**： - `canvas`元素是HTML5新增的特性，用于在网页上动态渲染图形。在这个例子中，它被用来创建一个可以画画的画布区域。 - `id`为`c1`的`canvas`元素通过JavaScript获取，以便后续的绘图操作。 2. **CSS3**： - CSS3用于设置页面样式，确保画板和颜色选择等元素的布局和视觉效果。 - `*{margin:0;padding:0;}`清除默认的内外边距，使页面元素对齐更加精确。 - `body{background:000;}`将背景色设为黑色，提供画板的背景颜色。 - `canvas{background:fff;float:left;}`将画布背景设为白色，并使其浮动在左侧。 - `ul1`和`span`是颜色选择器的样式设定，用于创建颜色选择列表和显示当前选中的颜色。 3. **JavaScript**： - `window.onload`事件监听页面加载完成，确保在执行代码时所有元素已加载完毕。 - `document.getElementById`用于获取HTML元素，如`color`（颜色选择器）和`num`（笔触宽度选择器）。 - `getContext('2d')`获取`canvas`的2D渲染上下文，这是在canvas上绘制图形的基础。 - `lineWidth`属性设置线条的宽度，`strokeStyle`属性设置线条的颜色。 - `onchange`事件监听颜色和笔触宽度的选择变化，更新画笔属性。 - `beginPath()`、`moveTo()`、`lineTo()`、`stroke()`等方法用于在画布上绘制线条。当鼠标按下时开始绘制，移动时持续绘制，松开鼠标时结束绘制。 - `onmousedown`、`onmousemove`、`onmouseup`事件处理鼠标操作，实现画布上的绘画交互。 4. **交互逻辑**： - 当用户点击画板时，`onmousedown`事件触发，`moveTo()`方法设置起始位置，`onmousemove`事件监听鼠标移动并持续绘制。 - 鼠标抬起(`onmouseup`)时，取消`onmousemove`和`onmouseup`事件监听，以停止绘制。 这个简易画板示例展示了HTML5、CSS3和JavaScript如何协同工作，创建一个具有用户交互功能的Web应用。通过调整和扩展这些基础代码，可以构建更复杂、功能丰富的在线绘图工具。