Canvas从入门到小猪头

通过本文你将了解canvas简介及其比较常用的方法，并利用canvas实现一个小猪头。

10年积累的做网站、成都做网站经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先网站设计后付款的网站建设流程，更有平山免费网站建设让你可以放心的选择与我们合作。

一、Canvas简介

1.1 什么是canvas

Canvas(画布)是在HTML5中新增的标签用于在网页实时生成图像，可以操作图像内容，是一个可以用JavaScript操作的位图(bitmap)。

1.2 canvas的坐标系统

canvas的坐标系统如下图所示，其具有如下特点：

  • x轴正方向向右、y轴正方向向下
  • 画布的原点在左上角
  • 横纵坐标单位为像素
  • 每个轴的最小单元为一个像素(栅格)

1.3 canvas的绘制流程

  1. 创建一个标签
  2. 获取canvas元素对应的DOM对象，这是一个Canvas对象
  3. 调用Canvas对象的getContext()方法，该方法返回一个CanvasRenderingContext2D对象，该对象即可绘制图形
  4. 调用CanvasRenderingContext2D对象的方法绘图

1.4 canvas的应用领域

canvas这个神奇的东西有很多领域可以得到应用，下面我们一起唠一唠。

  1. 游戏：canvas 在基于 Web 的图像显示方面比 Flash 更加立体、更加精巧，canvas 游戏在流畅度和跨平台方面更优秀，例如这25款canvas游戏
  2. 可视化的库：Echart
  3. banner广告：Canvas 实现动态的广告效果非常合适
  4. 图形编辑器：后续Photoshop能够100%基于Web实现
  5. 微信读书、腾讯文档均是通过canvas实现

二、基础功能

通过第一章对canvas有了初步的认识，本章就按照一个人绘制一幅画的思路进行演化，逐步了解canvas的基本功能，从而更好的使用它实现一些酷炫的效果。

2.1 坐标系选择

当要绘制一幅画时首先要确定坐标系，只有选择好了坐标系之后才好动笔，在canvas中默认坐标系在左上角(X轴正方向向右、Y轴正方向向下)，可是有的时候需要变换坐标系才能更方便的实现所需的效果，此时需要变换坐标系，canvas提供了以下几种变换坐标系的方式：

  1. translate(dx，dy)：平移坐标系。相当于把原来位于(0，0)位置的坐标原点平移到(dx、dy)点。
  2. rotate(angle)：旋转坐标系。该方法控制坐标系统顺时针旋转angle弧度。
  3. scale(sx，sy)：缩放坐标系。该方法控制坐标系统水平方向上缩放sx，垂直方向上缩放sy。
  4. transform(a,b,c,d,e,f)：允许缩放、旋转、移动并倾斜当前的环境坐标系，其中a表示水平缩放、b表示水平切斜、c表示垂直切斜、d表示垂直缩放、e表示水平移动、f表示垂直移动。 

 
 
 
 
    
  
  
  
  
  1. function main() {
    2. 
  
  
  
  
  2.     const canvas = document.getElementById('canvasId');
    3. 
  
  
  
  
  3.     const ctx = canvas.getContext('2d');
    4. 
  
  
  
  
  4.     ctx.lineWidth = 4;
    5. 
  
  
  
  
  5.     // 默认
    6. 
  
  
  
  
  6.     ctx.save();
    7. 
  
  
  
  
  7.     ctx.strokeStyle = '#F00';
    8. 
  
  
  
  
  8.     drawCoordiante(ctx);
    9. 
  
  
  
  
  9.     ctx.restore();
    10. 
  
  
  
  
  10. 
  
  
  
  
  11.     // 平移
    12. 
  
  
  
  
  12.     ctx.save();
    13. 
  
  
  
  
  13.     ctx.translate(150, 150);
    14. 
  
  
  
  
  14.     ctx.strokeStyle = '#0F0';
    15. 
  
  
  
  
  15.     drawCoordiante(ctx);
    16. 
  
  
  
  
  16.     ctx.restore();
    17. 
  
  
  
  
  17. 
  
  
  
  
  18.     // 旋转
    19. 
  
  
  
  
  19.     ctx.save();
    20. 
  
  
  
  
  20.     ctx.translate(300, 300);
    21. 
  
  
  
  
  21.     ctx.rotate(-Math.PI / 2);
    22. 
  
  
  
  
  22.     ctx.strokeStyle = '#00F';
    23. 
  
  
  
  
  23.     drawCoordiante(ctx);
    24. 
  
  
  
  
  24.     ctx.restore();
    25. 
  
  
  
  
  25. 
  
  
  
  
  26.     // 缩放
    27. 
  
  
  
  
  27.     ctx.save();
    28. 
  
  
  
  
  28.     ctx.translate(400, 400);
    29. 
  
  
  
  
  29.     ctx.rotate(-Math.PI / 2);
    30. 
  
  
  
  
  30.     ctx.scale(0.5, 0.5);
    31. 
  
  
  
  
  31.     ctx.strokeStyle = '#000';
    32. 
  
  
  
  
  32.     drawCoordiante(ctx);
    33. 
  
  
  
  
  33.     ctx.restore();
    34. 
  
  
  
  
  34. }
    35. 
  
  
  
  
  35. 
  
  
  
  
  36. function drawCoordiante(ctx) {
    37. 
  
  
  
  
  37.     ctx.beginPath();
    38. 
  
  
  
  
  38.     ctx.moveTo(0, 0);
    39. 
  
  
  
  
  39.     ctx.lineTo(120, 0);
    40. 
  
  
  
  
  40.     ctx.moveTo(0, 0);
    41. 
  
  
  
  
  41.     ctx.lineTo(0, 80);
    42. 
  
  
  
  
  42.     ctx.closePath();
    43. 
  
  
  
  
  43.     ctx.stroke();
    44. 
  
  
  
  
  44. }
    45. 
  
  
  
  
  45. 
  
  
  
  
  46. main();
    47.

