canvas是html5中的绘图容器，我们可以通过javascript的控制来进行图形的绘制，绘制对象可以是路径、盒、圆、字符等，同时，你也可以通过js给画布添加图像，下面来介绍canvas的各种基本的用法：

1、首先，我们需要在html标签中创建一个canvas标签，并且通过脚本对其进行引入。

  1. <canvas id="myCanvas" width="200" height="100" style="border:1px solid red">
  2. </canvas>
  1. var c=document.getElementById("myCanvas");
  2. var ctx=c.getContext("2d");

在这里，getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。我们对canvas画布的所有操作都是针对ctx而言的。

2、基本图形的绘制方法（线，圆，盒子）

（1）绘制基本的线条

  1. ctx.moveTo(0,0); // 定义画笔开始的起始点坐标
  2. ctx.lineTo(200,100); // 定义画笔结束的结束点坐标
  3. ctx.stroke();  // 执行绘画操作

（2）绘制圆形

ctx.arc(x, y, r, 其实弧度值， 结束弧度值， boolean) boolean为true时逆时针， false为顺时针，默认状态为false

  1. ctx.beginPath(); // 开启绘画的状态
  2. ctx.arc(95,50,40,0,2*Math.PI); // 定义绘制圆形的圆心坐标， 半径等参数
  3. ctx.stroke();

（3）利用canvas进行文本的绘制

绘制实心字体

  1. ctx.font="30px Arial"; //设置字体大小和样式
  2. ctx.fillText("Hello World",10,50); // 设置文本内容， 文本起始点的x, y轴坐标

绘制空心字体

  1. ctx.font="30px Arial";
  2. ctx.strokeText("Hello World",10,50);

3、渐变在canvas中的运用

渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。

以下有两种不同的方式来设置Canvas渐变：

  • createLinearGradient(x,y,x1,y1) - 创建线条渐变
  • createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变

当我们使用渐变对象，必须使用两种或两种以上的停止颜色。

addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1.

使用渐变，设置fillStyle或strokeStyle的值为 渐变，然后绘制形状，如矩形，文本，或一条线。

  1. //创建一个线性的渐变
    // 创建渐变
  2. var grd=ctx.createLinearGradient(0,0,200,0);
  3. grd.addColorStop(0,"red");
  4. grd.addColorStop(1,"white");
  5.  
  6. // 填充渐变
  7. ctx.fillStyle=grd;
  8. ctx.fillRect(10,10,150,80);

  9. // 创建一个径向的渐变
    // 创建渐变 
    var grd=ctx.createRadialGradient(75,50,5,90,60,100); grd.addColorStop(0,"red"); grd.addColorStop(1,"white"); 
  10.  
  11. // 填充渐变 
    ctx.fillStyle=grd; ctx.fillRect(10,10,150,80);

4、外部图片的引入

ctx.drawImage();

  1. html
  2. <img src="http://n.sinaimg.cn/translate/20170218/v8d2-fyarrcf4608880.jpg" id="img"/>
  3. <canvas height="200" width="200" id="myCanvas"></canvas>
  4.  
  5. js
  6. var canvas = document.querySelect("#myCanvas");
  7. var ctx = canvas.getContext("2d");
  8. var img = document.querySelect("#img");
  9. ctx.drawImage(img,10,10);

以上是canvas的最最最基本的一些操作，当然，canvas还可以实现更多强大的功能， 绘制出来更绚丽的图形，通过与js的 结合还可以进行游戏页面的设计及游戏开发

