HTML5的绝活:巧用Canvas制作会动的时钟-阿里云开发者社区

开发者社区> 余二五> 正文

HTML5的绝活:巧用Canvas制作会动的时钟

简介:
+关注继续查看

这次我们的目标是画一个会和时间同步的时钟,不过没有美学感觉,样子丑的厉害。

  HTML5支持canvas了,我们可以直接在页面上绘图了,我看了下canvas和GDI+的接口差不多,所以我们先了解些基本的概念和方式,然后来做一个应用吧。

  我们做所有的画之情需要一个画布,html的canvas标签就是帮我们声明了一个画布。

<canvas id="mycanvas">  
</canvas> 
       这个默认的画布的大小是300*150,接下来的工作大多就是javaScript来做了。

  首先要实例化这个画布

[javascript] view plaincopy
$(  
function() {  
    var canvas = document.getElementById("mycanvas");  
    $.log(canvas.width);  
    $.log(canvas.height);  
    var context = canvas.getContext("2d");  
    $.log(context.canvas);  
    $.log(context.fillStyle); //要填充的区域的颜色  
    $.log(context.strokeStyle); //要绘制的线条的颜色  
    $.log(context.lineCap); //笔帽样式  
    $.log(context.lineJoin); //两条连续线段的连接样式  
    $.log(context.lineWidth); //线段的宽度  
    $.log(context.miterLimit); //斜联接  
    $.log(context.shadowColor); //阴影的颜色,默认为#000000,  
    $.log(context.shadowOffsetX); //阴影在x方向上的偏移量,默认为0,不受坐标转换的影响。  
    $.log(context.shadowOffsetY); //阴影在y方向上的偏移量,默认为0,不受坐标转换的影响。  
    $.log(context.shadowBlur); //阴影的模糊度,默认为0,负数值将会被忽略  
}  
); 
 

  上面的结果你可以得到一个大致的想法,就是content可以认为是我们将来作画用的画笔(估计有专业人士对强烈抗议,我直接忽略),canvas就是我们的画布。我们现在的画笔是2D的画笔,换句话说就是画平面几何的画笔。

  接下来,就是我们利用这个画笔来学习怎么画了

  各种线

