今天逛天猫时，看见优衣库店铺首页有个这个飘雪效果，顿时觉得好酷炫，立马从里面copy代码进行学习。

之前我也做过一些canvas特效，往往在canvas全屏时，canvas下层的div就无法进行dom的事件操作，点击之类的就失灵了。之前我的做法要么就是在canvas上加入点击事件，穿透到下层，或者把下层的div通过z-index属性放在canvas的上层。这种办法都显得死板或者展现效果很差。看了这个页面发现了css3的解决办法

  1. .snow-canvas {
  2.     display: block;
  3.     width: 100%;
  4.     height: 100%;
  5.     top:;
  6.     left:;
  7.     position: fixed;
  8.     pointer-events: none;
  9. }

就是通过pointer-events设置为none，可以让事件自动到下层去，不过坏处也有，就是通过F12开发者工具不容易找到canvas这个元素。不禁再次感慨CSS3的强大。

下面是把页面的JS copy出来的做的demo

html

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.         <style>
  7.             *{
  8.                 padding: 0;
  9.                 margin: 0;
  10.             }
  11.             .main {
  12.                 display: block;
  13.                 width: 100%;
  14.                 height: 2000px;
  15.                 top: 0;
  16.                 left: 0;
  17.                 background-color: red;
  18.             }
  19.             .snow-canvas {
  20.                 display: block;
  21.                 width: 100%;
  22.                 height: 100%;
  23.                 top: 0;
  24.                 left: 0;
  25.                 position: fixed;
  26.                 pointer-events: none;
  27.             }
  28.         </style>
  29.     </head>
  30.     <body>
  31.         <div class="main"></div>
  32.         <canvas class="snow-canvas" speed="1" interaction="false" size="2" count="80" opacity="0.00001" start-color="rgba(253,252,251,1)" end-color="rgba(251,252,253,0.3)" wind-power="0" image="false" width="1272" height="150"></canvas>
  33.         <canvas class="snow-canvas" speed="3" interaction="true" size="6" count="30" start-color="rgba(253,252,251,1)" end-color="rgba(251,252,253,0.3)" opacity="0.00001" wind-power="2" image="false" width="1272" height="150"></canvas>
  34.         <canvas class="snow-canvas" speed="3" interaction="true" size="12" count="20" wind-power="-5" image="img/snow.png" width="1272" height="150"></canvas>
  35.     </body>
  36.     <script type="text/javascript" src="js/zepto.min.js" ></script>
  37.     <script type="text/javascript" src="js/main1.js" ></script>
  38.     <script>
  39.         $(function() {
  40.             $(".snow-canvas").snow();
  41.             $(".main").click(function() {
  42.                 alert(111)
  43.             });
  44.         });
  45.     </script>
  46.  
  47. </html>

