【HTML5】Canvas之globalCompositeOperation属性详解

globalCompositeOperation即Canvas中的合成操作。

1、source-over

这是默认值，他表示绘制的图形将画在现有画布之上

 

[html]  view plain copy 在CODE上查看代码片
 
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="utf-8">  
  5.         <title></title>  
  6.         <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>  
  7.         <script type="text/javascript">  
  8.         $(document).ready(function(){  
  9.             var canvas=document.getElementById("myCanvas");  
  10.             var context=canvas.getContext("2d");  
  11.             context.fillStyle="rgb(63,169,245)";  
  12.             context.fillRect(50,50,100,100);  
  13.             context.globalCompositeOperation="source-over"  
  14.             context.fillStyle="rgb(255,123,172)";  
  15.             context.fillRect(100,100,100,100);  
  16.         });  
  17.         </script>  
  18.     </head>  
  19.     <body>  
  20.         <canvas id="myCanvas" width="1000px" height="1000px"></canvas>  
  21.     </body>  
  22. </html>  



 

【HTML5】Canvas之globalCompositeOperation属性详解

2、destination-over

这个操作的值与前一个值相反，所以现在目标绘制在源之上

 

[html]  view plain copy 在CODE上查看代码片
 
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="utf-8">  
  5.         <title></title>  
  6.         <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>  
  7.         <script type="text/javascript">  
  8.         $(document).ready(function(){  
  9.             var canvas=document.getElementById("myCanvas");  
  10.             var context=canvas.getContext("2d");  
  11.             context.fillStyle="rgb(63,169,245)";  
  12.             context.fillRect(50,50,100,100);  
  13.             context.globalCompositeOperation="destination-over"  
  14.             context.fillStyle="rgb(255,123,172)";  
  15.             context.fillRect(100,100,100,100);  
  16.         });  
  17.         </script>  
  18.     </head>  
  19.     <body>  
  20.         <canvas id="myCanvas" width="1000px" height="1000px"></canvas>  
  21.     </body>  
  22. </html>  

【HTML5】Canvas之globalCompositeOperation属性详解

 

3、source-atop

这个操作会将源绘制在目标之上，但是在重叠区域上两者都是不透明的。绘制在其他位置的目标是不透明的，但源是透明的。

 

[html]  view plain copy 在CODE上查看代码片
 
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="utf-8">  
  5.         <title></title>  
  6.         <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>  
  7.         <script type="text/javascript">  
  8.         $(document).ready(function(){  
  9.             var canvas=document.getElementById("myCanvas");  
  10.             var context=canvas.getContext("2d");  
  11.             context.fillStyle="rgb(63,169,245)";  
  12.             context.fillRect(50,50,100,100);  
  13.             context.globalCompositeOperation="source-atop"  
  14.             context.fillStyle="rgb(255,123,172)";  
  15.             context.fillRect(100,100,100,100);  
  16.         });  
  17.         </script>  
  18.     </head>  
  19.     <body>  
  20.         <canvas id="myCanvas" width="1000px" height="1000px"></canvas>  
  21.     </body>  
  22. </html>  

【HTML5】Canvas之globalCompositeOperation属性详解

 

4、destination-atop

这个操作与source-atop相反，目标绘制在源之上

 

[html]  view plain copy 在CODE上查看代码片
 
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="utf-8">  
  5.         <title></title>  
  6.         <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>  
  7.         <script type="text/javascript">  
  8.         $(document).ready(function(){  
  9.             var canvas=document.getElementById("myCanvas");  
  10.             var context=canvas.getContext("2d");  
  11.             context.fillStyle="rgb(63,169,245)";  
  12.             context.fillRect(50,50,100,100);  
  13.             context.globalCompositeOperation="destination-atop"  
  14.             context.fillStyle="rgb(255,123,172)";  
  15.             context.fillRect(100,100,100,100);  
  16.         });  
  17.         </script>  
  18.     </head>  
  19.     <body>  
  20.         <canvas id="myCanvas" width="1000px" height="1000px"></canvas>  
  21.     </body>  
  22. </html>  

【HTML5】Canvas之globalCompositeOperation属性详解

 

5、source-in

在源于目标重叠的区域只绘制源，而不重叠的部分编程透明的。

 

[html]  view plain copy 在CODE上查看代码片
 
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="utf-8">  
  5.         <title></title>  
  6.         <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>  
  7.         <script type="text/javascript">  
  8.         $(document).ready(function(){  
  9.             var canvas=document.getElementById("myCanvas");  
  10.             var context=canvas.getContext("2d");  
  11.             context.fillStyle="rgb(63,169,245)";  
  12.             context.fillRect(50,50,100,100);  
  13.             context.globalCompositeOperation="source-in"  
  14.             context.fillStyle="rgb(255,123,172)";  
  15.             context.fillRect(100,100,100,100);  
  16.         });  
  17.         </script>  
  18.     </head>  
  19.     <body>  
  20.         <canvas id="myCanvas" width="1000px" height="1000px"></canvas>  
  21.     </body>  
  22. </html>  