[javascript] view plaincopy

  $(

  function() {

  var canvas = document.getElementById("mycanvas");

  var context = canvas.getContext("2d");

  context.strokeStyle = "rgb(255, 0, 0)";

  context.beginPath();

  context.lineCap = "butt"; //默认

  context.lineWidth = 10;

  context.moveTo(10, 10);

  context.lineTo(100, 10); //简单的一条线

  context.stroke(); //该方法真正在画布上绘制该线段

  context.beginPath();

  context.lineCap = "round"; //圆形线头

  context.moveTo(10, 30);

  context.lineTo(100, 30);

  context.stroke(); //该方法真正在画布上绘制该线段

  context.beginPath();

  context.lineCap = "square"; //方形线头

  context.moveTo(10, 50);

  context.lineTo(100, 50);

  context.stroke(); //该方法真正在画布上绘制该线段

  }

  );

 

  各种阴影

 [javascript] view plaincopy

  $(

  function() {

  var canvas = document.getElementById("mycanvas");

  var context = canvas.getContext("2d");

  context.strokeStyle = "rgb(255, 0, 0)";

  context.lineWidth = 10;

  context.shadowColor = "#0000FF";

  context.beginPath();

  context.lineCap = "round";

  context.moveTo(10, 10);

  context.lineTo(100, 10);

  context.shadowOffsetX = 10;

  context.shadowBlur = 10;

  context.stroke();

  context.beginPath();

  context.lineCap = "round";

  context.moveTo(10, 30);

  context.lineTo(100, 30);

  context.shadowOffsetY = 10;

  context.shadowBlur = 10;

  context.stroke();

  }

  );

  各种线∠连接

  [javascript] view plaincopy

  $(

  function() {

  var canvas = document.getElementById("mycanvas");

  var context = canvas.getContext("2d");

  context.strokeStyle = "rgb(255, 0, 0)";

  context.lineWidth = 10;

  context.shadowColor = "#0000FF";

  context.beginPath();

  context.lineJoin = "miter"; //两条线段的外边缘一直扩展到它们相交

  context.moveTo(10, 70);

  context.lineTo(50, 10);

  context.lineTo(80, 70);

  context.stroke();

  context.lineJoin = "bevel"; //以一个斜边进行连接

  context.moveTo(100, 70);

  context.lineTo(140, 10);

  context.lineTo(180, 70);

  context.stroke();

  context.lineJoin = "round"; //:以一个圆弧边进行连接

  context.beginPath();

  context.moveTo(200, 70);

  context.lineTo(240, 10);

  context.lineTo(280, 70);

  context.stroke();

  context.closePath(); //关闭path

  }

  );

  mitre的限定

  [javascript] view plaincopy

  $(

  function() {

  var canvas = document.getElementById("mycanvas");

  var context = canvas.getContext("2d");

  context.strokeStyle = "rgb(255, 0, 0)";

  context.lineWidth = 10;

  context.shadowColor = "#0000FF";

  context.beginPath();

  context.miterLimit = 1; //miterLimit 属性为斜面的长度设置一个上限。

  //只对线条使用设置为 "miter" 的 lineJoin 属性绘制并且两条线段以锐角相交的时候有效

  context.lineJoin = "miter"; //两条线段的外边缘一直扩展到它们相交

  context.moveTo(10, 70);

  context.lineTo(50, 10);

  context.lineTo(80, 70);

  context.stroke();

  }

  );

  各种几何图形

  [javascript] view plaincopy

  $(

  function() {

  var canvas = document.getElementById("mycanvas");

  canvas.height = 500; //改变默认高度

  canvas.width = 500;

  var context = canvas.getContext("2d");

  context.strokeStyle = "rgb(255, 0, 0)";

  context.fillStyle = "#AABBCC";

  context.lineWidth = 2;

  context.shadowColor = "#0000FF";

  //矩形

  context.beginPath();

  context.fillRect(10, 10, 50, 50); //实体矩形:x,y,width,height

  context.strokeRect(70, 10, 50, 50)//空心矩形:x,y,width,height

  //context.move(10,100);

  //圆弧:x, y, radius, startAngle, endAngle, anticlockwise

  context.beginPath();

  context.arc(35, 110, 25, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);

  context.stroke();

  //context.closePath();

  context.beginPath();

  context.arc(85, 110, 25, (Math.PI / 180) * 0, (Math.PI / 180) * 180, false);

  context.stroke();

  //context.closePath();

  context.beginPath();

  context.arc(135, 110, 25, (Math.PI / 180) * 0, (Math.PI / 180) * 180, true);

  context.stroke();

  //context.closePath();

  context.beginPath();

  context.arc(185, 110, 25, (Math.PI / 180) * 180, (Math.PI / 180) * 360, true);

  context.stroke();

  //context.closePath();

  context.beginPath();

  context.arc(235, 110, 25, (Math.PI / 180) * 90, (Math.PI / 180) * 0, false);

  context.fillStyle = "blue";

  context.fill();

  //context.stroke();

  //context.closePath();

  context.beginPath();

  context.arc(285, 110, 25, (Math.PI / 180) * 180, (Math.PI / 180) * 45, false);

  context.closePath();

  context.stroke();

  context.beginPath();

  context.arc(335, 110, 25, (Math.PI / 180) * 180, (Math.PI / 180) * 45, false);

  context.closePath();

  context.fillStyle = "blue";

  context.fill();

  context.stroke();

  //曲线

  context.beginPath();

  context.moveTo(10, 160); //二次贝塞尔曲线的起始点

  //controlX, controlY, endX, endY

  context.quadraticCurveTo(70, 280, 235, 140);

  context.stroke();

  context.closePath();

  context.beginPath();

  context.moveTo(10, 300); //三次贝塞尔曲线的起始点

  //controlX1, controlY1, controlX2, controlY2, endX, endY

  context.bezierCurveTo(70, 280, 50, 400, 235, 190);

  context.stroke();

  context.closePath();

  }

  );

  各种变换

  记得CSS3中的transform不?canvas肯定也有啊

  平移

  [javascript] view plaincopy

  $(

  function() {

  var canvas = document.getElementById("mycanvas");

  canvas.height = 500; //改变默认高度

  canvas.width = 500;

  var context = canvas.getContext("2d");

  context.strokeStyle = "rgb(255, 0, 0)";

  context.fillStyle = "#AABBCC";

  context.lineWidth = 2;

  context.shadowColor = "#0000FF";

  context.moveTo(10, 10);

  //context.beginPath();

  //context.beginPath();

  context.fillRect(10, 10, 50, 50); //实体矩形:x,y,width,height

  //context.stroke();

  $(canvas).on(

  "click",

  { "context": context },

  function(e) {

  $.log(e.data.context);

  var ctx = e.data.context;

  ctx.translate(10, 10); //再最后的路径点上偏移10*10的位置

  context.fillRect(10, 10, 50, 50);

  context.stroke();

  }

  );

  }

  );

  缩放

  [javascript] view plaincopy

  $(

  function() {

  var canvas = document.getElementById("mycanvas");

  canvas.height = 500; //改变默认高度

  canvas.width = 500;

  var context = canvas.getContext("2d");

  context.strokeStyle = "rgb(255, 0, 0)";

  context.fillStyle = "#AABBCC";

  context.lineWidth = 2;

  context.shadowColor = "#0000FF";

  context.moveTo(10, 10);

  //context.beginPath();

  //context.beginPath();

  context.fillRect(10, 10, 50, 50); //实体矩形:x,y,width,height

  //context.stroke();

  $(canvas).on(

  "click",

  { "context": context },

  function(e) {

  $.log(e.data.context);

  var ctx = e.data.context;

  ctx.scale(1.1, 1.1); //在最后的大小基础上缩放倍数 必须是正数

  context.fillRect(10, 10, 50, 50);

  context.stroke();

  }

  );

  }

  );


 

  旋转