下面是一个用canvas为基本结构绘制的《打灰机✈️》游戏，希望大家多多指

  1. html
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.   <title>Document</title>
  9.   <style media="screen">
  10.     #canvas{
  11.       display: block;
  12.       margin: 0 auto;
  13.       background: lightgray;
  14.       border: 1px solid darkgray;
  15.     }
  16.   </style>
  17. </head>
  18. <body>
  19.   <canvas id="canvas" width="640" height="960"></canvas>
  20.   <audio src="audio/game_music.mp3" id="gameMusic"></audio>
  21.   <audio src="audio/bullet.mp3" id="bullet"></audio>
  22.   <audio src="audio/enemy_out.mp3" id="out"></audio>
  23.   <audio src="audio/enemy_down.mp3" id="down"></audio>
  24.   <audio src="audio/game_over.mp3" id="gameOver"></audio>
  25. </body>
  26. <script src="js/mian.js" charset="utf-8"></script>
  27. </html>
  28. main.js
  29. window.onload = function (){
  30.     var scene = new Scene();
  31.     // 添加背景
  32.     var position         = new Position(0, -scene.canvas.height);
  33.     var size             = new Size(scene.canvas.width, scene.canvas.height + 10);
  34.     var velocity         = new Velocity(0, 2);
  35.     var background       = new Spirit(position, size, velocity, 'images/bg_01.jpg', 'background');
  36.     position   = new Position(0, 0);
  37.     var backgroundRepeat = new Spirit(position, size,velocity, 'images/bg_02.jpg', 'background');
  38.     scene.addRole(background);
  39.     scene.addRole(backgroundRepeat);
  40.     // 添加我方飞机
  41.     size     = new Size(64, 72);
  42.     position = new Position((scene.canvas.width - size.width) / 2, scene.canvas.height - size.height);
  43.     velocity = new Velocity(0, 0);
  44.     var aircraft = new Spirit(position, size, velocity, 'images/aircraft.png', 'aircraft');
  45.     scene.addRole(aircraft);
  46.     //  添加键盘监听事件
  47.     document.onkeydown = function (event){
  48.       switch (event.keyCode) {
  49.         case 37:
  50.           aircraft.velocity.x = -5;
  51.           break;
  52.         case 38:
  53.           aircraft.velocity.y = -5;
  54.           break;
  55.         case 39:
  56.           aircraft.velocity.x = 5;
  57.           break;
  58.         case 40:
  59.           aircraft.velocity.y = 5;
  60.           break;
  61.       }
  62.       console.log(event.keyCode);
  63.       if (!scene.start && event.keyCode == 13) {
  64.           window.location.reload();
  65.       }
  66.     };
  67.     document.onkeyup = function(){
  68.         aircraft.velocity.x = 0;
  69.         aircraft.velocity.y = 0;
  70.     }
  71.     scene.canvas.onclick = function (event){
  72.       var x = event.clientX - this.offsetLeft;
  73.       var y = event.clientY - this.offsetTop;
  74.       if (!scene.start && x > 220 && x < 420 && y > 520 && y <) {
  75.         window.location.reload();
  76.       }
  77.     }
  78.     // var requestId = null;
  79.     function gameStart(){
  80.         var gameMusic = document.querySelector('#gameMusic');
  81.         gameMusic.loop = 'loop';
  82.         gameMusic.volume = 0.2;
  83.         gameMusic.play(); // 播放背景音乐
  84.         document.querySelector('#gameOver').pause();
  85.         requestAnimationFrame(launch);
  86.  
  87.     }
  88.     // 场景加载
  89.     var count = 0;
  90.     var speed = 2;
  91.     function launch(){
  92.         scene.redraw();
  93.         if (scene.start) {
  94.           count++;
  95.           if (scene.score < 200000) {
  96.              speed = 2;
  97.           } else if (scene.score >= 200000 && scene.score <) {
  98.              speed = 4;
  99.           } else if (scene.score >= 500000) {
  100.             speed = 10;
  101.           }
  102.           if (count % 40 == 0) {
  103.               var index = 0;
  104.               if (Math.random()*1000 <) {
  105.                   index = 0;
  106.               }
  107.               if (Math.random()*1000 >= 750 && Math.random()*1000 <) {
  108.                   index = 1;
  109.               }
  110.               if (Math.random()*1000 >= 800 && Math.random()*1000 <) {
  111.                   index = 2;
  112.                   document.querySelector('#out').play();
  113.               }
  114.               if (Math.random()*1000 >= 890) {
  115.                   index = 3;
  116.               }
  117.               var size1    = new Size(50, 30);
  118.               var size2    = new Size(70, 90);
  119.               var size3    = new Size(110, 170);
  120.               var size4    = new Size(58, 88);
  121.               var sizes    = [size1, size2, size3, size4];
  122.               var position = new Position(Math.random() * (scene.canvas.width - sizes[index].width), -sizes[index].height);
  123.               var velocity = new Velocity(0, speed);
  124.               if (index == 3) {
  125.                   plane = new Spirit(position, sizes[index], velocity, 'images/ufo1.png', 'brolly');
  126.               }else {
  127.                   var enemy = 'images/flivver'+(index + 1)+'.png';
  128.                   var plane = new Spirit(position, sizes[index], velocity, enemy, 'flivver');
  129.               }
  130.               plane.hp        = Math.pow(index,3);
  131.               switch (index) {
  132.                 case 0:
  133.                   plane.score = 1000;
  134.                   plane.hp    = 1;
  135.                   break;
  136.                 case 1:
  137.                   plane.score = 5000;
  138.                   plane.hp    = 4;
  139.                   break;
  140.                 case 2:
  141.                   plane.score = 10000;
  142.                   plane.hp    = 9;
  143.                   // 大飞机出来时的音效
  144.                   break;
  145.               }
  146.               scene.addRole(plane);
  147.           }
  148.         }
  149.  
  150.         for (var i = 0; i <= scene.buttles; i++) {
  151.           if (i < 3) {
  152.             var speed1 = 20, speed2 = 5;
  153.           }
  154.           if (i >= 3 & i <) {
  155.             var speed1 = 10, speed2 = 8;
  156.           }
  157.           if (i >= 10) {
  158.             var speed1 = 4, speed2 = 13;
  159.           }
  160.         }
  161.         switch (scene.buttles) {
  162.           case 0:
  163.             bullet (count, aircraft, scene,0, speed1, speed2,0);
  164.             break;
  165.           case 1:
  166.             bullet (count, aircraft, scene,-15, speed1, speed2,0);
  167.             bullet (count, aircraft, scene,15, speed1, speed2,0);
  168.             break;
  169.           case 2:
  170.             bullet (count, aircraft, scene,0, speed1, speed2,0);
  171.             bullet (count, aircraft, scene, -15, speed1, speed2,0.2);
  172.             bullet (count, aircraft, scene,15, speed1, speed2,-0.2);
  173.             break;
  174.           case 3:
  175.             bullet (count, aircraft, scene,7, speed1, speed2,0);
  176.             bullet (count, aircraft, scene, -7, speed1, speed2,0);
  177.             bullet (count, aircraft, scene,21, speed1, speed2,-0.2);
  178.             bullet (count, aircraft, scene,-21, speed1, speed2,0.2);
  179.             break;
  180.           case 4:
  181.             bullet (count, aircraft, scene,10, speed1, speed2,0);
  182.             bullet (count, aircraft, scene,0, speed1, speed2,0);
  183.             bullet (count, aircraft, scene, -10, speed1, speed2,0);
  184.             bullet (count, aircraft, scene,20, speed1, speed2,Math.random() *5);
  185.             bullet (count, aircraft, scene,-20, speed1, speed2,-Math.random() *5);
  186.             break;
  187.           default:
  188.             bullet (count, aircraft, scene,10, speed1, speed2,0);
  189.             bullet (count, aircraft, scene,0, speed1, speed2,0);
  190.             bullet (count, aircraft, scene, -10, speed1, speed2,0);
  191.             bullet (count, aircraft, scene,20, speed1, speed2, -Math.random() *5);
  192.             bullet (count, aircraft, scene,-20, speed1, speed2, Math.random() *5);
  193.         }
  194.  
  195.         requestAnimationFrame(launch);
  196.     }
  197.     gameStart();
  198.  
  199. }
  200.  
  201.  // 创建对应所需信息
  202.  // 设置位置对象
  203.  function Position(x, y){
  204.      this.x     = x;
  205.      this.y     = y;
  206.  }
  207.  // 设置尺寸对象
  208.  function Size(width, height){
  209.     this.width  = width;
  210.     this.height = height;
  211.  }
  212. // 定义增量信息
  213. function Velocity(x, y){
  214.   this.x        = x;
  215.   this.y        = y;
  216. }
  217. /****************设置精灵对象******************/
  218. function Spirit(position, size, velocity, chartlet, type){
  219.   this.position          = position;
  220.   this.size              = size;
  221.   this.velocity          = velocity;
  222.   this.type              = type;
  223.   this.hp                = 0; // 精灵的血量值
  224.   this.chartlet          = new Image();
  225.   this.chartlet.src      = chartlet;
  226.   // 最大位置，用于检测边界
  227.   this.maxPosition       = new Position(this.position.x + this.size.width, this.position.y + this.size.height);
  228.   // 根据当前位置计算出下一位置坐标
  229.   this.nextPosition      = function (){
  230.       this.position.x   += this.velocity.x;
  231.       this.position.y   += this.velocity.y;
  232.       this.maxPosition.x = this.position.x + this.size.width;
  233.       this.maxPosition.y = this.position.y + this.size.height;
  234.   };
  235.   this.previousPosition  = function(){
  236.       this.position.x   -= this.velocity.x;
  237.       this.position.y   -= this.velocity.y;
  238.       this.maxPosition.x = this.position.x + this.size.width;
  239.       this.maxPosition.y = this.position.y + this.size.height;
  240.   };
  241.   // 根据精灵的信息进行绘制
  242.   this.draw = function (ctx){
  243.       ctx.drawImage(this.chartlet, this.position.x, this.position.y, this.size.width, this.size.height);
  244.   };
  245. }
  246.  
  247. /*******************定义游戏场景类***********************/
  248. function Scene(){
  249.   // 获取场景对应的画布和图形上下文信息
  250.   this.canvas    = document.querySelector('#canvas');
  251.   this.ctx       = this.canvas.getContext('2d');
  252.   this.spirits   = []; // 定义spirit数组来保存精灵信息
  253.   // this.requestId  = null;
  254.   this.start     = true; // 控制游戏是否进行
  255.   this.score     = 0;
  256.   this.buttles   = 0;
  257.   // 向数组中添加精灵信息
  258.   this.addRole   = function (role){
  259.       this.spirits.push(role);
  260.   };
  261.   // 定义清空场景的方法
  262.   this.clear     = function (){
  263.       this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
  264.   };
  265.   // 定义重绘地图的方法
  266.   this.redraw    = function (){
  267.       this.clear();
  268.       // 定义一个临时数组来保存在画布范围内的精灵
  269.       var drawedSpirits = [];
  270.       for (var i = 0; i < this.spirits.length; i++) {
  271.         this.spirits[i].nextPosition();
  272.         if (this.boundsDetection(this.spirits[i])) {
  273.             drawedSpirits.push(this.spirits[i]);
  274.         } else {
  275.           if (this.spirits[i].type == 'background') {
  276.               this.spirits[i].position.y =  -this.canvas.height;
  277.               drawedSpirits.unshift(this.spirits[i]);
  278.           }
  279.           if (this.spirits[i].type == 'aircraft') {
  280.               this.spirits[i].previousPosition();
  281.               drawedSpirits.push(this.spirits[i]);
  282.           }
  283.         }
  284.       }
  285.       this.spirits = drawedSpirits;
  286.       // 调用碰撞检测，确定哪些精灵可以被绘制
  287.       this.collisionDectection();
  288.       for (i = 0; i < this.spirits.length; i++) {
  289.           if (this.spirits[i].type == 'boom') {
  290.             if (this.spirits[i].hp > 0) {
  291.               this.spirits[i].draw(this.ctx);
  292.               this.spirits[i].hp -= 0.3;
  293.             }else {
  294.               this.spirits.splice(i, 1);
  295.               i--;
  296.             }
  297.           }else {
  298.             this.spirits[i].draw(this.ctx);
  299.           }
  300.       }
  301.       this.ctx.beginPath();
  302.       this.ctx.font = '45px Chalkduster';
  303.       this.ctx.fillStyle = 'rgba(0,0,0, 0.51)';
  304.       this.ctx.fillText('score:' + this.score, 0, 35);
  305.       this.ctx.closePath();
  306.  
  307.       //  如果游戏结束则绘制game over
  308.       if (!this.start) {
  309.           this.ctx.font = '80px Chalkduster';
  310.           this.ctx.fillStyle = 'rgb(172, 34, 34)';
  311.           this.ctx.fillText('GAME OVER', 45, 450);
  312.           this.ctx.rect(220,520,200,60);
  313.           this.ctx.fillStyle = 'rgba(0,0,0,0.7)';
  314.           this.ctx.fill();
  315.           this.ctx.font = '36px Chalkduster';
  316.           this.ctx.fillStyle = 'white';
  317.           this.ctx.fillText('RESTART', 230, 564);
  318.       }
  319.   };
  320.   this.boundsDetection = function (role){
  321.       switch (role.type) {
  322.         case 'brolly':
  323.         case 'background':
  324.         case 'flivver':
  325.           if (role.position.y > this.canvas.height) {
  326.               return false;
  327.           } else {
  328.               return true;
  329.           }
  330.           break;
  331.         case 'aircraft':
  332.           if (role.position.x < 0 || role.position.y < 0 || role.maxPosition.x > this.canvas.width || role.maxPosition.y > this.canvas.height) {
  333.               return false;
  334.           } else {
  335.               return true;
  336.           }
  337.           break;
  338.         case 'bullet':
  339.           if (role.position.y < -role.size.height) {
  340.               return false;
  341.           } else {
  342.             return true;
  343.           }
  344.           break;
  345.         default:
  346.         return true;
  347.       }
  348.   };
  349.   // 定义碰撞检测
  350.   this.collisionDectection = function (){
  351.       var bullets          = []; // 场景中所有的子弹
  352.       var enemys           = []; // 场景中所有的敌机
  353.       var brollys          = []; // 降落伞的数组
  354.       var aircraft         = null; // 暂存我方战机
  355.       var airctaftindex    = 0; // 暂存我方战机在精灵数组中的下标
  356.       for (var i = 0; i < this.spirits.length; i++) {
  357.         switch (this.spirits[i].type) {
  358.           case 'bullet':
  359.             bullets.push(this.spirits[i]);
  360.             break;
  361.           case 'flivver':
  362.             enemys.push(this.spirits[i]);
  363.             break;
  364.           case 'aircraft':
  365.             aircraft       = this.spirits[i];
  366.             aircraftIndex  = i;
  367.             break;
  368.           case 'brolly':
  369.             brollys.push(this.spirits[i]);
  370.             break;
  371.           default:
  372.         }
  373.       }
  374.       for (i = 0; i < bullets.length; i++) {
  375.           for (var j = 0; j < enemys.length; j++) {
  376.               if (bullets[i].position.x > enemys[j].position.x && bullets[i].position.x < enemys[j].maxPosition.x &&
  377.                   bullets[i].position.y > enemys[j].position.y && bullets[i].position.y < enemys[j].maxPosition.y) {
  378.                   var bulletsIndex     = this.spirits.indexOf(bullets[i]);
  379.                   this.spirits.splice(bulletsIndex, 1);
  380.                   if(--enemys[j].hp   <= 0) {
  381.                       this.score += enemys[j].score;
  382.                       var enemyIndex   = this.spirits.indexOf(enemys[j]);
  383.                       this.spirits.splice(enemyIndex, 1);
  384.                   }
  385.                   // 创建子弹爆炸精灵
  386.                   var size             = new Size(41, 39);
  387.                   var position         = new Position(bullets[i].position.x - size.width / 2, bullets[i].position.y - size.height / 2);
  388.                   var velocity         = new Velocity(0, 0);
  389.                   var boom             = new Spirit(position, size, velocity, 'images/boo1.png', 'boom');
  390.                   boom.hp              = 2;
  391.                   this.spirits.push(boom);
  392.                   // 子弹打到飞机
  393.                   document.querySelector('#down').play();
  394.                   break;
  395.               }
  396.           }
  397.       }
  398.       // 进行我方战机跟敌机的碰撞检测
  399.       for (i = 0; i < enemys.length; i++) {
  400.         var centerx = enemys[i].position.x + enemys[i].size.width / 2;
  401.         var centery = enemys[i].position.y + enemys[i].size.height / 2;
  402.         if (centerx > (aircraft.position.x - enemys[i].size.width / 2 + 10) && centerx < (aircraft.maxPosition.x + enemys[i].size.width / 2 - 10) &&
  403.             centery > (aircraft.position.y - enemys[i].size.height / 2 + 10) && centery < (aircraft.maxPosition.y + enemys[i].size.height / 2 - 10)) {
  404.               this.start = false;
  405.               this.spirits = [this.spirits[0], this.spirits[1]];
  406.               document.querySelector('#gameMusic').pause();
  407.               document.querySelector('#gameOver').play();
  408.               // document.querySelector('#gameOver').loop = 'loop';
  409.               break;
  410.             }
  411.       }
  412.       // 进行装备包的碰撞检测
  413.       for (i = 0; i < brollys.length; i++) {
  414.         var centerX = brollys[i].position.x + brollys[i].size.width / 2;
  415.         var centerY = brollys[i].position.y + brollys[i].size.height / 2;
  416.         if (centerX > (aircraft.position.x - brollys[i].size.width / 2 + 10) && centerX < (aircraft.maxPosition.x + brollys[i].size.width / 2 - 10) &&
  417.             centerY > (aircraft.position.y - brollys[i].size.height / 2 + 10) && centerY < (aircraft.maxPosition.y + brollys[i].size.height / 2 - 10)) {
  418.               this.spirits.splice(this.spirits.indexOf(brollys[i]),1);
  419.               this.buttles++;
  420.  
  421.               break;
  422.             }
  423.       }
  424.   };
  425. }
  426.  
  427. // 构建 制造子弹的函数
  428.  function bullet ( count, aircraft, scene, left, speed1, speed2, speed3){
  429.    if (count % speed1 === 0) {
  430.        var size = new Size(7, 17);
  431.        var position = new Position(aircraft.position.x + aircraft.size.width / 2 - size.width / 2 - left, aircraft.position.y - size.height);
  432.        var velocity = new Velocity(speed3, -speed2);
  433.        var bullet   = new Spirit(position, size, velocity, 'images/bullet.png', 'bullet');
  434.        document.querySelector('#bullet').play();
  435.        document.querySelector('#bullet').volume = 0.2;
  436.        scene.addRole(bullet);
  437.    }
  438.  }