main1.js

  1. (function($) {
  2.     var $window = window,
  3.         $timeout = setTimeout;
  4.     var supportCanvas = function() {
  5.         var eCan = document.createElement("canvas");
  6.         return (typeof eCan.getContext) == "function";
  7.     };
  8.     window.Snow = function(element, settings) {
  9.         (function() {
  10.             var lastTime = 0;
  11.             var vendors = ['webkit', 'moz'];
  12.             for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
  13.                 window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
  14.                 window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || // name has changed in Webkit
  15.                     window[vendors[x] + 'CancelRequestAnimationFrame'];
  16.             }
  17.             if (!window.requestAnimationFrame) {
  18.                 window.requestAnimationFrame = function(callback, element) {
  19.                     var timeToCall = 14; //freezes in safari for windows ,and mac to , so i change time to call with 14;
  20.                     var id = window.setTimeout(function() {
  21.                         callback(timeToCall);
  22.                     }, timeToCall);
  23.                     return id;
  24.                 };
  25.             }
  26.             if (!window.cancelAnimationFrame) {
  27.                 window.cancelAnimationFrame = function(id) {
  28.                     clearTimeout(id);
  29.                 };
  30.             }
  31.         }());
  32.         this.settings = settings,
  33.             this.flakes = [],
  34.             this.flakeCount = settings.count,
  35.             this.mx = -100,
  36.             this.my = -100,
  37.             this.init(element)
  38.     };
  39.     Snow.prototype.init = function(element) {
  40.         this.canvas = element.get(0), this.ctx = this.canvas.getContext("2d"), this.canvas.width = $window.innerWidth, this.canvas.height = $window.innerHeight, this.flakes = [];
  41.         for (var i = 0; i < this.flakeCount; i++) {
  42.             var x = Math.floor(Math.random() * this.canvas.width),
  43.                 y = Math.floor(Math.random() * this.canvas.height),
  44.                 size = Math.floor(100 * Math.random()) % this.settings.size + 2,
  45.                 speed = Math.floor(100 * Math.random()) % this.settings.speed + Math.random() * size / 10 + .5,
  46.                 opacity = .5 * Math.random() + this.settings.opacity;
  47.             this.flakes.push({
  48.                 speed: speed,
  49.                 velY: speed,
  50.                 velX: 0,
  51.                 x: x,
  52.                 y: y,
  53.                 size: size,
  54.                 stepSize: Math.random() / 30,
  55.                 step: 0,
  56.                 angle: 180,
  57.                 opacity: opacity
  58.             })
  59.         }
  60.         1 == this.settings.interaction && this.canvas.addEventListener("mousemove", function(e) {
  61.             this.mx = e.clientX, this.my = e.client
  62.         });
  63.         var thiz = this;
  64.         $($window).resize(function() {
  65.             thiz.ctx.clearRect(0, 0, thiz.canvas.width, thiz.canvas.height), thiz.canvas.width = $window.innerWidth, thiz.canvas.height = $window.innerHeight
  66.         });
  67.         if (typeof this.settings.image === "string") {
  68.             this.image = $("<img src='" + this.settings.image + "' style='display: none'>");
  69.         };
  70.         this.snow();
  71.     }, Snow.prototype.snow = function() {
  72.         var thiz = this,
  73.             render = function() {
  74.                 thiz.ctx.clearRect(0, 0, thiz.canvas.width, thiz.canvas.height);
  75.                 for (var i = 0; i < thiz.flakeCount; i++) {
  76.                     var flake = thiz.flakes[i],
  77.                         x = thiz.mx,
  78.                         y = thiz.my,
  79.                         minDist = 100,
  80.                         x2 = flake.x,
  81.                         y2 = flake.y,
  82.                         dist = Math.sqrt((x2 - x) * (x2 - x) + (y2 - y) * (y2 - y));
  83.                     if (minDist > dist) {
  84.                         var force = minDist / (dist * dist),
  85.                             xcomp = (x - x2) / dist,
  86.                             ycomp = (y - y2) / dist,
  87.                             deltaV = force / 2;
  88.                         flake.velX -= deltaV * xcomp, flake.velY -= deltaV * ycomp
  89.                     } else
  90.                         switch (flake.velX *= .98, flake.velY <= flake.speed && (flake.velY = flake.speed), thiz.settings.windPower) {
  91.                             case !1:
  92.                                 flake.velX += Math.cos(flake.step += .05) * flake.stepSize;
  93.                                 break;
  94.                             case 0:
  95.                                 flake.velX += Math.cos(flake.step += .05) * flake.stepSize;
  96.                                 break;
  97.                             default:
  98.                                 flake.velX += .01 + thiz.settings.windPower / 100
  99.                         }
  100.                     if (flake.y += flake.velY, flake.x += flake.velX, (flake.y >= thiz.canvas.height || flake.y <= 0) && thiz.resetFlake(flake), (flake.x >= thiz.canvas.width || flake.x <= 0) && thiz.resetFlake(flake), 0 == thiz.settings.image) {
  101.                         var grd = thiz.ctx.createRadialGradient(flake.x, flake.y, 0, flake.x, flake.y, flake.size - 1);
  102.                         grd.addColorStop(0, thiz.settings.startColor), grd.addColorStop(1, thiz.settings.endColor), thiz.ctx.fillStyle = grd, thiz.ctx.beginPath(), thiz.ctx.arc(flake.x, flake.y, flake.size, 0, 2 * Math.PI), thiz.ctx.fill()
  103.                     } else
  104.                         thiz.ctx.drawImage(thiz.image.get(0), flake.x, flake.y, 2 * flake.size, 2 * flake.size)
  105.                 }
  106.                 $window.cancelAnimationFrame(render), $window.requestAnimationFrame(render)
  107.             };
  108.         render()
  109.     }, Snow.prototype.resetFlake = function(flake) {
  110.         if (0 == this.settings.windPower || 0 == this.settings.windPower)
  111.             flake.x = Math.floor(Math.random() * this.canvas.width), flake.y = 0;
  112.         else if (this.settings.windPower > 0) {
  113.             var xarray = Array(Math.floor(Math.random() * this.canvas.width), 0),
  114.                 yarray = Array(0, Math.floor(Math.random() * this.canvas.height)),
  115.                 allarray = Array(xarray, yarray),
  116.                 selected_array = allarray[Math.floor(Math.random() * allarray.length)];
  117.             flake.x = selected_array[0], flake.y = selected_array[1]
  118.         } else {
  119.             var xarray = Array(Math.floor(Math.random() * this.canvas.width), 0),
  120.                 yarray = Array(this.canvas.width, Math.floor(Math.random() * this.canvas.height)),
  121.                 allarray = Array(xarray, yarray),
  122.                 selected_array = allarray[Math.floor(Math.random() * allarray.length)];
  123.             flake.x = selected_array[0], flake.y = selected_array[1]
  124.         }
  125.         flake.size = Math.floor(100 * Math.random()) % this.settings.size + 2,
  126.             flake.speed = Math.floor(100 * Math.random()) % this.settings.speed + Math.random() * flake.size / 10 + .5,
  127.             flake.velY = flake.speed, flake.velX = 0, flake.opacity = .5 * Math.random() + this.settings.opacity
  128.     };
  129.     $.fn.snow = function() {
  130.         var userCanvas = supportCanvas();
  131.         userCanvas && $(this).each(function(i, e) {
  132.             var scope = {};
  133.             $.each(e.attributes, function(index, key) {
  134.                 scope[$.camelCase(key.name)] = Number(Number(key.value)) ? Number(key.value) : key.value
  135.             });
  136.             if (typeof scope.image === "string" && scope.image === "false") {
  137.                 scope.image = false
  138.             };
  139.             new Snow($(e), {
  140.                 speed: 1 || 0,
  141.                 interaction: scope.interaction || !0,
  142.                 size: scope.size || 2,
  143.                 count: scope.count || 200,
  144.                 opacity: scope.opacity || 1,
  145.                 startColor: scope.startColor || "rgba(255,255,255,1)",
  146.                 endColor: scope.endColor || "rgba(255,255,255,0)",
  147.                 windPower: scope.windPower || 0,
  148.                 image: scope.image || !1
  149.             });
  150.         });
  151.         if (!userCanvas) {
  152.             var setting = {};
  153.             $(this).each(function(i, e) {
  154.                 setting["image"] = $(e).attr("image") || "./imgs/snow.png";
  155.                 $(this).remove();
  156.                 createSnow("", 40);
  157.             });
  158.         };
  159.     };
  160.  
  161.     function k(a, b, c) {
  162.         if (a.addEventListener) a.addEventListener(b, c, false);
  163.         else a.attachEvent && a.attachEvent("on" + b, c)
  164.     }
  165.  
  166.     function g(a) {
  167.         if (typeof window.onload != "function") window.onload = a;
  168.         else {
  169.             var b = window.onload;
  170.             window.onload = function() {
  171.                 b();
  172.                 a()
  173.             }
  174.         }
  175.     }
  176.  
  177.     function h() {
  178.         var a = {};
  179.         for (type in {
  180.                 Top: "",
  181.                 Left: ""
  182.             }) {
  183.             var b = type == "Top" ? "Y" : "X";
  184.             if (typeof window["page" + b + "Offset"] != "undefined")
  185.                 a[type.toLowerCase()] = window["page" + b + "Offset"];
  186.             else {
  187.                 b = document.documentElement.clientHeight ? document.documentElement : document.body;
  188.                 a[type.toLowerCase()] = b["scroll" + type]
  189.             }
  190.         }
  191.         return a
  192.     }
  193.  
  194.     function l() {
  195.         var a = document.body,
  196.             b;
  197.         if (window.innerHeight) b = window.innerHeight;
  198.         else if (a.parentElement.clientHeight) b = a.parentElement.clientHeight;
  199.         else if (a && a.clientHeight) b = a.clientHeight;
  200.         return b
  201.     };
  202.     var j = true;
  203.     var f = true;
  204.     var m = null;
  205.     var c = [];
  206.     var createSnow = function(a, b) {
  207.         clearInterval(m);
  208.         c = [];
  209.         m = setInterval(function() {
  210.             f && b > c.length && Math.random() < b * 0.0025 && c.push(new i(a));
  211.             !f && !c.length && clearInterval(m);
  212.             for (var e = h().top, n = l(), d = c.length - 1; d >= 0; d--)
  213.                 if (c[d])
  214.                     if (c[d].top < e || c[d].top + c[d].size + 1 > e + n) {
  215.                         c[d].remove();
  216.                         c[d] = null;
  217.                         c.splice(d, 1)
  218.                     } else {
  219.                         c[d].move();
  220.                         c[d].draw()
  221.                     }
  222.         }, 40);
  223.         k(window, "scroll",
  224.             function() {
  225.                 for (var e = c.length - 1; e >= 0; e--) c[e].draw()
  226.             })
  227.     };
  228.     var removeSnow = function() {
  229.         clearInterval(m);
  230.         do {
  231.             c.pop().remove();
  232.         } while (c.length);
  233.     };
  234.     //雪花的构造函数;
  235.     function i(a) {
  236.         this.parent = document.body;
  237.         this.createEl(this.parent, a);
  238.         this.size = Math.random() * 20 + 20;
  239.         this.el.style.width = Math.round(this.size) + "px";
  240.         this.el.style.height = Math.round(this.size) + "px";
  241.         this.maxLeft = document.body.offsetWidth - this.size;
  242.         this.maxTop = document.body.offsetHeight - this.size;
  243.         this.left = Math.random() * this.maxLeft;
  244.         this.top = h().top + 1;
  245.         this.angle = 1.4 + 0.8 * Math.random();
  246.         this.minAngle = 1.4;
  247.         this.maxAngle = 1.6;
  248.         this.angleDelta = 0.01 * Math.random();
  249.         this.speed = 2 + Math.random()
  250.     }
  251.     i.prototype = {
  252.         createEl: function(a, b) {
  253.             this.el = document.createElement("img");
  254.             this.el.classname = "nicesnowclass";
  255.             this.el.setAttribute("src", b || "./imgs/snow.png");
  256.             this.el.style.position = "absolute";
  257.             this.el.style.display = "block";
  258.             this.el.style.zIndex = "99999";
  259.             this.parent.appendChild(this.el)
  260.         },
  261.         move: function() {
  262.             if (this.angle < this.minAngle || this.angle > this.maxAngle)
  263.                 this.angleDelta = -this.angleDelta;
  264.             this.angle += this.angleDelta;
  265.             this.left += this.speed * Math.cos(this.angle * Math.PI);
  266.             this.top -= this.speed * Math.sin(this.angle * Math.PI);
  267.             if (this.left < 0) this.left = this.maxLeft;
  268.             else if (this.left > this.maxLeft) this.left = 0
  269.         },
  270.         draw: function() {
  271.             this.el.style.top = Math.round(this.top) + "px";
  272.             this.el.style.left = Math.round(this.left) + "px"
  273.         },
  274.         remove: function() {
  275.             this.parent.removeChild(this.el);
  276.             this.parent = this.el = null
  277.         }
  278.     };
  279. })(Zepto);