[javascript] view plaincopy

  $(

  function() {

  var canvas = document.getElementById("mycanvas");

  canvas.height = 500; //改变默认高度

  canvas.width = 500;

  var context = canvas.getContext("2d");

  context.strokeStyle = "rgb(255, 0, 0)";

  context.fillStyle = "#AABBCC";

  context.lineWidth = 2;

  context.shadowColor = "#0000FF";

  context.moveTo(10, 10);

  //context.beginPath();

  //context.beginPath();

  context.fillRect(10, 10, 50, 50); //实体矩形:x,y,width,height

  //context.stroke();

  $(canvas).on(

  "click",

  { "context": context },

  function(e) {

  $.log(e.data.context);

  var ctx = e.data.context;

  ctx.rotate((Math.PI / 180) * 10); //旋转的角度,旋转的中心是canvas坐标原点

  context.fillRect(10, 10, 50, 50);

  context.stroke();

  }

  );

  }

  );


 

 

 

 transform,transform的参数比较多,也比较难理解,简单的说transform是最自由的变形方式,下面给出些参考  

[javascript] view plaincopy

  //以下两段代码结果一致

  context.transform(1, 0, 0, 1, 10, 10)

  context.translate(10, 10);

  //以下两段代码结果一致

  context.transform(10, 0, 0, 10, 0, 0);

  context.scale(10, 10);

  //以下三段代码结果一致

  context.transform(Math.cos((Math.PI / 180) * 10), Math.sin((Math.PI / 180) * 10), -Math.sin((Math.PI / 180) * 10), Math.cos((Math.PI / 180)) * 10, 0, 0);

  context.transform(-Math.sin((Math.PI/180)*10),Math.cos((Math.PI/180)*10),Math.cos((Math.PI/180)*10),Math.sin((Math.PI/180)*10), 0,0);

  context.rotate(10);

 

  组合

 [javascript] view plaincopy

  $(

  function() {

  var canvas = document.getElementById("mycanvas");

  canvas.height = 100;

  canvas.width = 100;

  var context = canvas.getContext("2d");

  context.fillStyle = "#AABBCC";

  context.fillRect(10, 10, 50, 50);

  //默认 新图形会覆盖在原有内容之上

  context.globalCompositeOperation = "source-over";

  context.fillStyle = "blue";

  context.arc(70, 30, 25, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);

  context.fill();

  $("span").html(context.globalCompositeOperation);

  $(canvas).toggle(

  function() {

  canvas.width = 100;

  // 原有内容之下绘制新图形

  context.clearRect(0, 0, 500, 500);

  context.beginPath();

  context = canvas.getContext("2d");

  context.fillStyle = "#AABBCC";

  context.fillRect(10, 10, 50, 50);

  context.globalCompositeOperation = "destination-over";

  context.fillStyle = "blue";

  context.arc(70, 30, 25, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);

  context.fill();

  $("span").html(context.globalCompositeOperation);

  },

  function() {

  canvas.width = 100;

  //新图形会仅仅出现与原有内容重叠的部分。其它区域都变成透明的

  context.clearRect(0, 0, 500, 500);

  context.beginPath();

  context.fillStyle = "#AABBCC";

  context.fillRect(10, 10, 50, 50);

  context.globalCompositeOperation = "source-in";

  context.fillStyle = "blue";

  context.arc(70, 30, 25, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);

  context.fill();

  $("span").html(context.globalCompositeOperation);

  },

  function() {

  canvas.width = 100;

  //原有内容中与新图形重叠的部分会被保留,其它区域都变成透明的destination-in

  context.clearRect(0, 0, 500, 500);

  context.beginPath();

  context = canvas.getContext("2d");

  context.fillStyle = "#AABBCC";

  context.fillRect(10, 10, 50, 50);

  context.globalCompositeOperation = "destination-in";

  context.fillStyle = "blue";

  context.arc(70, 30, 25, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);

  context.fill();

  $("span").html(context.globalCompositeOperation);

  },

  function() {

  canvas.width = 100;

  //只有新图形中与原有内容不重叠的部分会被绘制出来source-out

  context.clearRect(0, 0, 500, 500);

  context.beginPath();

  context = canvas.getContext("2d");

  context.fillStyle = "#AABBCC";

  context.fillRect(10, 10, 50, 50);

  context.globalCompositeOperation = "source-out";

  context.fillStyle = "blue";

  context.arc(70, 30, 25, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);

  context.fill();

  $("span").html(context.globalCompositeOperation);

  },

  function() {

  canvas.width = 100;

  //原有内容中与新图形不重叠的部分会被保留

  context.clearRect(0, 0, 500, 500);

  context.beginPath();

  context = canvas.getContext("2d");

  context.fillStyle = "#AABBCC";

  context.fillRect(10, 10, 50, 50);

  context.globalCompositeOperation = "destination-out";

  context.fillStyle = "blue";

  context.arc(70, 30, 25, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);

  context.fill();

  $("span").html(context.globalCompositeOperation);

  },

  function() {

  canvas.width = 100;

  //新图形中与原有内容重叠的部分会被绘制,并覆盖于原有内容之上

  context.clearRect(0, 0, 500, 500);

  context.beginPath();

  context = canvas.getContext("2d");

  context.fillStyle = "#AABBCC";

  context.fillRect(10, 10, 50, 50);

  context.globalCompositeOperation = "source-atop";

  context.fillStyle = "blue";

  context.arc(70, 30, 25, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);

  context.fill();

  $("span").html(context.globalCompositeOperation);

  },

  function() {

  canvas.width = 100;

  //原有内容中与新内容重叠的部分会被保留,并会在原有内容之下绘制新图形

  context.clearRect(0, 0, 500, 500);

  context.beginPath();

  context = canvas.getContext("2d");

  context.fillStyle = "#AABBCC";

  context.fillRect(10, 10, 50, 50);

  context.globalCompositeOperation = "destination-atop";

  context.fillStyle = "blue";

  context.arc(70, 30, 25, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);

  context.fill();

  $("span").html(context.globalCompositeOperation);

  },

  function() {

  canvas.width = 100;

  //两图形中重叠部分作加色处理

  context.clearRect(0, 0, 500, 500);

  context.beginPath();

  context = canvas.getContext("2d");

  context.fillStyle = "#AABBCC";

  context.fillRect(10, 10, 50, 50);

  context.globalCompositeOperation = "lighter";

  context.fillStyle = "blue";

  context.arc(70, 30, 25, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);

  context.fill();

  $("span").html(context.globalCompositeOperation);

  },

  function() {

  canvas.width = 100;

  //两图形中重叠的部分作减色处理darker

  context.clearRect(0, 0, 500, 500);

  context.beginPath();

  context = canvas.getContext("2d");

  context.fillStyle = "#AABBCC";

  context.fillRect(10, 10, 50, 50);

  context.globalCompositeOperation = "darker";

  context.fillStyle = "blue";

  context.arc(70, 30, 25, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);

  context.fill();

  $("span").html(context.globalCompositeOperation);

  },

  function() {

  canvas.width = 100;

  //重叠的部分会变成透明

  context.clearRect(0, 0, 500, 500);

  context.beginPath();

  context = canvas.getContext("2d");

  context.fillStyle = "#AABBCC";

  context.fillRect(10, 10, 50, 50);

  context.globalCompositeOperation = "xor";

  context.fillStyle = "blue";

  context.arc(70, 30, 25, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);

  context.fill();

  $("span").html(context.globalCompositeOperation);

  },

  function() {

  canvas.width = 100;

  //只有新图形会被保留,其它都被清除掉

  context.clearRect(0, 0, 500, 500);

  context.beginPath();

  context = canvas.getContext("2d");

  context.fillStyle = "#AABBCC";

  context.fillRect(10, 10, 50, 50);

  context.globalCompositeOperation = "copy";

  context.fillStyle = "blue";

  context.arc(70, 30, 25, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);

  context.fill();

  $("span").html(context.globalCompositeOperation);

  alert("演示结束");

  }

  );

  }

  );


 

  字体(看文档说canvas的字体支持CSS样式的描写,但是,我不知道怎么样让canvas的font支持CSS3的在线字体)