canvas画板基础应用的学习的更多相关文章

  1. QML学习笔记（二）-纯qml画图实现canvas画板-鼠标画图

    作者: 狐狸家的鱼 Github: 八至 版权声明:如需转载请获取授权和联系作者 用纯qml实现canvas画板功能,用鼠标进行画图,可以画直线,画圆,画矩形,画弧线. 由于canvas画图会有延迟和 ...

  2. 零基础如何系统学习Java Web

    零基础如何系统学习Java Web?   我来给你说一说 你要下决心,我要转行做开发,这样你才能学成. 你要会打字,我公司原来有一个程序员,打字都是两个手一指禅,身为程序员你一指禅怎么写出的代码,半个 ...

  3. ASP.NET基础之HttpHandler学习

    ASP.NET基础之HttpHandler学习 经过前两篇[ASP.NET基础之HttpModule学习]和[ASP.NET基础之HttpContext学习]文章的学习我们对ASP.NET的基础内容有 ...

  4. Android中Canvas绘图基础详解（附源码下载） (转)

    Android中Canvas绘图基础详解(附源码下载) 原文链接  http://blog.csdn.net/iispring/article/details/49770651   AndroidCa ...

  5. canvas绘画基础(一)：认识canvas画布

    html5提供了一个<canvas>标签,结合javascript的canvas api接口可以用来绘制图形和动画.最近工作中涉及到画图的任务,下面来了解一下canvas的基础:canva ...

  6. C#区块链零基础入门，学习路线图 转

    C#区块链零基础入门,学习路线图 一.1分钟短视频<区块链100问>了解区块链基本概念 http://tech.sina.com.cn/zt_d/blockchain_100/ 二.C#区 ...

  7. (转)ASP.NET基础之HttpHandler学习

    原文地址:http://www.cnblogs.com/wujy/archive/2013/08/18/3266009.html 经过前两篇[ASP.NET基础之HttpModule学习]和[ASP. ...

  8. (转)零基础入门深度学习(6) - 长短时记忆网络(LSTM)

    无论即将到来的是大数据时代还是人工智能时代,亦或是传统行业使用人工智能在云上处理大数据的时代,作为一个有理想有追求的程序员,不懂深度学习(Deep Learning)这个超热的技术,会不会感觉马上就o ...

  9. 【转载】salesforce 零基础开发入门学习（六）简单的数据增删改查页面的构建

    salesforce 零基础开发入门学习(六)简单的数据增删改查页面的构建   VisualForce封装了很多的标签用来进行页面设计,本篇主要讲述简单的页面增删改查.使用的内容和设计到前台页面使用的 ...

