canvas实战：画图与滤镜效果实例

本文将深入探讨如何使用JavaScript的Canvas API来实现画图和滤镜效果。Canvas是HTML5提供的一种在网页上进行绘图的API，它允许开发者在浏览器上动态创建图形和动画。以下是一个具体实例，展示了如何利用JavaScript在canvas上实时绘制线条并支持用户选择绘制颜色。 首先，我们需要在HTML结构中设置一个canvas元素和一个颜色选择器input元素。`<canvas id="v1" width="800" height="600">`用于创建一个800x600像素的画布，当浏览器不支持canvas时，显示替代文本。`<input type="color" id="color1">`则允许用户选择笔触颜色。 JavaScript代码部分，通过`document.getElementById('v1').getContext('2d')`获取canvas的2D渲染上下文（context），这是用于进行绘图操作的核心对象。接着，我们定义了事件处理函数来响应鼠标操作： 1. `onmousedown`: 当鼠标按下时，记录初始点击位置`lastX`和`lastY`，并设置`onmousemove`事件来跟踪鼠标移动，每次移动都清除之前的路径并绘制一条从起点到当前点击点的新线段。 2. `onmousemove`: 在鼠标移动时，使用`gd.beginPath()`清除路径，`gd.moveTo(lastX, lastY)`设置新的起点，然后`gd.lineTo()`跟随鼠标移动绘制线段，并更新`lastX`和`lastY`。 3. `onmouseup`: 鼠标抬起时，移除`onmousemove`和`onmouseup`事件监听器，防止无限制绘制。 `letColor=document.getElementById('color1');`获取颜色选择器的值，当用户更改颜色时，`color=this.value`会更新绘制的颜色。这样，用户可以在实时绘制过程中切换线条颜色。 这个简单的例子展示了如何利用HTML5 Canvas的基本功能，包括绘制线条、响应用户交互以及设置绘图颜色。对于更复杂的滤镜效果，可以进一步探索Canvas的绘图模式、渐变、阴影等高级特性，或者使用WebGL进行更复杂图形渲染。然而，这超出了原始提供的代码范围，但提供了一个良好的基础，可以通过查阅更多文档和教程来扩展到更多效果。