[javascript] view plaincopy

  我们尝试写一圈旋转的文字,吧上面的知识点合起来看看效果

 [javascript] view plaincopy

  $(

  function() {

  var canvas = document.getElementById("mycanvas");

  canvas.height = 500;

  canvas.width = 500;

  var context = canvas.getContext("2d");

  context.translate(150, 150);

  context.scale(0.7, 0.7);

  context.font = "12px Tahoma";

  for (var i = 0; i < 12; i++) {

  context.fillText((i + 3) % 12 == 0 ? 12 : (i + 3) % 12, 150, 10);

  context.rotate((Math.PI / 6));

  }

  }

  );


 

  在具体绘制的时候,定位总是让我这样没有空间感的人感觉痛苦,所以我现在canvas上画上很多格子,帮助我进行布局

[javascript] view plaincopy

  $(

  function() {

  var canvas = document.getElementById("mycanvas");

  canvas.height = 500;

  canvas.width = 500;

  var context = canvas.getContext("2d");

  context.lineWidth = 1;

  context.strokeStyle = "rgb(211,211,211)";

  for (var i = 0; i < 50; i++) {

  $.log(i);

  context.moveTo(i * 10, 0);

  context.lineTo(i * 10, 500);

  context.stroke();

  }

  for (var i = 0; i < 50; i++) {

  $.log(i);

  context.moveTo(0, i * 10);

  context.lineTo(500, i * 10);

  context.stroke();

  }

  }

  );


 

  前面的准备工作都完成了,现在我们来综合下,完成一个具有时分秒的会动的钟

  