随机推荐

  1. js中split,splice,slice方法之间的差异。

    首先我们先来林格斯双击翻译一下: split  劈开, 使分裂: splice   接合; 使结合: slice  切成薄片, 切: 我先是这么区分的:这三个方法最后一个字母是t的是字符串方法,是e的 ...

  2. 紫书 例题 9-4 UVa 116 ( 字典序递推顺序）

    这道题在递推方式和那个数字三角形有一点相像,很容易推出来 但是这道题要求的是字典序,这里就有一个递推顺序的问题 这里用逆推,顺推会很麻烦,为什么呢? 如果顺推的话,最后一行假设有种情况是最小值,那么你 ...

  3. XTUOJ 1205 Range

    Range Time Limit : 1000 MS Memory Limit : 65536 KB Problem Description For an array, the range funct ...

  4. jquery事件 【mousedown与mouseup ----keydown与keypress与keyup】focus--blur--orrer--pageX-pageY

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> ...

  5. Oracle-02-数据库概述

    一.数据库用途 用于存放数据的软件 当中Application server重要,将数据存在表中每一个表关系就能够反映不同表之间数据的关系,比方淘宝用户注冊.商品买卖等数据存在操作系统的目录中,不便于 ...

  6. ios in-house 公布整个过程（startssl认证）

    首先大体说一下步骤: 1.申请苹果enterprise 账号 为应用生成app id,provision profile等 详见:http://www.th7.cn/Program/IOS/20131 ...

  7. vue ---- 组件传值之间使用 v-model

    父子组件通信,都是单项的,很多时候需要双向通信.方法如下: 1.父组件使用:msg.sync="aa"  子组件使用$emit('update:msg', 'msg改变后的值xxx ...

  8. POJ 2459 模拟

    题意: 思路: 按照题意模拟即可 //By SiriusRen #include <cstdio> using namespace std; int c,f1,f2,d,xx,yy,vis ...

  9. CHARINDEX，REPLACE，LEFT+四大系统函数+模糊查询

    select CHARINDEX('bob','my name is bob',1)--返回12  bob的第一个b在字符串中排第12(从1开始数) select CEILING(456.4)--45 ...

  10. 小程序中关于获取app实例与当前组件

    1.getApp()来获取 App 实例 2.getCurrentPages()获取前页面栈