2.2 图形绘制

坐标系选择好了之后，就要开始动笔创作大作了，那么canvas到底允许绘制哪些内容呢?

直线

 
 
 
 
    
  
  
  
  
  1. function drawLine(ctx, startX, startY, endX, endY) {
    2. 
  
  
  
  
  2.     ctx.moveTo(startX, startY);
    3. 
  
  
  
  
  3.     ctx.lineTo(endX, endY);
    4. 
  
  
  
  
  4.     ctx.stroke();
    5. 
  
  
  
  
  5. }
    6.

圆弧

 
 
 
 
    
  
  
  
  
  1. function drawCircle(ctx, x, y, R, startAngle, endAngle) {
    2. 
  
  
  
  
  2.     ctx.arc(x, y, R, startAngle, endAngle);
    3. 
  
  
  
  
  3.     ctx.stroke();
    4. 
  
  
  
  
  4. }
    5.

曲线

 
 
 
 
    
  
  
  
  
  1. // 贝济埃曲线
    2. 
  
  
  
  
  2. function drawBezierCurve(ctx, cpX1, cpY1, cpX, cpY2, endX, endY) {
    3. 
  
  
  
  
  3.     ctx.bezierCurveTo(cpX1, cpY1, cpX, cpY2, endX, endY);
    4. 
  
  
  
  
  4.     ctx.stroke();
    5. 
  
  
  
  
  5. }
    6. 
  
  
  
  
  6. // 二次曲线
    7. 
  
  
  
  
  7. function drawQuadraticCurve(ctx, cpX, cpY, endX, endY) {
    8. 
  
  
  
  
  8.     ctx.quadraticCurveTo(cpX, cpY, endX, endY);
    9. 
  
  
  
  
  9.     ctx.stroke();
    10. 
  
  
  
  
  10. }
    11.

矩形

 
 
 
 
    
  
  
  
  
  1. // 填充矩形
    2. 
  
  
  
  
  2. function drawFillRect(ctx, x, y, width, height) {
    3. 
  
  
  
  
  3.     ctx.fillRect(x, y, width, height);
    4. 
  
  
  
  
  4. }
    5. 
  
  
  
  
  5. // 边框矩形
    6. 
  
  
  
  
  6. function drawStrokeRect(ctx, x, y, width, height) {
    7. 
  
  
  
  
  7.     ctx.strokeRect( x, y, width, height);
    8. 
  
  
  
  
  8. }
    9.