[javascript] view plaincopy

  $(

  function() {

  clock();

  setInterval(clock, 1000);

  }

  );

  function clock() {

  var canvas = document.getElementById("mycanvas");

  canvas.height = 500;

  canvas.width = 500;

  var context = canvas.getContext("2d");

  context.beginPath();

  context.lineWidth = 1;

  context.strokeStyle = "rgb(211,211,211)";

  for (var i = 0; i < 50; i++) {

  $.log(i);

  context.moveTo(i * 10, 0);

  context.lineTo(i * 10, 500);

  context.stroke();

  }

  for (var i = 0; i < 50; i++) {

  $.log(i);

  context.moveTo(0, i * 10);

  context.lineTo(500, i * 10);

  context.stroke();

  }

  context.beginPath();

  context.strokeStyle = "rgb(255,0,0)";

  context.arc(250, 250, 200, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);

  context.stroke();

  context.save(); //存储当前画布坐标系状态

  context.beginPath();

  context.font = "14px Tahoma"

  context.translate(255, 255); //将坐标系坐标原点移至图中间

  context.strokeStyle = "#FFFFFF";

  for (var i = 0; i < 12; i++) {

  context.fillText((i + 3) % 12 == 0 ? 12 : (i + 3) % 12, 180, 0);

  context.rotate((Math.PI / 6));

  }

  context.restore();

  context.save();

  context.beginPath();

  context.lineWidth = 5;

  context.translate(255, 255); //将坐标系坐标原点移至图中间

  for (i = 0; i < 60; i++) {

  if (i % 5 != 0) {

  context.beginPath();

  context.moveTo(180, 0);

  context.lineTo(190, 0);

  context.stroke();

  }

  context.rotate(Math.PI / 30);

  }

  context.restore();

  var now = new Date();

  var sec = now.getSeconds();

  var min = now.getMinutes();

  var hr = now.getHours() >= 12 ? now.getHours() - 12 : now.getHours();

  context.save();

  context.translate(255, 255); //将坐标系坐标原点移至图中间

  // - (Math.PI / 6) * 3 是因为0度在3点这里

  context.rotate(hr * (Math.PI / 6) + (Math.PI / 360) * min + (Math.PI / 21600) * sec - (Math.PI / 6) * 3);

  context.lineWidth = 14;

  context.beginPath();

  context.moveTo(-20, 0);

  context.lineTo(150, 0);

  context.stroke();

  context.restore();

  context.save();

  context.translate(255, 255); //将坐标系坐标原点移至图中间

  context.rotate(min * (Math.PI / 30) + (Math.PI / 1800) * sec - (Math.PI / 6) * 3)

  context.lineWidth = 10;

  context.beginPath();

  context.moveTo(-28, 0);

  context.lineTo(160, 0);

  context.stroke();

  context.restore();

  context.save();

  context.translate(255, 255); //将坐标系坐标原点移至图中间

  context.lineWidth = 1;

  context.rotate(sec * (Math.PI / 30) + (Math.PI / 1800) * sec - (Math.PI / 6) * 3)

  context.lineWidth = 10;

  context.beginPath();

  context.moveTo(-28, 0);

  context.lineTo(160, 0);

  context.stroke();

  context.restore();

  }








