毛笔刷画板Canvas特效.zip资源-CSDN文库

共5个文件

png：2个

js：1个

jpg：1个

版权申诉

jQuery特效

CSS特效

网页特效

136 浏览量 2023-10-10 23:49:05 上传评论收藏 18KB ZIP 举报

"毛笔刷画板Canvas特效.zip"所涉及的知识点主要集中在JavaScript的Canvas API、jQuery库以及CSS特效上。Canvas是HTML5的一个重要特性，它允许在网页上进行动态图形绘制，提供了丰富的绘图功能，使得网页可以展现出极具交互性的视觉效果。一、Canvas API 1. 基本概念：Canvas是一个HTML元素，通过JavaScript的绘图API，可以在其上进行像素级别的图形操作，如绘制线条、形状、图像等。 2. 绘图路径：Canvas通过`beginPath()`开始一个路径，通过`moveTo()`和`lineTo()`等方法定义路径，最后用`stroke()`或`fill()`来描边或填充路径。 3. 填充与描边：`fillStyle`和`strokeStyle`分别用于设置填充色和描边色，可以是颜色、渐变或模式。 4. 文字渲染：使用`fillText()`和`strokeText()`方法在Canvas上绘制文本。 5. 图像处理：`drawImage()`函数可以用来在Canvas上绘制图片，支持缩放、裁剪等操作。二、jQuery特效 1. jQuery简介：jQuery是一个广泛使用的JavaScript库，简化了DOM操作、事件处理、动画效果和Ajax交互。 2. DOM操作：如`$()`选择器选取元素，`.append()`、`.prepend()`添加元素，`.css()`改变样式。 3. 动画：jQuery的`.animate()`方法可以创建自定义动画效果，包括改变位置、大小、颜色等属性。 4. 事件处理：`.on()`方法绑定事件监听器，`.click()`、`.mouseover()`等快捷方法处理常见事件。 5. 特效插件：jQuery有丰富的插件库，如 easing 插件可以提供更复杂的动画效果。三、CSS特效 1. CSS3新特性：如过渡（transition）、动画（animation）、伪类（pseudo-class）和伪元素（pseudo-element）等，它们为创建动态效果提供了可能。 2. 选择器增强：CSS3引入了新的选择器，如nth-child()、nth-of-type()等，使得选择元素更加精确。 3. 属性过渡：`transition`属性可以指定元素在改变状态时如何平滑地过渡，包括时间、延迟、属性等。 4. CSS3动画：`@keyframes`规则定义了一个动画，通过百分比设定不同时间点的样式，然后使用`animation`属性应用动画。 5. 盒模型和布局：Flexbox和Grid布局为复杂网页布局提供了强大工具，可以实现响应式设计和弹性布局。结合描述中提到的"可以完美运行，可以二次修改"，我们可以推断这个压缩包可能包含一个实现了毛笔刷效果的Canvas画板，同时利用jQuery实现了一些交互性，如点击、拖动等，而CSS可能用于美化画板的外观和实现某些过渡效果。通过解压并查看"jiaoben7421"文件，可以进一步学习和研究这个特效的实现细节。

资源推荐

资源详情

资源评论

收起资源包目录

毛笔刷画板Canvas特效.zip （5个子文件）

jiaoben7421

brush.js 4KB

img

pen1.png 15KB

paper.jpg 12KB

pen2.png 15KB

index.html 3KB

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <title>毛笔刷画板Canvas特效 - 更多源码【www.96flw.com】</title> <style> body{ background-color: #cccccc; } .paper{ width: 50rem; height: 25rem; margin: 0 auto; background-image: url("img/paper.jpg"); background-size: 100% 100%; background-repeat: no-repeat; } #graffiti{ width: 800px; height: 400px; } .brush{ margin: 0 auto; text-align: center; text-align: center; } #pen1,#pen2{ width: 25px; height: 25px; cursor: pointer; } #pen1{ margin-left: 100px; } .active{ width: 35px; height: 35px; filter: opacity(0.6); } .clear{ background-color: beige; padding: 0.5%; border-radius: 5px; width: 45px; margin: 0 auto; cursor: pointer; } </style> </head> <body> <div class="paper"> <canvas id="graffiti"></canvas> </div> <div class="brush"> <p>选择笔刷：</p> <img src="img/pen2.png" class="active" id="pen2" alt="" onClick="selected(0)"> <img src="img/pen1.png" id="pen1" alt="" onClick="selected(1)"> <p onClick="clearPaper()" class="clear">清空</p> </div> <script type="text/javascript" src="js/brush.js"></script> <script type="text/javascript"> (function (global) { const config = { el: 'graffiti', //canvasID选择器 width: 800, //canvas宽 height: 400, //canvas高 brushId: 0, //选择笔刷 }; const brush = new Brush(config); global.clearPaper = function () { window.console.log('清空'); brush.clear(); } //选择笔刷 const brushNode = document.querySelectorAll('.brush>img'); //两个笔刷图片标签（数组） global.selected = function(index) { for(let i = 0; i < brushNode.length; i++){ if(index === i){ brushNode[i].setAttribute('class','active'); //改变选择的笔刷 brush.img = brushNode[i]; }else { brushNode[i].setAttribute('class',''); } } } })(window); //上述JS写法包含了闭包概念，有不懂的同学可以多看看闭包函数。 </script> <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"> <p>适用浏览器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p> <p>更多源码<a href="http://www.96flw.com" target="_blank">www.96flw.com</a></p> </div> </body> </html>

评论收藏

内容反馈

版权申诉