字符串

 
 
 
 
    
  
  
  
  
  1. // 填充字符串
    2. 
  
  
  
  
  2. function drawFillText(ctx, text, x, y) {
    3. 
  
  
  
  
  3.     ctx.fillText(text, x, y);
    4. 
  
  
  
  
  4. }
    5. 
  
  
  
  
  5. // 边框字符串
    6. 
  
  
  
  
  6. function drawStrokeText(ctx, text, x, y) {
    7. 
  
  
  
  
  7.     ctx.strokeText(text, x, y);
    8. 
  
  
  
  
  8. }
    9.

复杂图形绘制——路径

 
 
 
 
    
  
  
  
  
  1. // 利用路径绘制
    2. 
  
  
  
  
  2. function drawFigureByPath(ctx) {
    3. 
  
  
  
  
  3.     ctx.beginPath();
    4. 
  
  
  
  
  4.     ctx.moveTo(100, 400);
    5. 
  
  
  
  
  5.     ctx.lineTo(200, 450);
    6. 
  
  
  
  
  6.     ctx.lineTo(150, 480);
    7. 
  
  
  
  
  7.     ctx.closePath();
    8. 
  
  
  
  
  8.     ctx.fill();
    9. 
  
  
  
  
  9. }
    10. 
 
 
 
 
 
 
 
 
    
  
  
  
  
  1. function main() {
    2. 
  
  
  
  
  2.     const canvas = document.getElementById('canvasId');
    3. 
  
  
  
  
  3.     const ctx = canvas.getContext('2d');
    4. 
  
  
  
  
  4.     ctx.lineWidth = 2;
    5. 
  
  
  
  
  5.     ctx.strokeStyle = '#F00';
    6. 
  
  
  
  
  6.     ctx.fillStyle = '#F00';
    7. 
  
  
  
  
  7.     ctx.font = 'normal 50px 宋体';
    8. 
  
  
  
  
  8.     drawLine(ctx, 50, 10, 150, 10);
    9. 
  
  
  
  
  9.     ctx.moveTo(150, 100);
    10. 
  
  
  
  
  10.     drawCircle(ctx, 100, 100, 50, 0, Math.PI);
    11. 
  
  
  
  
  11.     ctx.moveTo(300, 100);
    12. 
  
  
  
  
  12.     drawCircle(ctx, 250, 100, 50, 0, Math.PI * 2);
    13. 
  
  
  
  
  13.     ctx.moveTo(350, 150);
    14. 
  
  
  
  
  14.     drawBezierCurve(ctx, 200, 200, 450, 250, 300, 300);
    15. 
  
  
  
  
  15.     ctx.moveTo(50, 250);
    16. 
  
  
  
  
  16.     drawQuadraticCurve(ctx, 50, 400, 80, 400);
    17. 
  
  
  
  
  17.     drawFillRect(ctx, 100, 300, 100, 50);
    18. 
  
  
  
  
  18.     drawStrokeRect(ctx, 300, 300, 100, 50);
    19. 
  
  
  
  
  19.     drawFillText(ctx, 'I', 100, 400);
    20. 
  
  
  
  
  20.     drawStrokeText(ctx, 'I', 300, 400);
    21. 
  
  
  
  
  21.     drawFigureByPath(ctx);
    22. 
  
  
  
  
  22. }
    23.

2.3 填充风格

利用canvas绘制图形时势必要上点颜料，通过设置fillStyle属性即可设置对应的颜料，对于颜料值主要有以下四种：纯颜色、线性渐变颜色、径向渐变颜色、位图。

纯颜色

 
 
 
 
    
  
  
  
  
  1. function useColorFill(ctx) {
    2. 
  
  
  
  
  2.     ctx.save();
    3. 
  
  
  
  
  3.     ctx.fillStyle = '#F00';
    4. 
  
  
  
  
  4.     ctx.fillRect(10, 10, 100, 100);
    5. 
  
  
  
  
  5.     ctx.restore();
    6. 
  
  
  
  
  6. }
    7.

线性渐变颜色

 
 
 
 
    
  
  
  
  
  1. function useLinearGradientFill(ctx) {
    2. 
  
  
  
  
  2.     ctx.save();
    3. 
  
  
  
  
  3.     const lg = ctx.createLinearGradient(110, 10, 210, 10);
    4. 
  
  
  
  
  4.     lg.addColorStop(0.2, '#F00');
    5. 
  
  
  
  
  5.     lg.addColorStop(0.5, '#0F0');
    6. 
  
  
  
  
  6.     lg.addColorStop(0.9, '#00F');
    7. 
  
  
  
  
  7.     ctx.fillStyle = lg;
    8. 
  
  
  
  
  8.     ctx.fillRect(120, 10, 100, 100);
    9. 
  
  
  
  
  9.     ctx.restore();
    10. 
  
  
  
  
  10. }
    11.