【HTML5】Canvas之globalCompositeOperation属性详解

 

 

6、destination-in

这个操作与source-in相反，在源于目标重叠的区域保留目标。而不重叠的部分都变成透明的。

 

[html]  view plain copy 在CODE上查看代码片
 
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="utf-8">  
  5.         <title></title>  
  6.         <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>  
  7.         <script type="text/javascript">  
  8.         $(document).ready(function(){  
  9.             var canvas=document.getElementById("myCanvas");  
  10.             var context=canvas.getContext("2d");  
  11.             context.fillStyle="rgb(63,169,245)";  
  12.             context.fillRect(50,50,100,100);  
  13.             context.globalCompositeOperation="destination-in"  
  14.             context.fillStyle="rgb(255,123,172)";  
  15.             context.fillRect(100,100,100,100);  
  16.         });  
  17.         </script>  
  18.     </head>  
  19.     <body>  
  20.         <canvas id="myCanvas" width="1000px" height="1000px"></canvas>  
  21.     </body>  
  22. </html>  

【HTML5】Canvas之globalCompositeOperation属性详解

 

7、source-out

在与目标不重叠的区域上绘制源，其他部分都变成透明的。

 

[html]  view plain copy 在CODE上查看代码片
 
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="utf-8">  
  5.         <title></title>  
  6.         <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>  
  7.         <script type="text/javascript">  
  8.         $(document).ready(function(){  
  9.             var canvas=document.getElementById("myCanvas");  
  10.             var context=canvas.getContext("2d");  
  11.             context.fillStyle="rgb(63,169,245)";  
  12.             context.fillRect(50,50,100,100);  
  13.             context.globalCompositeOperation="source-out"  
  14.             context.fillStyle="rgb(255,123,172)";  
  15.             context.fillRect(100,100,100,100);  
  16.         });  
  17.         </script>  
  18.     </head>  
  19.     <body>  
  20.         <canvas id="myCanvas" width="1000px" height="1000px"></canvas>  
  21.     </body>  
  22. </html>  

【HTML5】Canvas之globalCompositeOperation属性详解

 

8、destination-out

在与源不重叠的区域上保留目标。其他部分都变成透明的。

 

[html]  view plain copy 在CODE上查看代码片
 
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="utf-8">  
  5.         <title></title>  
  6.         <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>  
  7.         <script type="text/javascript">  
  8.         $(document).ready(function(){  
  9.             var canvas=document.getElementById("myCanvas");  
  10.             var context=canvas.getContext("2d");  
  11.             context.fillStyle="rgb(63,169,245)";  
  12.             context.fillRect(50,50,100,100);  
  13.             context.globalCompositeOperation="destination-out"  
  14.             context.fillStyle="rgb(255,123,172)";  
  15.             context.fillRect(100,100,100,100);  
  16.         });  
  17.         </script>  
  18.     </head>  
  19.     <body>  
  20.         <canvas id="myCanvas" width="1000px" height="1000px"></canvas>  
  21.     </body>  
  22. </html>  

 

【HTML5】Canvas之globalCompositeOperation属性详解

9、lighter

这个值与顺序无关，如果源与目标重叠，就将两者的颜色值想家。得到的颜色值的最大取值为255，结果就为白色。

 

[html]  view plain copy 在CODE上查看代码片
 
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="utf-8">  
  5.         <title></title>  
  6.         <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>  
  7.         <script type="text/javascript">  
  8.         $(document).ready(function(){  
  9.             var canvas=document.getElementById("myCanvas");  
  10.             var context=canvas.getContext("2d");  
  11.             context.fillStyle="rgb(63,169,245)";  
  12.             context.fillRect(50,50,100,100);  
  13.             context.globalCompositeOperation="lighter"  
  14.             context.fillStyle="rgb(255,123,172)";  
  15.             context.fillRect(100,100,100,100);  
  16.         });  
  17.         </script>  
  18.     </head>  
  19.     <body>  
  20.         <canvas id="myCanvas" width="1000px" height="1000px"></canvas>  
  21.     </body>  
  22. </html>  

【HTML5】Canvas之globalCompositeOperation属性详解

 

10、copy

这个值与顺序无关，只绘制源，覆盖掉目标。

 