效果图为

雪花的图片为

这个代码主要是用于PC，代码上做了很多的兼容操作，无论是动画时间戳、页面对canvas的支持、css等等。我个人是做移动端的开发，这段代码有很多浏览器兼容处理对我并不是很需要，并且移动端更加专注于代码代码执行速度和内存的使用，这段代码算法比较复杂，而且它有个问题是当页面有多个canvas时，他建立多个Snow对象，每一个Snow对象都会开启一个时间戳函数，如下图，这个在移动端是比较影响性能的，我们更加希望一个时间戳里完成多个Snow对象的操作。

所以我把main1.js剔除了一些代码，然后略微改动下，如下代码

  1. (function($ , window) {
  2.         var snows = [];
  3.         var supportCanvas = function() {
  4.             return (typeof document.createElement("canvas").getContext) == "function";
  5.         };
  6.         function Snow(element, settings) {
  7.             this.settings = settings,this.flakes = [],this.flakeCount = settings.count,
  8.                 this.mx = -100,this.my = -100,this.init(element);
  9.         };
  10.         Snow.prototype.init = function(element) {
  11.             this.canvas = element[0], this.ctx = this.canvas.getContext("2d"), this.canvas.width = window.innerWidth, this.canvas.height = window.innerHeight, this.flakes = [];
  12.             for (var i = 0; i < this.flakeCount; i++) {
  13.                 var x = Math.floor(Math.random() * this.canvas.width),
  14.                     y = Math.floor(Math.random() * this.canvas.height),
  15.                     size = Math.floor(100 * Math.random()) % this.settings.size + 2,
  16.                     speed = Math.floor(100 * Math.random()) % this.settings.speed + Math.random() * size / 10 + .5,
  17.                     opacity = .5 * Math.random() + this.settings.opacity;
  18.                 this.flakes.push({
  19.                     speed: speed,
  20.                     velY: speed,
  21.                     velX: 0,
  22.                     x: x,
  23.                     y: y,
  24.                     size: size,
  25.                     stepSize: Math.random() / 1000,
  26.                     step: 0,
  27.                     angle: 180,
  28.                     opacity: opacity
  29.                 })
  30.             }
  31.             var thiz = this;
  32.             $(window).resize(function() {
  33.                 thiz.ctx.clearRect(0, 0, thiz.canvas.width, thiz.canvas.height), thiz.canvas.width = window.innerWidth, thiz.canvas.height = window.innerHeight
  34.             });
  35.             if (typeof this.settings.image === "string") {
  36.                 this.image = $("<img src='" + this.settings.image + "' style='display: none'>");
  37.             };
  38.             snows.push(this);
  39.         }, Snow.prototype.resetFlake = function(flake) {
  40.             if (0 == this.settings.windPower || 0 == this.settings.windPower)
  41.                 flake.x = Math.floor(Math.random() * this.canvas.width), flake.y = 0;
  42.             else if (this.settings.windPower > 0) {
  43.                 var xarray = Array(Math.floor(Math.random() * this.canvas.width), 0),
  44.                     yarray = Array(0, Math.floor(Math.random() * this.canvas.height)),
  45.                     allarray = Array(xarray, yarray),
  46.                     selected_array = allarray[Math.floor(Math.random() * allarray.length)];
  47.                 flake.x = selected_array[0], flake.y = selected_array[1]
  48.             } else {
  49.                 var xarray = Array(Math.floor(Math.random() * this.canvas.width), 0),
  50.                     yarray = Array(this.canvas.width, Math.floor(Math.random() * this.canvas.height)),
  51.                     allarray = Array(xarray, yarray),
  52.                     selected_array = allarray[Math.floor(Math.random() * allarray.length)];
  53.                 flake.x = selected_array[0], flake.y = selected_array[1]
  54.             }
  55.             flake.size = Math.floor(100 * Math.random()) % this.settings.size + 2,
  56.                 flake.speed = Math.floor(100 * Math.random()) % this.settings.speed + Math.random() * flake.size / 10 + .5,
  57.                 flake.velY = flake.speed, flake.velX = 0, flake.opacity = .5 * Math.random() + this.settings.opacity
  58.         };
  59.         function starSnow(){
  60.             var render = function() {
  61.                 for(var index = 0 , thiz ; thiz = snows[index++];){
  62.                     thiz.ctx.clearRect(0, 0, thiz.canvas.width, thiz.canvas.height);
  63.                     for (var i = 0; i < thiz.flakeCount; i++) {
  64.                         var flake = thiz.flakes[i];
  65.                         switch (flake.velX *= .98, flake.velY <= flake.speed && (flake.velY = flake.speed), thiz.settings.windPower) {
  66.                             case !1:
  67.                                 flake.velX += Math.cos(flake.step += .05) * flake.stepSize;
  68.                                 break;
  69.                             case 0:
  70.                                 flake.velX += Math.cos(flake.step += .05) * flake.stepSize;
  71.                                 break;
  72.                             default:
  73.                                 flake.velX += .01 + thiz.settings.windPower / 100
  74.                         }
  75.                         if (flake.y += flake.velY, flake.x += flake.velX, (flake.y >= thiz.canvas.height || flake.y <= 0) && thiz.resetFlake(flake), (flake.x >= thiz.canvas.width || flake.x <= 0) && thiz.resetFlake(flake), 0 == thiz.settings.image) {
  76.                             var grd = thiz.ctx.createRadialGradient(flake.x, flake.y, 0, flake.x, flake.y, flake.size - 1);
  77.                             grd.addColorStop(0, thiz.settings.startColor), grd.addColorStop(1, thiz.settings.endColor), thiz.ctx.fillStyle = grd, thiz.ctx.beginPath(), thiz.ctx.arc(flake.x, flake.y, flake.size, 0, 2 * Math.PI), thiz.ctx.fill()
  78.                         } else
  79.                             thiz.ctx.drawImage(thiz.image[0], flake.x, flake.y, 2 * flake.size, 2 * flake.size)
  80.                     }
  81.                 }
  82.                 window.requestAnimationFrame(render);
  83.             };
  84.             render()
  85.         }
  86.         $.fn.snow = function() {
  87.             var userCanvas = supportCanvas();
  88.             userCanvas && $(this).each(function(i, e) {
  89.                 var scope = {};
  90.                 $.each(e.attributes, function(index, key) {
  91.                     scope[$.camelCase(key.name)] = Number(Number(key.value)) ? Number(key.value) : key.value
  92.                 });
  93.                 if(scope.image === "false") scope.image = false;
  94.                 new Snow($(e), {
  95.                     speed: scope.speed || 1,
  96.                     size: scope.size || 2,
  97.                     count: scope.count || 200,
  98.                     opacity: scope.opacity || 1,
  99.                     startColor: scope.startColor || "rgba(255,255,255,1)",
  100.                     endColor: scope.endColor || "rgba(255,255,255,0)",
  101.                     windPower: scope.windPower || 0,
  102.                     image: scope.image || !1
  103.                 });
  104.             });
  105.             starSnow();
  106.         };
  107.     })(Zepto , window);