径向渐变颜色

 
 
 
 
    
  
  
  
  
  1. function useRadialGradientFill(ctx) {
    2. 
  
  
  
  
  2.     ctx.save();
    3. 
  
  
  
  
  3.     const lg = ctx.createRadialGradient(260, 60, 10, 260, 60, 60);
    4. 
  
  
  
  
  4.     lg.addColorStop(0.2, '#F00');
    5. 
  
  
  
  
  5.     lg.addColorStop(0.5, '#0F0');
    6. 
  
  
  
  
  6.     lg.addColorStop(0.9, '#00F');
    7. 
  
  
  
  
  7.     ctx.fillStyle = lg;
    8. 
  
  
  
  
  8.     ctx.fillRect(230, 10, 100, 100);
    9. 
  
  
  
  
  9.     ctx.restore();
    10. 
  
  
  
  
  10. }
    11.

位图填充

 
 
 
 
    
  
  
  
  
  1. function useImageFill(ctx) {
    2. 
  
  
  
  
  2.     ctx.save();
    3. 
  
  
  
  
  3.     const image = new Image();
    4. 
  
  
  
  
  4.     image.src = 'https://dss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=442547030,98631113&fm=58';
    5. 
  
  
  
  
  5.     image.onload = function () {
    6. 
  
  
  
  
  6.         // 创建位图填充
    7. 
  
  
  
  
  7.         const imgPattern = ctx.createPattern(image, 'repeat');
    8. 
  
  
  
  
  8.         ctx.fillStyle = imgPattern;
    9. 
  
  
  
  
  9.         ctx.fillRect(340, 10, 100, 100);
    10. 
  
  
  
  
  10.         ctx.restore();
    11. 
  
  
  
  
  11.     }
    12. 
  
  
  
  
  12. }
    13.

2.4 临时保存

用一只画笔在画某个美女时，忽然来了灵感需要画另一个帅哥，这个时候又不想放弃这个美女，则就需要将当前画美女的颜料、坐标等状态进行暂存，等到画完帅哥后恢复状态进行美女的绘制。在canvas中可以通过save()和restore()方法实现，调用save()方法后将这一时刻的设置放到一个暂存栈中，然后可以放心的修改上下文，在需要绘制之前的上下文时，可以调用restore()方法。

 
 
 
 
    
  
  
  
  
  1. // 从左往右是依次绘制（中间为用新的样式填充，最后一个是恢复到原来样式填充）
    2. 
  
  
  
  
  2. function main() {
    3. 
  
  
  
  
  3.     const canvas = document.getElementById('canvasId');
    4. 
  
  
  
  
  4.     const ctx = canvas.getContext('2d');
    5. 
  
  
  
  
  5.     ctx.fillStyle = '#F00';
    6. 
  
  
  
  
  6.     ctx.fillRect(10, 10, 100, 100);
    7. 
  
  
  
  
  7.     ctx.save();
    8. 
  
  
  
  
  8.     ctx.fillStyle = '#0F0';
    9. 
  
  
  
  
  9.     ctx.fillRect(150, 10, 100, 100);
    10. 
  
  
  
  
  10.     ctx.restore();
    11. 
  
  
  
  
  11.     ctx.fillRect(290, 10, 100, 100);
    12. 
  
  
  
  
  12. }
    13.

2.5 引入外部图像

