【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)

  • 高仿一个echarts饼图 街角小林2
    开头饼图，很常见的一种图表，使用任何一个图表库都能轻松的渲染出来，但是，我司的交互想法千奇百怪，布局捉摸不透，本身饼图是没啥可变的，但是配套的图例千变万化，翻遍ECharts配置文档都还原不出来，那么有两条路可以选，一是跟交互说实现不了，说服交互按图表库的布局来，但是一般交互可能会对你灵魂拷问，为什么别人都能做出来，你做不出来？所以我选第二种，自己做一个得了。用canvas实现一个饼图很简单，所以
  • 360前端星计划-动画可以这么玩 马小蜗
    动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
  • JavaScript中秋快乐！ Q_w7742 javascript开发语言ecmascript
    我们来实现一个简单的祝福网页~主要的难度在于使用canvas绘图当点击canvas时候，跳出“中秋节快乐”字样，需要注册鼠标单击事件和计时器。首先定义主要函数：初始化当点击canvas之后转到onCanvasClick函数，绘图生成灯笼。functiononCanvasClick(){//事件处理函数context.clearRect(0,0,canvas1.width,canvas1.heigh
  • WPF绘图(基础图形：直线、矩形和椭圆) 未来无限 C#WPF程序设计wpf绘图直线矩形椭圆
    目录一、概述二、基本图形绘制2.1直线2.2矩形2.3椭圆一、概述与传统的.NET开发使用GDI+进行绘图不同，WPF拥有自己的一套图形API，绘图为矢量图。绘图可以在任何一种布局控件中完成，wpf会根据容器计算相应坐标。最常用的是Canvas和Grid。基本图形包括以下几个，都是Shaper类的派生类。1、Line，直线段，可以设置Stroke2、Rectangle，有Stroke也有Fill3
  • 微信小程序使用canvas画图保存图片到手机相册 岩岩很哇塞！ 微信小程序微信小程序小程序canva可画
    微信小程序要实现使用canvas绘制一个图，然后保存到手机相册**最终效果：**实现生成以下图片一、初始化canvas//wxml页面设置canvas标签//js页面初始化canvasdata:{ctx:'',details:'',windowW:375*3,windowH:265*3,ratio:3,showCanvas:false},onLoad(options){this.setData({
  • vue 生成PDF(A4标准PDF分页) qq_39016177 HTML2CanvasjsPDF导出PDF转换DOM操作
    1.先安装两个插件//页面转图片npminstall--savehtml2canvas//图片转PDFnpminstalljspdf--save 2.在需要导出的dom节点增加ref='pdf'例如  这是待转换的页面，点击导出点击导出PDF3.定义导出方法handleExport(){   downloadPDF(this.$refs.pdf);},4.在页面导入 import{download
  • 微信小程序中实现类似于 ECharts 的图表渲染及优化 人工智能的苟富贵 前端小程序微信小程序echarts小程序
    文章目录前言一、微信小程序中使用ECharts概述二、ECharts在小程序中的集成步骤2.1在小程序项目的根目录下，运行以下命令安装echarts依赖：2.2在小程序的components文件夹中创建ec-canvas组件。2.3在需要展示图表的页面中，引用ec-canvas组件，并初始化ECharts图表：三、微信小程序中使用Canvas绘制图表基础示例：绘制一个简单的折线图四、动态数据更新的
  • 小程序将图片保存到本地 前端-文龙刚 小程序小程序javascript开发语言
    wx.downloadFile({//先将图片下载下来url:canvasToTempFilePath,//图片地址success:function(res){//图片保存本地操作wx.saveImageToPhotosAlbum({filePath:res.tempFilePath,success:function(data){wx.hideLoading()wx.showToast({titl
  • vue前端根据接口返回的url 下载图片 爱心觉罗晓宇 java前端服务器
    downloadPicture(imgSrc,name){constimage=newImage();//解决跨域Canvas污染问题image.setAttribute("crossOrigin","anonymous");image.src=imgSrc;image.onload=()=>{constcanvas=document.createElement("canvas");canvas.
  • HTML5（六）canvas 矩形、路径、画板功能 祝名
    一.绘制矩形1.什么是canvascanvas标签相当于一个画板；canvas的宽高不要用css去定义，直接在标签中用属性写；2.obj=c.getContext('2d');获得2d绘画环境（相当于铺了一层画布）绘画图像的操作都会在obj这个绘画环境中存储；3.绘画方法及样式x,y为坐标样例：二.canvas路径1.方法2.样例cv.lineJoin='round';//边界类型为弧形三.画板功
  • vue+threeJS示例（001）: 不断翻转的立体箱体 还是大剑师兰特 #ThreeJS综合教程200+threejs入门threejs教程threejs示例大剑师
    作者：还是大剑师兰特，曾为美国某知名大学计算机专业研究生，现为国内GIS领域高级前端工程师，CSDN知名博主，深耕openlayers、leaflet、mapbox、cesium，canvas，echarts等技术开发，欢迎加微信（gis-dajianshi），一起交流。查看本专栏目录-本文是第001个示例文章目录一、示例效果图二、示例简介三、配置说明四、示例源代码（共88行）一、示例效果图二、示
  • Flutter 自绘组件 （CustomPaint与Canvas）绘制虚线、区域、直线（一） goodhighting 程序员flutter前端javascript
    有人也许会疑惑，方案1和方案二不都是采用的绘制吗，那可不一定。有的时候解决问题，我们不遵循常规也可以解决问题，满足一时之需了。1、解决问题奇葩方式一：为什么奇葩呢？我们采用多个Container进行竖直或者水平排列完成了效果，至于性能上我们后面慢慢验证了。_lineContainer(){returnContainer(margin:EdgeInsets.only(top:2.0),color:C
  • 纯js简易五子棋 敬@过往 javascript前端开发语言
    一、利用canvas绘制五子棋（代码较为简陋请见谅）这里单独拿出一个绘制好的黑色五子棋展示五子棋-------------人生如棋，落子无悔！！！constcanvas=document.createElement('canvas');canvas.width=900;canvas.height=900;document.body.append(canvas);constcontext=canva
  • 自定义控件实现类似于抖音加载动画效果 折翅鵬 Androidandroidkotlin
    最近做AI项目，设计师想实现类似于抖音那种加载动画效果，但是不是两个圆球交叉，而是两个三角形，其实可以用lottie动画的，但是我本人比较喜欢自定义控件，因此就自定义控件实现了。代码如下：importandroid.animation.ValueAnimatorimportandroid.content.Contextimportandroid.graphics.Canvasimportandro
  • 如何将dom转化为pdf Olivia小饼干 javascripthtmldom
    1.先局部打印方法一：通过id选择器来替换内容打印2.这样打印转化成PDF是调用浏览器默认的功能存在的问题就是echarts生成的canvas显示不出来这样就要到以下方法:3.htmljs打印图片不显示canvas将canvas转化成base64用img标签显示出来4.浏览器默认的打印可以转化成PDF,选中就行了
  • 通过前端实现导出生成pdf文件并下载 银河小铁皮 vue原生JS前端javascriptvue.js
    通过前端实现导出生成pdf文件并下载使用jspdf.js+html2canvas插件，实现前端生成pdf并下载的功能步骤如下1、先通过npm安装插件npminstalljspdf.jsnpminstallhtml2canvas2、单独在utils文件夹下，新建文件，存放处理代码/*eslint-disable*///不使用JQuery版的importhtml2canvasfrom'html2can
  • 6. Fabric 拖拽元素到画布 Lanwarf-前端开发 Fabricfabric前端javascript
    监听元素是否被下放到画布上canvas.on('drop',elt=>{//画布元素距离浏览器左侧和顶部的距离letoffset={left:canvas.getSelectionElement().getBoundingClientRect().left,top:canvas.getSelectionElement().getBoundingClientRect().top}//鼠标坐标转换成画
  • 4. Fabric 动画和事件 Lanwarf-前端开发 Fabricfabricjavascript
    1.动画//添加文本lettext=newfabric.FabricText('helloworld',{left:100,top:100})canvas.add(text)text.animate({left:300,top:200,fontSize:48,fill:'blue'},{duration:2000,//设置动画的持续时间为2000毫秒onChange:canvas.renderAl
  • canvas插件 fabric.js 使用 lxw_powerfulCat 前端javascriptfabrichtml
    fabric.js使用fabric.js是常用的canvas插件1,在项目中使用2,特殊用法①,基本设置②,画板数据的导入导出③,遮罩Pattern(引用官网案例)④,多个对象合并,并设置为fabric背景(适用于变色和更多场景)⑤,把canvas对象或者fabric对象导出为图片⑥,位置的获取思路一:(计算法,没算出来)思路二(记录位置)补充:鼠标位移留痕不规则线条在如下代码中注意事项fabri
  • 3. Fabric 基本使用 Lanwarf-前端开发 Fabricfabric前端javascript
    1.画正方形letcanvas=newfabric.Canvas('canvas',{backgroundColor:'grey'})//画正方形letrect=newfabric.Rect({left:100,top:100,fill:'red',width:20,height:20,angle:45})canvas.add(rect)2.画圆letcanvas=newfabric.Canvas
  • 5. Fabric 设置画布大小 Lanwarf-前端开发 Fabricfabric
    1.设置宽度canvas.setWidth(width)2.设置高度canvas.setHeight(height)3.设置大小canvas.setDimensions({width,height})4.画布的缩放canvas.on('mouse:wheel',(opt)=>{constdelta=opt.e.deltaY//滚轮，向上滚一下是-100，向下滚一下是100letzoom=canva
  • 解决用canvas插入背景图片模糊的办法 每天瞎忙的农民工 前端canvas
    问题：用canvas绘制图片的时候会模糊，但是用img显示的时候就不会，canvas和img的大小是相同的至于为什么会变模糊，这和浏览器处理canvas的方式有关，相关的文章可以参考这篇HighDPICanvas，这里不作深入介绍。下面是相关的代码：[html]viewplaincopy[html]viewplaincopyfunctioninit(){varcanvas=document.que
  • 19-进阶：Canvas 画板续（兼容触屏设备） 格林姆大师
    本节知识点JS知识点touch事件触屏设备上，mouse事件已不适用，需转换为touch事件；检测是否为触屏设备方法1：//开始绘画if('ontouchstart'inwindow){touchDrawStart();}else{mouseDrawStart();}方法2：//开始绘画if('ontouchstart'inwindow){touchDrawStart();}else{mouseD
  • hiprint打印/jsPDF使用/html2canvas song854601134 javascriptnode.jsjs
    最初我知道hiprint.print是可以打印双模板的，于是查看hiprint.print的源码发现底层实现是this.getHtml(t).hiwprint,于是断点查看getHtm的实现，得知它是遍历我们对print传参的list，利用list中模板对象的getHtml()方法得到模板的dom对象，同时利用append将两个模板dom拼接到一个模板对象里然后返回。至此我们可以拿到一个合成的模板
  • 【前端面试】标记、绘画视频的某一帧 贾明恣 前端音视频
    搜寻三方库在前端开发中，Canvas是一个强大的工具，可以用来创建图形、动画和各种视觉效果。为了简化和增强Canvas的使用，社区中出现了许多库。以下是一些主流的Canvas库及其特性和性能对比：Fabric.js：概述：Fabric.js是一个基于对象的Canvas库，提供了丰富的API来操作和管理Canvas元素。它特别适合处理交互式和可编辑的图形应用，如在线图像编辑器、绘图工具等。优点：面向
  • Python -- GUI图形界面编程—GUI编程实例 博主也在持续学习中[ 持续更新中！！！ 欢迎白嫖 也求粉啊啊啊~ ] 梦茹^_^ Python_GUI编程python开发语言GUI经验分享前端框架前端组件
    本文继上篇文章http://t.csdnimg.cn/rrsIL继续介绍GUI的图形界面编程（相关视频是哔站上的应该搜这个题目就能找到），文章还是很基础的，目前博主处于有一点基础的状态。文章的主要介绍了依旧非常重要的结构tinkter库、重要组件简介（这个不用死记硬背用的时候再说）、Text（多行文本框）、Radiobutton、Checkbutton、Canvas画布，依旧是很多代码部分是重复的
  • 使用fabric.js简简单单实现一个画板 小草先森tyro 前端
    什么是fabricfabric是一个功能强大的JavaScript库,运行在HTML5canvas上。fabric为canvas提供了一个交互式对象模型，以及一个svg-to-canvas解析器。与canvas的区别来一个简单的例子来说明一下fabric与canvas的区别，假设我们想在一个画布上画一个红色的矩形：//原生canvasapi//有一个id是c的canvas元素varcanvasEl
  • 探索vue-fabric：强大的Vue图形编辑库 林浪其Geneva
    探索vue-fabric：强大的Vue图形编辑库vue-fabric基于canvasfabric.js库创建的vuefabric组件，定制画板，图片组合绘制项目地址:https://gitcode.com/gh_mirrors/vu/vue-fabric在现代Web开发中，图形编辑器的需求日益增长，无论是在线设计工具、教育应用还是企业内部的管理系统，一个灵活且功能丰富的图形编辑器都是不可或缺的。今
  • 探索 Fabric.js：前端开发的轻量级图形编辑框架 滑辰煦Marc
    探索Fabric.js：前端开发的轻量级图形编辑框架是一个强大的、基于WebGL和SVG的JavaScript图形库，专为构建交互式图形界面而设计。它提供了一种简单的方式来在网页上创建和操纵矢量对象，包括文本、形状、图像等，并且具有丰富的可定制性和性能优化。项目简介Fabric.js提供了一个统一的对象模型，使得处理HTML5canvas上的元素变得异常简单。无论是创建复杂的绘图应用，还是实现动态
  • uniapp 微信小程序 分享海报的实现 前端不加班 前端javascriptuniapp微信小程序海报
    主页面保存-->-->微信好友-->朋友圈-->保存图片-->-->importposterfrom"@/components/poster/index";import{saveImageToPhotosAlbum}from'@/utils/poster.js';exportdefault{components:{poster},data(){return{code:'',canvasImages
  • 强大的销售团队背后 竟然是大数据分析的身影 蓝儿唯美 数据分析
    Mark Roberge是HubSpot的首席财务官，在招聘销售职位时使用了大量数据分析。但是科技并没有挤走直觉。 大家都知道数理学家实际上已经渗透到了各行各业。这些热衷数据的人们通过处理数据理解商业流程的各个方面，以重组弱点，增强优势。 Mark Roberge是美国HubSpot公司的首席财务官，HubSpot公司在构架集客营销现象方面出过一份力——因此他也是一位数理学家。他使用数据分析
  • Haproxy+Keepalived高可用双机单活 bylijinnan 负载均衡keepalivedhaproxy高可用
    我们的应用MyApp不支持集群，但要求双机单活（两台机器：master和slave）： 1.正常情况下，只有master启动MyApp并提供服务 2.当master发生故障时，slave自动启动本机的MyApp，同时虚拟IP漂移至slave，保持对外提供服务的IP和端口不变 F5据说也能满足上面的需求，但F5的通常用法都是双机双活，单活的话还没研究过 服务器资源 10.7
  • eclipse编辑器中文乱码问题解决 0624chenhong eclipse乱码
    使用Eclipse编辑文件经常出现中文乱码或者文件中有中文不能保存的问题，Eclipse提供了灵活的设置文件编码格式的选项，我们可以通过设置编码 格式解决乱码问题。在Eclipse可以从几个层面设置编码格式：Workspace、Project、Content Type、File 本文以Eclipse 3.3（英文）为例加以说明： 1. 设置Workspace的编码格式： Windows-&g
  • 基础篇--resources资源 不懂事的小屁孩 android
    最近一直在做java开发，偶尔敲点android代码，突然发现有些基础给忘记了，今天用半天时间温顾一下resources的资源。 String.xml    字符串资源   涉及国际化问题  http://www.2cto.com/kf/201302/190394.html   string-array
  • 接上篇补上window平台自动上传证书文件的批处理问卷 酷的飞上天空 window
    @echo off : host=服务器证书域名或ip，需要和部署时服务器的域名或ip一致 ou=公司名称, o=公司名称 set host=localhost set ou=localhost set o=localhost set password=123456 set validity=3650 set salias=s
  • 企业物联网大潮涌动：如何做好准备？ 蓝儿唯美 企业
    物联网的可能性也许是无限的。要找出架构师可以做好准备的领域然后利用日益连接的世界。 尽管物联网（IoT）还很新，企业架构师现在也应该为一个连接更加紧密的未来做好计划，而不是跟上闸门被打开后的集成挑战。“问题不在于物联网正在进入哪些领域，而是哪些地方物联网没有在企业推进，” Gartner研究总监Mike Walker说。 Gartner预测到2020年物联网设备安装量将达260亿，这些设备在全
  • spring学习——数据库（mybatis持久化框架配置） a-john mybatis
    Spring提供了一组数据访问框架，集成了多种数据访问技术。无论是JDBC，iBATIS(mybatis)还是Hibernate，Spring都能够帮助消除持久化代码中单调枯燥的数据访问逻辑。可以依赖Spring来处理底层的数据访问。 mybatis是一种Spring持久化框架，要使用mybatis，就要做好相应的配置： 1，配置数据源。有很多数据源可以选择，如：DBCP，JDBC，aliba
  • Java静态代理、动态代理实例 aijuans Java静态代理
    采用Java代理模式，代理类通过调用委托类对象的方法，来提供特定的服务。委托类需要实现一个业务接口，代理类返回委托类的实例接口对象。 按照代理类的创建时期，可以分为：静态代理和动态代理。 所谓静态代理：　指程序员创建好代理类，编译时直接生成代理类的字节码文件。 所谓动态代理：　在程序运行时，通过反射机制动态生成代理类。   一、静态代理类实例： 1、Serivce.ja
  • Struts1与Struts2的12点区别 asia007 Struts1与Struts2
    1) 在Action实现类方面的对比：Struts 1要求Action类继承一个抽象基类；Struts 1的一个具体问题是使用抽象类编程而不是接口。Struts 2 Action类可以实现一个Action接口，也可以实现其他接口，使可选和定制的服务成为可能。Struts 2提供一个ActionSupport基类去实现常用的接口。即使Action接口不是必须实现的，只有一个包含execute方法的P
  • 初学者要多看看帮助文档 不要用js来写Jquery的代码 百合不是茶 jqueryjs
    解析json数据的时候需要将解析的数据写到文本框中,  出现了用js来写Jquery代码的问题;   1, JQuery的赋值  有问题    代码如下: data.username 表示的是:  网易            $("#use
  • 经理怎么和员工搞好关系和信任 bijian1013 团队项目管理管理
            产品经理应该有坚实的专业基础，这里的基础包括产品方向和产品策略的把握，包括设计，也包括对技术的理解和见识，对运营和市场的敏感，以及良好的沟通和协作能力。换言之，既然是产品经理，整个产品的方方面面都应该能摸得出门道。这也不懂那也不懂，如何让人信服？如何让自己懂？就是不断学习，不仅仅从书本中，更从平时和各种角色的沟通
  • 如何为rich:tree不同类型节点设置右键菜单 sunjing contextMenutreeRichfaces
    组合使用target和targetSelector就可以啦，如下： <rich:tree id="ruleTree" value="#{treeAction.ruleTree}" var="node" nodeType="#{node.type}" selectionChangeListener=&qu
  • 【Redis二】Redis2.8.17搭建主从复制环境 bit1129 redis
    开始使用Redis2.8.17 Redis第一篇在Redis2.4.5上搭建主从复制环境，对它的主从复制的工作机制，真正的惊呆了。不知道Redis2.8.17的主从复制机制是怎样的，Redis到了2.4.5这个版本，主从复制还做成那样，Impossible is nothing! 本篇把主从复制环境再搭一遍看看效果，这次在Unbuntu上用官方支持的版本。   Ubuntu上安装Red
  • JSONObject转换JSON--将Date转换为指定格式 白糖_ JSONObject
    项目中，经常会用JSONObject插件将JavaBean或List<JavaBean>转换为JSON格式的字符串，而JavaBean的属性有时候会有java.util.Date这个类型的时间对象，这时JSONObject默认会将Date属性转换成这样的格式：   {"nanos":0,"time":-27076233600000,
  • JavaScript语言精粹读书笔记 braveCS JavaScript
    【经典用法】：   //①定义新方法 Function .prototype.method=function(name, func){ this.prototype[name]=func; return this; } //②给Object增加一个create方法，这个方法创建一个使用原对
  • 编程之美-找符合条件的整数 用字符串来表示大整数避免溢出 bylijinnan 编程之美
    import java.util.LinkedList; public class FindInteger { /** * 编程之美 找符合条件的整数 用字符串来表示大整数避免溢出 * 题目：任意给定一个正整数N，求一个最小的正整数M(M>1)，使得N*M的十进制表示形式里只含有1和0 * * 假设当前正在搜索由0，1组成的K位十进制数
  • 读书笔记 chengxuyuancsdn 读书笔记
    1、Struts访问资源 2、把静态参数传递给一个动作 3、<result>type属性 4、s:iterator、s:if c:forEach 5、StringBuilder和StringBuffer 6、spring配置拦截器 1、访问资源 (1)通过ServletActionContext对象和实现ServletContextAware,ServletReque
  • [通讯与电力]光网城市建设的一些问题 comsci 问题
          信号防护的问题,前面已经说过了,这里要说光网交换机与市电保障的关系       我们过去用的ADSL线路,因为是电话线,在小区和街道电力中断的情况下,只要在家里用笔记本电脑+蓄电池,连接ADSL,同样可以上网........     
  • oracle 空间RESUMABLE daizj oracle空间不足RESUMABLE错误挂起
    空间RESUMABLE操作  转 Oracle从9i开始引入这个功能，当出现空间不足等相关的错误时，Oracle可以不是马上返回错误信息，并回滚当前的操作，而是将操作挂起，直到挂起时间超过RESUMABLE TIMEOUT，或者空间不足的错误被解决。 这一篇简单介绍空间RESUMABLE的例子。 第一次碰到这个特性是在一次安装9i数据库的过程中，在利用D
  • 重构第一次写的线程池 dieslrae 线程池 python
    最近没有什么学习欲望,修改之前的线程池的计划一直搁置,这几天比较闲,还是做了一次重构,由之前的2个类拆分为现在的4个类. 1、首先是工作线程类:TaskThread,此类为一个工作线程,用于完成一个工作任务,提供等待(wait),继续(proceed),绑定任务(bindTask)等方法 #!/usr/bin/env python # -*- coding:utf8 -*-
  • C语言学习六指针 dcj3sjt126com c
    初识指针，简单示例程序： /* 指针就是地址，地址就是指针 地址就是内存单元的编号 指针变量是存放地址的变量 指针和指针变量是两个不同的概念 但是要注意： 通常我们叙述时会把指针变量简称为指针，实际它们含义并不一样 */ # include <stdio.h> int main(void) { int * p; // p是变量的名字， int *
  • yii2 beforeSave afterSave beforeDelete dcj3sjt126com delete
    public function afterSave($insert, $changedAttributes) { parent::afterSave($insert, $changedAttributes); if($insert) { //这里是新增数据 } else { //这里是更新数据 } }  
  • timertask shuizhaosi888 timertask
    java.util.Timer timer = new java.util.Timer(true); // true 说明这个timer以daemon方式运行（优先级低， // 程序结束timer也自动结束），注意，javax.swing // 包中也有一个Timer类，如果import中用到swing包， // 要注意名字的冲突。 TimerTask task = new
  • Spring Security（13）——session管理 234390216 sessionSpring Security攻击保护超时
    session管理 目录   1.1     检测session超时 1.2     concurrency-control 1.3     session 固定攻击保护         
  • 公司项目NODEJS实践0.3[ mongo / session ...] 逐行分析JS源代码 mongodbsessionnodejs
        http://www.upopen.cn   一、前言         书接上回，我们搭建了WEB服务端路由、模板等功能，完成了register 通过ajax与后端的通信，今天主要完成数据与mongodb的存取，实现注册 / 登录 /
  • pojo.vo.po.domain区别 LiaoJuncai javaVOPOJOjavabeandomain
    　　POJO = "Plain Old Java Object"，是MartinFowler等发明的一个术语，用来表示普通的Java对象，不是JavaBean, EntityBean 或者 SessionBean。POJO不但当任何特殊的角色，也不实现任何特殊的Java框架的接口如，EJB， JDBC等等。 　　 　　即POJO是一个简单的普通的Java对象，它包含业务逻辑
  • Windows Error Code OhMyCC windows
    0 操作成功完成. 1 功能错误. 2 系统找不到指定的文件. 3 系统找不到指定的路径. 4 系统无法打开文件. 5 拒绝访问. 6 句柄无效. 7 存储控制块被损坏. 8 存储空间不足, 无法处理此命令. 9 存储控制块地址无效. 10 环境错误. 11 试图加载格式错误的程序. 12 访问码无效. 13 数据无效. 14 存储器不足, 无法完成此操作. 15 系
  • 在storm集群环境下发布Topology roadrunners 集群stormtopologyspoutbolt
    storm的topology设计和开发就略过了。本章主要来说说如何在storm的集群环境中，通过storm的管理命令来发布和管理集群中的topology。   1、打包 打包插件是使用maven提供的maven-shade-plugin，详细见maven-shade-plugin。 <plugin> <groupId>org.apache.maven.
  • 为什么不允许代码里出现“魔数” tomcat_oracle java
    　　在一个新项目中，我最先做的事情之一，就是建立使用诸如Checkstyle和Findbugs之类工具的准则。目的是制定一些代码规范，以及避免通过静态代码分析就能够检测到的bug。 　　迟早会有人给出案例说这样太离谱了。其中的一个案例是Checkstyle的魔数检查。它会对任何没有定义常量就使用的数字字面量给出警告，除了-1、0、1和2。 　　很多开发者在这个检查方面都有问题，这可以从结果
  • zoj 3511 Cake Robbery(线段树) 阿尔萨斯 线段树
    题目链接：zoj 3511 Cake Robbery 题目大意：就是有一个N边形的蛋糕，切M刀，从中挑选一块边数最多的，保证没有两条边重叠。 解题思路：有多少个顶点即为有多少条边，所以直接按照切刀切掉点的个数排序，然后用线段树维护剩下的还有哪些点。 #include <cstdio> #include <cstring> #include <vector&
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他