[html]  view plain copy 在CODE上查看代码片
 
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="utf-8">  
  5.         <title></title>  
  6.         <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>  
  7.         <script type="text/javascript">  
  8.         $(document).ready(function(){  
  9.             var canvas=document.getElementById("myCanvas");  
  10.             var context=canvas.getContext("2d");  
  11.             context.fillStyle="rgb(63,169,245)";  
  12.             context.fillRect(50,50,100,100);  
  13.             context.globalCompositeOperation="copy"  
  14.             context.fillStyle="rgb(255,123,172)";  
  15.             context.fillRect(100,100,100,100);  
  16.         });  
  17.         </script>  
  18.     </head>  
  19.     <body>  
  20.         <canvas id="myCanvas" width="1000px" height="1000px"></canvas>  
  21.     </body>  
  22. </html>  

【HTML5】Canvas之globalCompositeOperation属性详解

 

11、xor

这个值与顺序无关，只绘制出不重叠的源与目标区域。所有重叠的部分都变成透明的

 

[html]  view plain copy 在CODE上查看代码片
 
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="utf-8">  
  5.         <title></title>  
  6.         <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>  
  7.         <script type="text/javascript">  
  8.         $(document).ready(function(){  
  9.             var canvas=document.getElementById("myCanvas");  
  10.             var context=canvas.getContext("2d");  
  11.             context.fillStyle="rgb(63,169,245)";  
  12.             context.fillRect(50,50,100,100);  
  13.             context.globalCompositeOperation="xor"  
  14.             context.fillStyle="rgb(255,123,172)";  
  15.             context.fillRect(100,100,100,100);  
  16.         });  
  17.         </script>  
  18.     </head>  
  19.     <body>  
  20.         <canvas id="myCanvas" width="1000px" height="1000px"></canvas>  
  21.     </body>  
  22. </html>  

【HTML5】Canvas之globalCompositeOperation属性详解