有的时候需要引入外部图片，然后对外部图片进行像素级别的处理，最后进行保存。

  1. 绘制图像：drawImage
  2. 取得图像数据：getIamgeData
  3. 将修改后的数据重新填充到Canvas中：putImageData
  4. 输出位图：toDataURL

 
 
 
 
    
  
  
  
  
  1. function main() {
    2. 
  
  
  
  
  2.     const canvas = document.getElementById('canvasId');
    3. 
  
  
  
  
  3.     const ctx = canvas.getContext('2d');
    4. 
  
  
  
  
  4.     const image = document.getElementById('image');
    5. 
  
  
  
  
  5.     // 绘制图像
    6. 
  
  
  
  
  6.     ctx.drawImage(image, 0, 0);
    7. 
  
  
  
  
  7.     // 获取图像数据
    8. 
  
  
  
  
  8.     const imageData = ctx.getImageData(0, 0, image.width, image.height);
    9. 
  
  
  
  
  9.     const data = imageData.data;
    10. 
  
  
  
  
  10.     for (let i = 0, len = data.length; i < len; i += 4) {
    11. 
  
  
  
  
  11.         const red = data[i];
    12. 
  
  
  
  
  12.         const green = data[i + 1];
    13. 
  
  
  
  
  13.         const blue = data[i + 2];
    14. 
  
  
  
  
  14. 
  
  
  
  
  15.         const average = Math.floor((red + green + blue) / 3);
    16. 
  
  
  
  
  16. 
  
  
  
  
  17.         data[i] = average;
    18. 
  
  
  
  
  18.         data[i + 1] = average;
    19. 
  
  
  
  
  19.         data[i + 2] = average;
    20. 
  
  
  
  
  20.     }
    21. 
  
  
  
  
  21. 
  
  
  
  
  22.     imageData.data = data;
    23. 
  
  
  
  
  23.     ctx.putImageData(imageData, 0, 0);
    24. 
  
  
  
  
  24.     document.getElementById('result').src = canvas.toDataURL('image/png');
    25. 
  
  
  
  
  25. }
    26.

三、猪头实战