除了去掉一些兼容处理，其它的改动不大，就是多建立了个snows的数组，新建的Snow对象都会放大这个数组里面去，然后就是去掉了Snow的原型方法snow()，时间戳处理统一在startSnow()函数中处理，在函数内部遍历snows数组，改了后效果是一样的，不过在手机中卡顿比之前强了不少。

canvas基础学习（四）的更多相关文章

  1. Python基础学习四

    Python基础学习四 1.内置函数 help()函数:用于查看内置函数的用途. help(abs) isinstance()函数:用于判断变量类型. isinstance(x,(int,float) ...

  2. canvas基础学习

    /** * Created by ty on 2016/7/11. * canvas 基础 */ window.onload = function() { var canvas = document. ...

  3. canvas基础学习（二）

    一.图像绘制 canvas绘制图像的方法是ctx.drawImage();该方法有三种使用方式 1.ctx.drawImage(img,x,y); img是指图像对象,x和y分别是这个图像左上角在ca ...

  4. HTML5 <canvas> 基础学习

    HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成. <canvas> 标签只是图形容器,您必须使用脚本来绘制图形 创建一个画布( ...

  5. Mybatis基础学习(四)—关系映射

    一.模型分析 user和orders user---->orders 一个用户可以创建多个订单,一对多. orders--->user 一个订单只由一个用户创建,一对一.   orders ...

  6. canvas一周一练 -- canvas基础学习

    从上个星期开始,耳朵就一直在生病,里面长了个疙瘩,肿的一碰就疼,不能吃饭不能嗨 (┳＿┳)……在此提醒各位小伙伴,最近天气炎热,一定要注意防暑上火,病来如山倒呀~ 接下来我正在喝着5块一颗的药学习ca ...

  7. Node.js基础学习四之注册功能

    前言:在Node.js学习(二)和(三)中介绍了如何在Node.js 中获取登录的用户名和密码与数据库进行验证并返回数据给客户端 需求:实现注册功能 为了区分登录和注册是两个不同的请求,在端口后面加上 ...

  8. Salesforce Sales Cloud 零基础学习(四) Chatter

    Chatter是一个Salesforce实时协作应用程序,它允许你的用户一起工作.互相交谈和共享信息,不管用户角色或位置如何,连接.并激励用户在整个组织内高效工作. Chatter 让用户们在 Opp ...

  9. canvas基础学习（一）

    一.概述 canvas它和其它的HTML5标签的使用基本一致,但是它相当于在浏览器中建立一个画布,可以再这个画布上画图.创建动画甚至是3D游戏.由于canvas要适配不同终端的分辨率,所以尽可能的在标 ...

随机推荐

  1. oracle修改连接数后无法启动(信号量的问题)

    当oracle11g修改最大连接数后启动报如下错误时,需要调整linux的信号量的内核参数: ORA-27154: post/wait create failedCause: internal err ...

  2. id函数

    描述 id() 函数用于获取对象的内存地址. 语法 id 语法: id([object]) 参数说明: object -- 对象. 返回值 返回对象的内存地址. 实例 以下实例展示了 id 的使用方法 ...

  3. UI控件之UIImageView

    UIImageView:图像视图,用于在应用程序中显示图片 UIImage:是将图片文件转换为程序中的图片对象 UIImageView是UIImage的载体 方法一:用此方法创建图片对象,会将图片ca ...

  4. json学习笔记--在JavaScript中的使用

    1.字符串转换为JavaScript对象 var jsonStr = '[' + '{"name":"陶国荣","sex":"男& ...

  5. win10系统修改Intel VT-x时进入不了BIOS问题

    一般电脑进入BIOS的方式都是在开机的时候不停的按F2或者F12,但是Win10系统由于支持快速启动,当win10系统快速启动的时候,按F12或者F2是没反应的,解决方式: 第一步:修改win10的启 ...

  6. 5.4WEB服务器、应用程序服务器、HTTP服务器区别

    WEB服务器.应用程序服务器.HTTP服务器有何区别?IIS.Apache.Tomcat.Weblogic.WebSphere都各属于哪种服务器,这些问题困惑了很久,今天终于梳理清楚了:   Web服 ...

  7. 文件系统的特性，linux的EXT2文件系统【转】

    本文转载自:https://blog.csdn.net/tongyijia/article/details/52809281 先来提出三个概念: - superblock - inode - bloc ...

  8. 在Linux终端中查看公有IP的方法详解

    首先回顾一下一般的查看IP的命令: ifconfigLinux查看IP地址的命令--ifconfigifconfig命令用于查看和更改网络接口的地址和参数 $ifconfig -a  lo0: fla ...

  9. poj 2488 A Knight's Journey 【骑士周游 dfs + 记忆路径】

    题目地址:http://poj.org/problem?id=2488 Sample Input 3 1 1 2 3 4 3 Sample Output Scenario #1: A1 Scenari ...

  10. R语言学习笔记（2）

    第二章:创建数据集 一 R中的数据 二 数据的输入 一R中的数据 数据集:通常是由数据构成的一个矩形数组,行表示观测,列表示变量 R可以处理的数据类型:数值型.字符型.逻辑型.复数型(虚数).原生型( ...