你可能感兴趣的:(canvas)

  • 【前端拓展】Canvas性能革命！WebGPU + WebAssembly混合渲染方案深度解析 爱上大树的小猪 前端js
    为什么需要混合方案？真实场景痛点分析：传统WebGL在高频数据更新时存在CPU-GPU通信瓶颈JavaScript的垃圾回收机制导致渲染卡顿复杂物理模拟（如SPH流体）难以在单线程中实现技术选型对比：graphLRA[计算密集型任务]-->B[WebAssembly]C[图形渲染任务]-->D[WebGPU]B-->E[共享内存]D-->E️环境搭建全流程1.WebGPU环境配置#启用Chrome
  • 保存画布到本地出现的bug和画布的隐藏 小旋风01234 css小程序
    和隔壁画布隐藏一起，卡了我几个小时…保存相册失败后，再次授权//下载btn(){uni.canvasToTempFilePath({//x:100,//y:200,//width:50,//height:50,//destWidth:100,//destHeight:100,fileType:'jpg',canvasId:'myCanvas',success:function(res){//在H5
  • Unity中WolrdSpace下的UI展示在上层 程序员也有头发 Unity开发unityui游戏引擎
    一、问题描述Unity中Canvas使用WorldSpace布局的UI，想让它不被3d物体遮挡，始终显示在上层。二、解决方案使用shader解决在UI的材质中禁用深度测试（ZTest），强制UI始终渲染在最上层。Shader"Custom/UI_NoDepthTest"{Properties{...}SubShader{Tags{"Queue"="Transparent+1000"//设置高优先级
  • Akamai 与 AWS 风控分析与绕过技术探讨 qq_33253945 aws云计算爬虫网络爬虫算法安全
    1.引言本文将深入探讨Akamai风控和AWS签名算法的技术细节。请注意，文中内容仅供技术研究和学习交流使用。2.Akamai风控核心要素Akamai的主要风控机制包含以下几个关键点：Canvas指纹识别每个浏览器环境都有其独特的Canvas指纹这是风控系统的核心识别方式之一用户行为分析鼠标移动轨迹检测操作行为模式识别相关参数的实时计算与验证JA3指纹TLS握手特征识别客户端环境特征分析代码执行流
  • uniapp，自绘仪表盘组件（基础篇） 智驾 uniapp项目实战uni-app仪表
    文章目录一、为什么需要自绘仪表盘？二、准备知识三、实现基础仪表盘1.组件模板结构2.核心绘制逻辑3.样式优化四、使用示例五、核心实现原理六、扩展方向七、常见问题一、为什么需要自绘仪表盘？在物联网、数据监控等场景中，仪表盘是常见的数据可视化组件。uniapp的组件市场虽然有许多现成方案，但自绘组件具有以下优势：完全掌控视觉效果无依赖零冗余高性能Canvas渲染轻松适配多端二、准备知识基础Canvas
  • 指纹浏览器与代理IP的协同技术解析：从匿名性到防关联实现 Hotlogin 火云指纹浏览器指纹浏览器tcp/ip网络协议网络
    一、技术背景与核心需求指纹浏览器通过模拟独立浏览器环境（包括User-Agent、Canvas指纹、WebGL参数等）实现多账号防关联，而代理IP通过隐藏真实IP地址提供网络匿名性。两者结合可解决以下技术痛点：双重身份隔离：单一指纹修改无法完全规避IP关联风险；动态环境模拟：代理IP支持地理位置切换，增强指纹浏览器模拟真实用户行为的能力；反检测能力提升：对抗网站基于IP黑名单或指纹追踪的风控策略。
  • QML ＜ 画布元素＞之画布绘制 ly_zszcyx 学习QmlQt
    绘制四个色块，使用鼠标选择颜色，按下鼠标，在画布上随意绘制绘制四个色块：当鼠标位置改变时，canvas的requestPaint函数用于请求重新绘制画布。函数不会立即触发重绘，而是向事件循环发送一个信号，表明画布需要更新。当事件进入下一次有机会处理时。它会调用onPaint回调函数来执行实际的绘图操作矩形框代码：importQtQuick2.15Item{id:rootpropertycolors
  • Android自定义视图绘制：Canvas实战案例解析 Ramaswamy
    本文还有配套的精品资源，点击获取简介：Android的Canvas工具允许开发者在屏幕上绘制图形，创建丰富视觉效果和交互体验。本案例"DrawDialDemo"深入解析了如何通过Canvas实现自定义画图，从创建画布到使用onDraw()方法，再到旋转图形和动态更新UI等高级技巧。通过实例演示，本案例详细讲解了仪表盘绘制的整个过程，包括指针、刻度线和数字等元素的绘制，以及如何在非UI线程中更新画布
  • 14道web前端工程师面试题及答案解析 蚂蚁小搬运工 web前端
    1.什么是HTML5？它有哪些新特性？答案：HTML5是HTML的第五个版本，引入了很多新的语法和特性，如语义化标签、多媒体支持、Canvas、地理定位、离线存储等。2.什么是WebGL？它有什么作用？答案：WebGL是一种用于在浏览器中渲染3D图形的API。它可以在浏览器中展示流畅和高质量的3D游戏和应用程序。3.什么是Canvas？它有什么作用？答案：Canvas是一种HTML5标签，用于在浏
  • Android自定义View全解析：从基础绘制到复杂交互，实战多种自定义View实现 tangweiguo03051987 android交互
    在Android开发中，自定义View的应用场景非常广泛。根据不同的需求，开发者可以创建各种类型的自定义View。以下是几种常见的自定义View类型及其实现思路和示例。1.自定义绘制View自定义绘制View是最基础的自定义View类型，通常用于绘制图形、文本、图像等内容。开发者通过重写onDraw()方法，使用Canvas和Paint来实现绘制。示例：自定义圆形ViewpublicclassCi
  • 实现全局水印鸿蒙示例代码
    本文原创发布在华为开发者社区。介绍本示例使用组件默认属性overlay实现组件级水印效果。实现全局水印源码链接效果预览使用说明水印效果，只需要在组件加上默认属性overlay即可每一个页面都加上，即可实现全局水印实现思路通过canvas绘制水印在用到的页面，在组件加上默认属性overlay核心代码如下：Canvas(this.context).width('100%').height('100%'
  • HTML5 Canvas制作雪花飘落动画 坚持坚持那些年
    本文还有配套的精品资源，点击获取简介：HTML5引入了Canvas元素，它赋予网页设计师丰富的绘图能力，允许通过JavaScript实现复杂的动画效果。本文将介绍如何结合HTML5的Canvas元素和JavaScript创建一个全屏的雪花飘落背景动画。通过定义雪花对象、创建雪花数组、编写主循环并利用requestAnimationFrame来绘制和更新雪花位置，我们能够实现一个逼真的雪花飘落动画效
  • Canvas资源宝典：全面探索HTML5 Canvas技术 支然苹
    Canvas资源宝典：全面探索HTML5Canvas技术awesome-canvasAcuratedlistofawesomeHTML5Canvaswithexamples,relatedarticlesandposts.项目地址:https://gitcode.com/gh_mirrors/aw/awesome-canvas一、项目介绍项目概述awesome-canvas是由RaphaëlMor
  • 探索创新：CanvasParticles - 点燃你的网页动态效果 柏赢安Simona
    探索创新：CanvasParticles-点燃你的网页动态效果去发现同类优质开源项目:https://gitcode.com/是一个开源的JavaScript库，专注于在HTML5Canvas上创建引人入胜的粒子动画效果。如果你是Web开发者，正在寻找一种方法为你的网站增添独特的视觉吸引力，那么这个项目绝对值得你深入了解。项目简介CanvasParticles提供了一套简洁而强大的API，让你能够
  • 探索CoreHTML5Canvas：创作动态Web图形的新工具 郁英忆
    探索CoreHTML5Canvas：创作动态Web图形的新工具去发现同类优质开源项目:https://gitcode.com/是一个强大的JavaScript库，专为开发者设计，旨在简化和增强在Web上创建交互式和动画图形的能力。这个项目利用HTML5Canvas元素，提供了一个简洁且高效的API，让开发人员可以轻松地构建出丰富的2D渲染效果。技术分析HTML5Canvas是HTML5的一个重要特
  • H5基于Canvas实现电子签名并生成PDF文档 2401_85156853 程序员pdf前端java
    3.注册监听事件letbeginX:number,beginY:number;constcanvas:HTMLCanvasElement=canvasDom.current;constctx=canvas.getContext(‘2d’);ctx.fillStyle=‘#fff’;ctx.fillRect(0,0,canvas.width,canvas.height);canvas.addEven
  • 【Javascript网页设计】在线图片画板案例 Netsuite + 影刀 Javascript案例javascript
    代码如下：在线画板body{text-align:center;font-family:Arial,sans-serif;margin:20px;}.toolbar{margin-bottom:10px;}canvas{border:2pxsolid#000;cursor:crosshair;}button{margin:5px;padding:8px15px;border:none;backgr
  • 写给女朋友的动态爱心代码html（可修改名字） 不太会写 html动画css
    写给女朋友的爱心代码html（可修改名字）桌面新建一个txt文件，把代码复制进去，再把后缀改成.htmlhtml,body{height:100%;padding:0;margin:0;background:#000;}canvas{position:absolute;width:100%;height:100%;animation:anim1.5sease-in-outinfinite;-web
  • H5之webcoekt播放JPEG图片流 视频处理html5
    一、简介既然webcoekt是基于tcp连接的，理论上讲所有的浏览器是可以私有协议处理二进制的，如果我们需要播放视频，我们可以将视频数据在后端解码后直接将图片推送到webcoekt前端，然后前端通过websocket接收图片然后将图片显示到img或canvas中即可，当然这个是我自己设想的，也是应该可以做的到了，做到如下需要以下技术支持：后端直接ffmpeg转码为jpeg图片流后端定制播放协议包括
  • 【uniapp】图片添加canvas水印 sailven uni-appvue拍照图片水印canvas
    目录需求&背景实现地理位置添加水印ios补充需求&背景需求：拍照后给图片添加水印,水印包含经纬度、用户信息、公司logo等信息。效果图：方案：使用canvas添加水印。具体实现：上传图片组件是项目里现有的，主要还是使用uni.chooseImage，这里不做赘述。在上传图片组件中增加一个参数判断是否添加水印，在获取到图片、上传到后端之前对图片进行加工。实现在模板中添加canvas。template
  • Godot4.3 显示像素风格图片模糊如何设置？ 松树戈 Godotgodot
    Godot4.3显示像素风格图片模糊如何设置？使用Godot4.3显示低分辨率像素风图片时比较模糊在ProjectSettings>Rendering>Textures>CanvasTextures设置`Nearest`（或`NearestMipmap`）解决效果使用Godot4.3显示低分辨率像素风图片时比较模糊在ProjectSettings>Rendering>Textures>Canvas
  • Laya2.x游戏引擎入门系列（二）：UI界面开发 安也 i 游戏
    前端开发和游戏开发相信选择laya游戏引擎这类h5游戏引擎的开发者或多或少都有一些前端的开发经验，在开始开发小游戏之后会努力寻找和过往开发经历相似的地方。最后会发现二者之间的关系类似于网页开发和node.js服务端开发之间的关系，虽然都是使用了前端的开发语言（JS或TS），但是背后涉及的知识点却完全不同。小游戏全部是通过canvas或者webgl画在页面中，而网页开发是通过浏览器去做的渲染。我们在
  • vue2 使用 html2canvas 将页面 dom 转为图片并下载记录 TangAcrab 工具dom转图片html转图片
    1、安装html2canvas依赖npminstallhtml2canvas-S2、页面中使用importHtml2Canvasfrom'html2canvas'//下载为png图片asyncdownFileByImg(imgName){//{分项名称}+{统计时段}+“能耗报表”+{导出时间（YYMMDDMMSS）}.pngtry{//文件名称constnowTime=formatDate(ne
  • vite：初学 p5.js demo 画圆圈 belldeep javascriptjavascriptp5.jsvitecircleellipse
    p5.js是一个JavaScript的函数库，它在制作之初就和Processing有同样的目标。就是让艺术家，设计师，教育工作者和编程初学者能够很容易，很轻松地学习和使用程序设计。实际上就是对canvas等代码的封装，简化了在Web中绘图的代码。为了方便，我将使用vite搭建一个原生js项目。1.创建项目npmcreatevite@latestp5-demo选：Vanilla选：JavaScrip
  • npm下载canvas报错 zzzll30 npm前端node.js
    npm下个canvas报错了，网上说的一堆方法都无效。特来记录下。canvas库说是要本地编译，需要本地的一些环境。跑canvas脚本报错。提示是需要安装python大于3.6.0的版本。根本原因是canvas下载完成后需要执行这句话node-pre-gypinstall--fallback-to-build--update-binary一般有两种解决方法第一种是下载编译好的适合自己操作系统的二进
  • 计算机编程 英语词汇 ZhangJiQun&MXP 2020c数据结构
    radius：半径Slate：石板，写字板Canvas：画布Airbrush：气笔，喷枪fountain：found：建立，从下向上：喷泉。压力值：PressurevalueBrushesPlotter：刷子，绘图仪画板。Stroke:(打、击等的)一下Strokes:笔画platform---平台version---版本project---项目existing---存在的checkout---检
  • 解决uniapp生成自定义海报/邀请名片，保存图片到本地
    本代码片段使用插件《qs-canvas》，支持Node、web、uni-app的canvas绘图工具。效果图安装npm包npminstallqs-canvas-S代码片段//index.vue保存图片到本地import{reactive,ref,computed,onMounted,getCurrentInstance}from'vue';import{getQrCode}from'./api/i
  • 可视化学习：WebGL实现简易的局部“马赛克”
    前言接触过Canvas的小伙伴应该都知道，在Canvas2D中我们要加载一个图片很简单，通过调用drawImageAPI就能将图像绘制到画布上，当然在WebGL中我们也可以绘制图像，在绘制时我们需要用到WebGL中的纹理对象，在之前WebGL实现网格背景的文章中，我使用了一个叫做纹理坐标的配置，现在要完成纹理的加载我们也需要用到纹理坐标，并且我们可以通过对纹理坐标处理实现简单的”马赛克“效果。通过
  • 可视化学习：使用WebGL绘制圆形，实现色盘
    前言在Canvas2D中实现圆形的绘制比较简单，只要调用arc指令就能在Canvas画布上绘制出一个圆形，类似的，在SVG中我们也只需要一个标签就能在页面上绘制一个圆形。那么在WebGL中我们要怎么去绘制呢？WebGL只能绘制三种形状：点、线段和三角形，它没有提供直接绘制圆形的功能，当然也无法像SVG一样使用标签，所以我们是无法直接绘制圆形曲线的，这个时候我们可以借助相关的数学知识，来实现圆形的绘
  • 为啥图片会模糊，canvas显示优化
    图片的原始尺寸，就是图片原始的拍摄或者生成出来的大小naturalWidth,原始宽度naturalHeight,原始高度样式尺寸img标签上的width，height缩放倍率，受浏览器缩放影响大小，跟操作系统设置也有关系，反正最后就是个值window.devicePixelRatio清晰度高满足如下公式原始尺寸=样式尺寸*缩放倍率画一个canvas来试试/*样式尺寸*/.canvas{width
  • ASM系列六 利用TreeApi 添加和移除类成员 lijingyao8206 jvm动态代理ASM字节码技术TreeAPI
        同生成的做法一样，添加和移除类成员只要去修改fields和methods中的元素即可。这里我们拿一个简单的类做例子，下面这个Task类，我们来移除isNeedRemove方法，并且添加一个int 类型的addedField属性。   package asm.core; /** * Created by yunshen.ljy on 2015/6/
  • Springmvc-权限设计 bee1314 springWebjsp
    万丈高楼平地起。 权限管理对于管理系统而言已经是标配中的标配了吧，对于我等俗人更是不能免俗。同时就目前的项目状况而言，我们还不需要那么高大上的开源的解决方案，如Spring Security，Shiro。小伙伴一致决定我们还是从基本的功能迭代起来吧。 目标： 1.实现权限的管理（CRUD） 2.实现部门管理 （CRUD) 3.实现人员的管理 （CRUD） 4.实现部门和权限
  • 算法竞赛入门经典（第二版）第2章习题 CrazyMizzz c算法
    2.4.1 输出技巧 #include <stdio.h> int main() { int i, n; scanf("%d", &n); for (i = 1; i <= n; i++) printf("%d\n", i); return 0; } 习题2-2 水仙花数(daffodil
  • struts2中jsp自动跳转到Action 麦田的设计者 jspwebxmlstruts2自动跳转
    1、在struts2的开发中，经常需要用户点击网页后就直接跳转到一个Action，执行Action里面的方法，利用mvc分层思想执行相应操作在界面上得到动态数据。毕竟用户不可能在地址栏里输入一个Action（不是专业人士）   2、＜jsp:forward page="xxx.action" /＞ ，这个标签可以实现跳转，page的路径是相对地址,不同与jsp和j
  • php 操作webservice实例 IT独行者 PHPwebservice
    首先大家要简单了解了何谓webservice，接下来就做两个非常简单的例子，webservice还是逃不开server端与client端。我测试的环境为：apache2.2.11 php5.2.10做这个测试之前，要确认你的php配置文件中已经将soap扩展打开，即extension=php_soap.dll; OK 现在我们来体验webservice //server端 serve
  • Windows下使用Vagrant安装linux系统 _wy_ windowsvagrant
    准备工作： 下载安装 VirtualBox ：https://www.virtualbox.org/ 下载安装 Vagrant ：http://www.vagrantup.com/ 下载需要使用的 box ： 官方提供的范例：http://files.vagrantup.com/precise32.box 还可以在 http://www.vagrantbox.es/ 
  • 更改linux的文件拥有者及用户组(chown和chgrp) 无量 clinuxchgrpchown
    本文（转） http://blog.163.com/yanenshun@126/blog/static/128388169201203011157308/ http://ydlmlh.iteye.com/blog/1435157 一、基本使用： 使用chown命令可以修改文件或目录所属的用户：        命令
  • linux下抓包工具 矮蛋蛋 linux
    原文地址： http://blog.chinaunix.net/uid-23670869-id-2610683.html tcpdump -nn -vv -X udp port 8888 上面命令是抓取udp包、端口为8888 netstat -tln 命令是用来查看linux的端口使用情况 13 . 列出所有的网络连接 lsof -i 14. 列出所有tcp 网络连接信息 l
  • 我觉得mybatis是垃圾！：“每一个用mybatis的男纸，你伤不起” alafqq mybatis
    最近看了  每一个用mybatis的男纸，你伤不起 原文地址 ：http://www.iteye.com/topic/1073938 发表一下个人看法。欢迎大神拍砖； 个人一直使用的是Ibatis框架，公司对其进行过小小的改良； 最近换了公司，要使用新的框架。听说mybatis不错；就对其进行了部分的研究； 发现多了一个mapper层；个人感觉就是个dao；
  • 解决java数据交换之谜 百合不是茶 数据交换
    交换两个数字的方法有以下三种 ，其中第一种最常用   /* 输出最小的一个数 */ public class jiaohuan1 { public static void main(String[] args) { int a =4; int b = 3; if(a<b){ // 第一种交换方式 int tmep =
  • 渐变显示 bijian1013 JavaScript
    <style type="text/css"> #wxf { FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#97FF98); height: 25px; } </style>
  • 探索JUnit4扩展：断言语法assertThat bijian1013 java单元测试assertThat
    一.概述         JUnit 设计的目的就是有效地抓住编程人员写代码的意图，然后快速检查他们的代码是否与他们的意图相匹配。 JUnit 发展至今，版本不停的翻新，但是所有版本都一致致力于解决一个问题，那就是如何发现编程人员的代码意图，并且如何使得编程人员更加容易地表达他们的代码意图。JUnit 4.4 也是为了如何能够
  • 【Gson三】Gson解析{"data":{"IM":["MSN","QQ","Gtalk"]}} bit1129 gson
      如何把如下简单的JSON字符串反序列化为Java的POJO对象? {"data":{"IM":["MSN","QQ","Gtalk"]}}   下面的POJO类Model无法完成正确的解析：   import com.google.gson.Gson;
  • 【Kafka九】Kafka High Level API vs. Low Level API bit1129 kafka
    1. Kafka提供了两种Consumer API High Level Consumer API Low Level Consumer API(Kafka诡异的称之为Simple Consumer API，实际上非常复杂) 在选用哪种Consumer API时，首先要弄清楚这两种API的工作原理，能做什么不能做什么，能做的话怎么做的以及用的时候，有哪些可能的问题  
  • 在nginx中集成lua脚本：添加自定义Http头，封IP等 ronin47 nginx lua
    Lua是一个可以嵌入到Nginx配置文件中的动态脚本语言，从而可以在Nginx请求处理的任何阶段执行各种Lua代码。刚开始我们只是用Lua 把请求路由到后端服务器，但是它对我们架构的作用超出了我们的预期。下面就讲讲我们所做的工作。 强制搜索引擎只索引mixlr.com Google把子域名当作完全独立的网站，我们不希望爬虫抓取子域名的页面，降低我们的Page rank。 location /{
  • java-归并排序 bylijinnan java
    import java.util.Arrays; public class MergeSort { public static void main(String[] args) { int[] a={20,1,3,8,5,9,4,25}; mergeSort(a,0,a.length-1); System.out.println(Arrays.to
  • Netty源码学习-CompositeChannelBuffer bylijinnan javanetty
    CompositeChannelBuffer体现了Netty的“Transparent Zero Copy” 查看API（ http://docs.jboss.org/netty/3.2/api/org/jboss/netty/buffer/package-summary.html#package_description） 可以看到，所谓“Transparent Zero Copy”是通
  • Android中给Activity添加返回键 hotsunshine Activity
    // this need android:minSdkVersion="11" getActionBar().setDisplayHomeAsUpEnabled(true); @Override public boolean onOptionsItemSelected(MenuItem item) {
  • 静态页面传参 ctrain 静态
    $(document).ready(function () { var request = { QueryString : function (val) { var uri = window.location.search; var re = new RegExp("" + val + "=([^&?]*)", &
  • Windows中查找某个目录下的所有文件中包含某个字符串的命令 daizj windows查找某个目录下的所有文件包含某个字符串
    findstr可以完成这个工作。   [html]  view plain copy   >findstr /s /i "string" *.*   上面的命令表示，当前目录以及当前目录的所有子目录下的所有文件中查找"string&qu
  • 改善程序代码质量的一些技巧 dcj3sjt126com 编程PHP重构
    有很多理由都能说明为什么我们应该写出清晰、可读性好的程序。最重要的一点，程序你只写一次，但以后会无数次的阅读。当你第二天回头来看你的代码 时，你就要开始阅读它了。当你把代码拿给其他人看时，他必须阅读你的代码。因此，在编写时多花一点时间，你会在阅读它时节省大量的时间。让我们看一些基本的编程技巧：    尽量保持方法简短    尽管很多人都遵
  • SharedPreferences对数据的存储 dcj3sjt126com
    SharedPreferences简介：                                                   &nbs
  • linux复习笔记之bash shell (2) bash基础 eksliang bashbash shell
    转载请出自出处： http://eksliang.iteye.com/blog/2104329 1.影响显示结果的语系变量（locale）  1.1locale这个命令就是查看当前系统支持多少种语系，命令使用如下： [root@localhost shell]# locale LANG=en_US.UTF-8 LC_CTYPE="en_US.UTF-8"
  • Android零碎知识总结 gqdy365 android
    1、CopyOnWriteArrayList add(E) 和remove(int index)都是对新的数组进行修改和新增。所以在多线程操作时不会出现java.util.ConcurrentModificationException错误。 所以最后得出结论：CopyOnWriteArrayList适合使用在读操作远远大于写操作的场景里，比如缓存。发生修改时候做copy，新老版本分离，保证读的高
  • HoverTree.Model.ArticleSelect类的作用 hvt Web.netC#hovertreeasp.net
    ArticleSelect类在命名空间HoverTree.Model中可以认为是文章查询条件类，用于存放查询文章时的条件，例如HvtId就是文章的id。HvtIsShow就是文章的显示属性，当为-1是，该条件不产生作用，当为0时，查询不公开显示的文章，当为1时查询公开显示的文章。HvtIsHome则为是否在首页显示。HoverTree系统源码完全开放，开发环境为Visual Studio 2013
  • PHP 判断是否使用代理 PHP Proxy Detector 天梯梦 proxy
    1. php 类 I found this class looking for something else actually but I remembered I needed some while ago something similar and I never found one. I'm sure it will help a lot of developers who try to
  • apache的math库中的回归——regression（翻译） lvdccyb Mathapache
    这个Math库，虽然不向weka那样专业的ML库，但是用户友好，易用。 多元线性回归，协方差和相关性（皮尔逊和斯皮尔曼），分布测试（假设检验，t，卡方，G），统计。   数学库中还包含，Cholesky，LU，SVD，QR，特征根分解，真不错。   基本覆盖了：线代，统计，矩阵， 最优化理论 曲线拟合 常微分方程 遗传算法（GA）， 还有3维的运算。。。
  • 基础数据结构和算法十三：Undirected Graphs (2) sunwinner Algorithm
      Design pattern for graph processing. Since we consider a large number of graph-processing algorithms, our initial design goal is to decouple our implementations from the graph representation
  • 云计算平台最重要的五项技术 sumapp 云计算云平台智城云
    云计算平台最重要的五项技术 1、云服务器 云服务器提供简单高效，处理能力可弹性伸缩的计算服务，支持国内领先的云计算技术和大规模分布存储技术，使您的系统更稳定、数据更安全、传输更快速、部署更灵活。 特性 机型丰富 通过高性能服务器虚拟化为云服务器，提供丰富配置类型虚拟机，极大简化数据存储、数据库搭建、web服务器搭建等工作； 仅需要几分钟，根据CP
  • 《京东技术解密》有奖试读获奖名单公布 ITeye管理员 活动
    ITeye携手博文视点举办的12月技术图书有奖试读活动已圆满结束，非常感谢广大用户对本次活动的关注与参与。  12月试读活动回顾： http://webmaster.iteye.com/blog/2164754 本次技术图书试读活动获奖名单及相应作品如下： 一等奖（两名） Microhardest：http://microhardest.ite
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他