学习了这么多，就利用canvas绘制一个猪头吧，毕竟每个程序员身边肯定有一个陪伴自己的小胖猪，嘿嘿。

 
 
 
 
    
  
  
  
  
  1. function main() {
    2. 
  
  
  
  
  2.     const canvas = document.getElementById('canvasId');
    3. 
  
  
  
  
  3.     const ctx = canvas.getContext('2d');
    4. 
  
  
  
  
  4.     ctx.lineWidth = 4;
    5. 
  
  
  
  
  5.     ctx.strokeStyle = '#000';
    6. 
  
  
  
  
  6.     ctx.fillStyle = '#ffd8e1';
    7. 
  
  
  
  
  7.     ctx.translate(260, 20);
    8. 
  
  
  
  
  8.     drawPigEar(ctx);
    9. 
  
  
  
  
  9.     ctx.save();
    10. 
  
  
  
  
  10.     ctx.rotate(Math.PI / 2);
    11. 
  
  
  
  
  11.     drawPigEar(ctx);
    12. 
  
  
  
  
  12.     ctx.restore();
    13. 
  
  
  
  
  13.     drawPigFace(ctx);
    14. 
  
  
  
  
  14.     ctx.save();
    15. 
  
  
  
  
  15.     ctx.translate(-100, -100);
    16. 
  
  
  
  
  16.     drawPigEye(ctx);
    17. 
  
  
  
  
  17.     ctx.restore();
    18. 
  
  
  
  
  18.     ctx.save();
    19. 
  
  
  
  
  19.     ctx.translate(100, -100);
    20. 
  
  
  
  
  20.     drawPigEye(ctx);
    21. 
  
  
  
  
  21.     ctx.restore();
    22. 
  
  
  
  
  22.     ctx.save();
    23. 
  
  
  
  
  23.     ctx.translate(0, 60);
    24. 
  
  
  
  
  24.     drawPigNose(ctx);
    25. 
  
  
  
  
  25.     ctx.restore();
    26. 
  
  
  
  
  26. }
    27. 
  
  
  
  
  27. 
  
  
  
  
  28. function drawPigEar(ctx) {
    29. 
  
  
  
  
  29.     ctx.save();
    30. 
  
  
  
  
  30.     ctx.beginPath();
    31. 
  
  
  
  
  31.     ctx.arc(-250, 0, 250, 0, -Math.PI / 2, true);
    32. 
  
  
  
  
  32.     ctx.arc(0, -250, 250, -Math.PI, Math.PI / 2, true);
    33. 
  
  
  
  
  33.     ctx.closePath();
    34. 
  
  
  
  
  34.     ctx.fill();
    35. 
  
  
  
  
  35.     ctx.stroke();
    36. 
  
  
  
  
  36.     ctx.restore();
    37. 
  
  
  
  
  37. }
    38. 
  
  
  
  
  38. 
  
  
  
  
  39. function drawPigFace(ctx) {
    40. 
  
  
  
  
  40.     ctx.save();
    41. 
  
  
  
  
  41.     ctx.beginPath();
    42. 
  
  
  
  
  42.     ctx.arc(0, 0, 250, 0, Math.PI * 2);
    43. 
  
  
  
  
  43.     ctx.fill();
    44. 
  
  
  
  
  44.     ctx.stroke();
    45. 
  
  
  
  
  45.     ctx.closePath();
    46. 
  
  
  
  
  46.     ctx.restore();
    47. 
  
  
  
  
  47. }
    48. 
  
  
  
  
  48. 
  
  
  
  
  49. function drawPigEye(ctx) {
    50. 
  
  
  
  
  50.     ctx.save();
    51. 
  
  
  
  
  51.     ctx.fillStyle = '#000';
    52. 
  
  
  
  
  52.     ctx.beginPath();
    53. 
  
  
  
  
  53.     ctx.arc(0, 0, 20, 0, Math.PI * 2);
    54. 
  
  
  
  
  54.     ctx.closePath();
    55. 
  
  
  
  
  55.     ctx.fill();
    56. 
  
  
  
  
  56.     ctx.restore();
    57. 
  
  
  
  
  57. }
    58. 
  
  
  
  
  58. 
  
  
  
  
  59. function drawPigNose(ctx) {
    60. 
  
  
  
  
  60.     ctx.save();
    61. 
  
  
  
  
  61.     ctx.fillStyle = '#fca7aa';
    62. 
  
  
  
  
  62.     ctx.beginPath();
    63. 
  
  
  
  
  63.     ctx.ellipse(0, 0, 150, 100, 0, 0, Math.PI * 2);
    64. 
  
  
  
  
  64.     ctx.closePath();
    65. 
  
  
  
  
  65.     ctx.fill();
    66. 
  
  
  
  
  66.     ctx.stroke();
    67. 
  
  
  
  
  67.     ctx.save();
    68. 
  
  
  
  
  68.     ctx.translate(-60, 0);
    69. 
  
  
  
  
  69.     drawPigNostrils(ctx);
    70. 
  
  
  
  
  70.     ctx.restore();
    71. 
  
  
  
  
  71.     ctx.save();
    72. 
  
  
  
  
  72.     ctx.translate(60, 0);
    73. 
  
  
  
  
  73.     drawPigNostrils(ctx);
    74. 
  
  
  
  
  74.     ctx.restore();
    75. 
  
  
  
  
  75.     ctx.restore();
    76. 
  
  
  
  
  76. }
    77. 
  
  
  
  
  77. 
  
  
  
  
  78. function drawPigNostrils(ctx) {
    79. 
  
  
  
  
  79.     ctx.save();
    80. 
  
  
  
  
  80.     ctx.fillStyle = '#b55151';
    81. 
  
  
  
  
  81.     ctx.beginPath();
    82. 
  
  
  
  
  82.     ctx.ellipse(0, 0, 40, 60, 0, 0, Math.PI * 2);
    83. 
  
  
  
  
  83.     ctx.closePath();
    84. 
  
  
  
  
  84.     ctx.fill();
    85. 
  
  
  
  
  85.     ctx.stroke();
    86. 
  
  
  
  
  86.     ctx.restore();
    87. 
  
  
  
  
  87. }
    88. 
  
  
  
  
  88. 
  
  
  
  
  89. main();
    90.

本文转载自微信公众号「执鸢者」，可以通过以下二维码关注。转载本文请联系执鸢者公众号。

分享题目：Canvas从入门到小猪头
分享URL：http://www.shufengxianlan.com/qtweb/news1/520351.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

虚拟主机知识

各行业网站

H5网站制作　　 　小程序　　 　成都网站推广　　 　宣威网站建设　　 　网络营销推广　　 　胜锦安防科技　　 　关键词排名　　 　免备案虚拟主机空间　　 　软文推广　　 　IDC机房托管　　 　济桢教育　　 　广汉锦华　　 　成都网站推广　　 　成都网站推广　　 　崇州搬家公司　　 　网站空间　　 　云服务器香港　　 　java虚拟主机　　 　成都做网站　　 　成都h5建站开发