本文转自 wws5201985 51CTO博客,原文链接:http://blog.51cto.com/wws5201985/812705,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
10062 0
使用NAT网关轻松为单台云服务器设置多个公网IP
在应用中,有时会遇到用户询问如何使单台云服务器具备多个公网IP的问题。 具体如何操作呢,有了NAT网关这个也不是难题。
26784 0
阿里云服务器ECS远程登录用户名密码查询方法
阿里云服务器ECS远程连接登录输入用户名和密码,阿里云没有默认密码,如果购买时没设置需要先重置实例密码,Windows用户名是administrator,Linux账号是root,阿小云来详细说下阿里云服务器远程登录连接用户名和密码查询方法
11605 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13875 0
windows server 2008阿里云ECS服务器安全设置
最近我们Sinesafe安全公司在为客户使用阿里云ecs服务器做安全的过程中,发现服务器基础安全性都没有做。为了为站长们提供更加有效的安全基础解决方案,我们Sinesafe将对阿里云服务器win2008 系统进行基础安全部署实战过程! 比较重要的几部分 1.
9157 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
7361 0
阿里云服务器ECS登录用户名是什么?系统不同默认账号也不同
阿里云服务器Windows系统默认用户名administrator,Linux镜像服务器用户名root
4498 0
+关注
20382
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载