canvas初学1

news2024/11/29 10:39:04

前端数据可视化方案：
在这里插入图片描述

一、canvas绘制直线

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>canvas绘制线条</title>
  <style>
    canvas {
      display: block;
      margin: 10px auto 0;
      border: 1px solid orange;
    }
  </style>
</head>

<body>
  <canvas id="canvas" width="600" height="500">您的浏览器当前不支持 canvas</canvas>
</body>
<script>
  const canvas = document.getElementById('canvas')
  const ctx = canvas.getContext('2d')

  ctx.beginPath()
  ctx.lineWidth = 4
  ctx.strokeStyle = 'orange'
  // 起点  终点  中间点
  ctx.moveTo(100, 100)
  ctx.lineTo(300, 300)
  ctx.lineTo(500, 200)
  ctx.stroke()
  ctx.closePath()

</script>

</html>

二、canvas高清绘制

解决模糊问题

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>canvas 高清绘制</title>
  <style>
    canvas {
      display: block;
      margin: 10px auto 0;
      border: 1px solid orange;
    }
  </style>
</head>

<body>
  <canvas id="canvas" width="600" height="500">您的浏览器当前不支持 canvas</canvas>
</body>
<script>
  const canvas = document.getElementById('canvas')
  const ctx = canvas.getContext('2d')

  const getPixelRatio = (context) => {
    return window.devicePixelRatio || 1
  }

  /* 
    01 放大 canvas 
    02 再在 css 里将宽高设置为原来的大小 
    03 考虑到内容的缩放，因此也需将 ctx 缩放
  */

  const ratio = getPixelRatio()
  const oldWidth = canvas.width
  const oldHeight = canvas.height

  canvas.width = canvas.width * ratio
  canvas.height = canvas.height * ratio

  canvas.style.width = oldWidth + 'px'
  canvas.style.height = oldHeight + 'px'

  ctx.scale(ratio, ratio)


  ctx.beginPath()
  ctx.lineWidth = 10
  ctx.strokeStyle = 'orange'
  ctx.moveTo(100, 100)
  ctx.lineTo(300, 300)
  ctx.lineTo(500, 200)
  ctx.stroke()
  ctx.closePath()

</script>

</html>

三、canvas绘制直角坐标系

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>绘制直角坐标系</title>
  <style>
    canvas {
      display: block;
      margin: 10px auto 0;
      border: 1px solid orange;
    }
  </style>
</head>

<body>
  <canvas id="canvas" width="600" height="400">您的浏览器不支持 canvas</canvas>
</body>
<script>
  const canvas = document.getElementById('canvas')
  const ctx = canvas.getContext('2d')

  canvas.style.width = canvas.width + 'px'
  canvas.style.height = canvas.height + 'px'
  canvas.width = canvas.width * 1.5
  canvas.height = canvas.height * 1.5

  // 提前设置相关属性
  const ht = canvas.clientHeight
  const wd = canvas.clientWidth
  const pad = 20
  const bottomPad = 20
  const step = 100

  const drawAxis = (options) => {
    const { ht, wd, pad, bottomPad, step, ctx } = options
    // 绘制坐标轴
    ctx.beginPath()
    ctx.lineWidth = 2
    ctx.strokeStyle = 'lightblue'
    ctx.moveTo(pad, pad)
    ctx.lineTo(pad, ht * 1.5 - bottomPad)
    ctx.lineTo(wd * 1.5 - pad, ht * 1.5 - bottomPad)
    ctx.stroke()
    ctx.closePath()

    // 绘制 X 轴方向刻度
    ctx.beginPath()
    ctx.lineWidth = 1
    ctx.strokeStyle = '#666'
    for (let i = 1; i < Math.floor(wd * 1.5 / step); i++) {
      ctx.moveTo(pad + i * step, ht * 1.5 - bottomPad)
      ctx.lineTo(pad + i * step, ht * 1.5 - bottomPad - 10)
    }
    ctx.stroke()
    ctx.closePath()


    // 绘制 Y 轴方向刻度
    ctx.beginPath()
    ctx.lineWidth = 1
    ctx.strokeStyle = '#666'
    for (let i = 1; i < Math.floor(ht * 1.5 / step); i++) {
      ctx.moveTo(pad, (ht * 1.5 - bottomPad) - (i * step))
      ctx.lineTo(pad + 10, (ht * 1.5 - bottomPad) - (i * step))
    }
    ctx.stroke()
    ctx.closePath()
  }

  drawAxis({
    ht: ht,
    wd: wd,
    pad: pad,
    bottomPad: bottomPad,
    step: step,
    ctx: ctx
  })

</script>

</html>

四、canvas绘制柱状图

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>绘制矩形</title>
  <style>
    canvas {
      display: block;
      margin: 10px auto 0;
      border: 1px solid orange;
    }
  </style>
</head>

<body>
  <canvas id="canvas" width="600" height="400">您的浏览器不支持 canvas</canvas>
</body>
<script>
  const canvas = document.getElementById('canvas')
  const ctx = canvas.getContext('2d')

  canvas.style.width = canvas.width + 'px'
  canvas.style.height = canvas.height + 'px'
  canvas.width = canvas.width * 1.5
  canvas.height = canvas.height * 1.5

  // 提前设置相关属性
  const ht = canvas.clientHeight
  const wd = canvas.clientWidth
  const pad = 20
  const bottomPad = 20
  const step = 100

  const drawAxis = (options) => {
    const { ht, wd, pad, bottomPad, step, ctx } = options
    // 绘制坐标轴
    ctx.beginPath()
    ctx.lineWidth = 2
    ctx.strokeStyle = 'lightblue'
    ctx.moveTo(pad, pad)
    ctx.lineTo(pad, ht * 1.5 - bottomPad)
    ctx.lineTo(wd * 1.5 - pad, ht * 1.5 - bottomPad)
    ctx.stroke()
    ctx.closePath()

    // 绘制 X 轴方向刻度
    ctx.beginPath()
    ctx.lineWidth = 1
    ctx.strokeStyle = '#666'
    for (let i = 1; i < Math.floor(wd * 1.5 / step); i++) {
      ctx.moveTo(pad + i * step, ht * 1.5 - bottomPad)
      ctx.lineTo(pad + i * step, ht * 1.5 - bottomPad + 10)
    }
    ctx.stroke()
    ctx.closePath()


    // 绘制 Y 轴方向刻度
    ctx.beginPath()
    ctx.lineWidth = 1
    ctx.strokeStyle = '#666'
    for (let i = 1; i < Math.floor(ht * 1.5 / step); i++) {
      ctx.moveTo(pad, (ht * 1.5 - bottomPad) - (i * step))
      ctx.lineTo(pad + 10, (ht * 1.5 - bottomPad) - (i * step))
    }
    ctx.stroke()
    ctx.closePath()
  }

  drawAxis({
    ht: ht,
    wd: wd,
    pad: pad,
    bottomPad: bottomPad,
    step: step,
    ctx: ctx
  })

  // 绘制矩形：描述+填充   描边  填充 
  // ctx.beginPath()
  // ctx.lineWidth = 5
  // ctx.strokeStyle = 'orange'
  // ctx.fillStyle = 'hotpink'
  // ctx.rect(100, 100, 300, 200)
  // ctx.fill()
  // ctx.stroke()
  // ctx.closePath()

  // ctx.beginPath()
  // ctx.lineWidth = 4
  // ctx.strokeStyle = 'seagreen'
  // ctx.strokeRect(100, 310, 300, 200)
  // ctx.closePath()

  // ctx.beginPath()
  // ctx.fillStyle = 'skyblue'
  // ctx.fillRect(410, 310, 300, 200)
  // ctx.closePath()

  // 绘制直方图
  ctx.beginPath()
  for (var i = 1; i < Math.floor(wd * 1.5 / step); i++) {
    const height = Math.random() * 300 + 50
    ctx.fillStyle = '#' + parseInt(Math.random() * 0xFFFFFF).toString(16)
    ctx.fillRect((i * step), ht * 1.5 - bottomPad - height, 40, height)
  }
  ctx.closePath()

</script>

</html>

五、canvas绘制圆形

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>绘制矩形</title>
  <style>
    canvas {
      display: block;
      margin: 10px auto 0;
      border: 1px solid orange;
    }
  </style>
</head>

<body>
  <canvas id="canvas" width="600" height="400">您的浏览器不支持 canvas</canvas>
</body>
<script>
  const canvas = document.getElementById('canvas')
  const ctx = canvas.getContext('2d')

  canvas.style.width = canvas.width + 'px'
  canvas.style.height = canvas.height + 'px'
  canvas.width = canvas.width * 1.5
  canvas.height = canvas.height * 1.5

  // 提前设置相关属性
  const ht = canvas.clientHeight
  const wd = canvas.clientWidth
  const pad = 20
  const bottomPad = 20
  const step = 100

  const drawAxis = (options) => {
    const { ht, wd, pad, bottomPad, step, ctx } = options
    // 绘制坐标轴
    ctx.beginPath()
    ctx.lineWidth = 2
    ctx.strokeStyle = 'lightblue'
    ctx.moveTo(pad, pad)
    ctx.lineTo(pad, ht * 1.5 - bottomPad)
    ctx.lineTo(wd * 1.5 - pad, ht * 1.5 - bottomPad)
    ctx.stroke()
    ctx.closePath()

    // 绘制 X 轴方向刻度
    ctx.beginPath()
    ctx.lineWidth = 1
    ctx.strokeStyle = '#666'
    for (let i = 1; i < Math.floor(wd * 1.5 / step); i++) {
      ctx.moveTo(pad + i * step, ht * 1.5 - bottomPad)
      ctx.lineTo(pad + i * step, ht * 1.5 - bottomPad + 10)
    }
    ctx.stroke()
    ctx.closePath()


    // 绘制 Y 轴方向刻度
    ctx.beginPath()
    ctx.lineWidth = 1
    ctx.strokeStyle = '#666'
    for (let i = 1; i < Math.floor(ht * 1.5 / step); i++) {
      ctx.moveTo(pad, (ht * 1.5 - bottomPad) - (i * step))
      ctx.lineTo(pad + 10, (ht * 1.5 - bottomPad) - (i * step))
    }
    ctx.stroke()
    ctx.closePath()
  }

  drawAxis({
    ht: ht,
    wd: wd,
    pad: pad,
    bottomPad: bottomPad,
    step: step,
    ctx: ctx
  })

  // 绘制圆环
  ctx.beginPath()
  ctx.lineWidth = 2
  ctx.strokeStyle = 'orange'
  ctx.arc(400, 300, 200, 0, Math.PI / 4, true)
  ctx.stroke()
  ctx.closePath()

  // 绘制圆形
  ctx.beginPath()
  ctx.fillStyle = 'skyblue'
  ctx.moveTo(400, 300)
  ctx.arc(400, 300, 100, 0, -Math.PI / 2, true)
  ctx.fill()
  ctx.closePath()

</script>

</html>

六、canvas绘制饼状图

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>绘制矩形</title>
  <style>
    canvas {
      display: block;
      margin: 10px auto 0;
      border: 1px solid orange;
    }
  </style>
</head>

<body>
  <canvas id="canvas" width="600" height="400">您的浏览器不支持 canvas</canvas>
</body>
<script>
  const canvas = document.getElementById('canvas')
  const ctx = canvas.getContext('2d')

  canvas.style.width = canvas.width + 'px'
  canvas.style.height = canvas.height + 'px'
  canvas.width = canvas.width * 1.5
  canvas.height = canvas.height * 1.5

  // 提前设置相关属性
  const ht = canvas.clientHeight
  const wd = canvas.clientWidth
  const pad = 20
  const bottomPad = 20
  const step = 100

  const drawAxis = (options) => {
    const { ht, wd, pad, bottomPad, step, ctx } = options
    // 绘制坐标轴
    ctx.beginPath()
    ctx.lineWidth = 2
    ctx.strokeStyle = 'lightblue'
    ctx.moveTo(pad, pad)
    ctx.lineTo(pad, ht * 1.5 - bottomPad)
    ctx.lineTo(wd * 1.5 - pad, ht * 1.5 - bottomPad)
    ctx.stroke()
    ctx.closePath()

    // 绘制 X 轴方向刻度
    ctx.beginPath()
    ctx.lineWidth = 1
    ctx.strokeStyle = '#666'
    for (let i = 1; i < Math.floor(wd * 1.5 / step); i++) {
      ctx.moveTo(pad + i * step, ht * 1.5 - bottomPad)
      ctx.lineTo(pad + i * step, ht * 1.5 - bottomPad + 10)
    }
    ctx.stroke()
    ctx.closePath()


    // 绘制 Y 轴方向刻度
    ctx.beginPath()
    ctx.lineWidth = 1
    ctx.strokeStyle = '#666'
    for (let i = 1; i < Math.floor(ht * 1.5 / step); i++) {
      ctx.moveTo(pad, (ht * 1.5 - bottomPad) - (i * step))
      ctx.lineTo(pad + 10, (ht * 1.5 - bottomPad) - (i * step))
    }
    ctx.stroke()
    ctx.closePath()
  }

  drawAxis({
    ht: ht,
    wd: wd,
    pad: pad,
    bottomPad: bottomPad,
    step: step,
    ctx: ctx
  })

  ctx.beginPath()
  ctx.shadowOffsetX = 0
  ctx.shadowOffsetY = 0
  ctx.shadowBlur = 4
  ctx.shadowColor = '#333'
  ctx.fillStyle = '#5C1918'
  ctx.moveTo(400, 300)
  ctx.arc(400, 300, 100, -Math.PI / 2, -Math.PI / 4)
  ctx.fill()
  ctx.closePath()

  ctx.beginPath()
  ctx.shadowOffsetX = 0
  ctx.shadowOffsetY = 0
  ctx.shadowBlur = 4
  ctx.shadowColor = '#5C1918'
  ctx.fillStyle = '#A32D29'
  ctx.moveTo(400, 300)
  ctx.arc(400, 300, 110, -Math.PI / 4, Math.PI / 4)
  ctx.fill()
  ctx.closePath()

  ctx.beginPath()
  ctx.shadowOffsetX = 0
  ctx.shadowOffsetY = 0
  ctx.shadowBlur = 4
  ctx.shadowColor = '#A32D29'
  ctx.fillStyle = '#B9332E'
  ctx.moveTo(400, 300)
  ctx.arc(400, 300, 120, Math.PI / 4, Math.PI * 5 / 8)
  ctx.fill()
  ctx.closePath()

  ctx.beginPath()
  ctx.shadowOffsetX = 0
  ctx.shadowOffsetY = 0
  ctx.shadowBlur = 4
  ctx.shadowColor = '#B9332E'
  ctx.fillStyle = '#842320'
  ctx.moveTo(400, 300)
  ctx.arc(400, 300, 130, Math.PI * 5 / 8, Math.PI)
  ctx.fill()
  ctx.closePath()

  ctx.beginPath()
  ctx.shadowOffsetX = 0
  ctx.shadowOffsetY = 0
  ctx.shadowBlur = 4
  ctx.shadowColor = '#842320'
  ctx.fillStyle = '#D76662'
  ctx.moveTo(400, 300)
  ctx.arc(400, 300, 140, Math.PI, Math.PI * 3 / 2)
  ctx.fill()
  ctx.closePath()

</script>

</html>

七、canvas绘制文字

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>绘制文字</title>
  <style>
    canvas {
      display: block;
      margin: 40px auto 0;
      border: 1px solid sienna;
    }
  </style>
</head>

<body>
  <canvas id="canvas" width="600" height="400">您的浏览器不支持 canvas</canvas>
</body>
<script>
  const canvas = document.getElementById('canvas')
  const ctx = canvas.getContext('2d')

  canvas.style.width = canvas.width + 'px'
  canvas.style.height = canvas.height + 'px'
  canvas.width = canvas.width * 1.5
  canvas.height = canvas.height * 1.5

  // 绘制居中线条
  ctx.beginPath()
  ctx.lineWidth = 1
  ctx.strokeStyle = '#ccc'
  ctx.moveTo(450, 0)
  ctx.lineTo(450, 600)
  ctx.stroke()
  ctx.closePath()

  ctx.beginPath()
  ctx.lineWidth = 1
  ctx.strokeStyle = '#ccc'
  ctx.moveTo(0, 300)
  ctx.lineTo(900, 300)
  ctx.stroke()
  ctx.closePath()

  // 实心文字 描边文字
  ctx.fillStyle = 'orange'
  ctx.strokeStyle = "hotpink"
  ctx.font = 'bold 60px 微软雅黑'
  ctx.fillText('拉勾教育', 100, 100, 100)
  ctx.strokeText('前端', 100, 240)

  // 对齐属性设置
  ctx.textAlign = 'center' // left right start end center 
  ctx.textBaseline = "middle"  // top bottom middle
  ctx.fillText('拉勾教育', 450, 300)

</script>

</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/367404.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

CentOS 8利用Apache安装部署文件服务器

CentOS 8利用Apache安装部署文件服务器

1&#xff1a;部署的目的是做一个类似下面开源镜像网站&#xff0c;把一些软件或者资料上传到服务器上面&#xff0c;减少用户在互联网上下载资料&#xff0c;提高效率&#xff0c;减少病毒。 2&#xff1a;使用下面的命令配置本机的IP地址主机名等信息。后期使用IP地址进行访问…
阅读更多...
任意网络环境实现外网访问分销ERP

任意网络环境实现外网访问分销ERP

随着企业业务的不断扩展&#xff0c;经营网点遍布全国不同的区域&#xff0c;传统的管理手段存在诸多问题&#xff0c;无法实时监控各地分公司、办事处及营业网点的经营状况&#xff1b;订货、销售、库存等数据和信息反馈不及时&#xff0c;商品积压、缺货情况经常出现&#xf…
阅读更多...
软件项目管理知识回顾---软件项目进度管理

软件项目管理知识回顾---软件项目进度管理

软件项目进度管理 4.进度管理 4.1进度管理 1.概念&#xff1a;按时保质的完成任务 2.目的&#xff1a;按时完成任务&#xff0c;合理分配资源&#xff0c;发挥最佳的工作效率 3.活动&#xff1a;工作包分解出的进度活动 4.内容&#xff1a;项目进度计划的指定和项目进度计划的执…
阅读更多...
一篇了解分布式id生成方案

一篇了解分布式id生成方案

系统唯一ID是我们在设计一个系统的时候常常会遇见的问题&#xff0c;也常常为这个问题而纠结。生成ID的方法有很多&#xff0c;适应不同的场景、需求以及性能要求。所以有些比较复杂的系统会有多个ID生成的策略。下面就介绍一些常见的ID生成策略。 1.数据库自增长序列或字段 …
阅读更多...
BabylonJS之放烟花

BabylonJS之放烟花

BabylonJS烟花效果视频一&#xff1a; 技术调研 1. 方案一&#xff1a;ParticleSystem 用ParticleSystem来实现每一束的烟花效果&#xff0c;如果浏览器支持WebGL2功能&#xff0c;使用GPUParticleSystem性能会有极大的提升。 优点&#xff1a; 烟花效果易实现且效果好。 缺点…
阅读更多...
什么是品牌营销？学会正确推广您的业务

什么是品牌营销？学会正确推广您的业务

什么是品牌营销&#xff1f; 品牌营销涉及长期战略规划&#xff0c;以推广整个品牌&#xff0c;而不是营销单个产品或服务。它分享了一个引人入胜的故事&#xff0c;以在潜在客户中产生品牌知名度并建立声誉。 面向消费者的品牌使用品牌智能软件来了解人们对其品牌的看法&#…
阅读更多...
磨金石教育摄影技能干货分享｜极简艺术与人文摄影相结合（一）

磨金石教育摄影技能干货分享｜极简艺术与人文摄影相结合（一）

柏林街头&#xff08;德国&#xff09;照片中无论是景物元素还是色彩元素都很少&#xff0c;主体人物与道路外加一个箱子。极简艺术照片的减法做到了。一名女子端坐在路边&#xff0c;白色的衣服一尘不染&#xff0c;手持镜子补妆。虽然时间场地比较的随意&#xff0c;但是依然…
阅读更多...
R统计绘图 | 物种组成冲积图(绝对/相对丰度，ggalluvial)

R统计绘图 | 物种组成冲积图(绝对/相对丰度，ggalluvial)

一、数据准备 数据使用的不同处理土壤样品的微生物组成数据&#xff0c;包含物种丰度&#xff0c;分类单元和样本分组数据。此数据为虚构&#xff0c;可用于练习&#xff0c;请不要作他用。 # 1.1 设置工作路径 #knitr::opts_knit$set(root.dir"D:\\EnvStat\\PCA")#…
阅读更多...
A/B 测试成为企业“新窗口”：增长盈利告别经验主义，数据科学才是未来

A/B 测试成为企业“新窗口”：增长盈利告别经验主义，数据科学才是未来

更多技术交流、求职机会&#xff0c;欢迎关注字节跳动数据平台微信公众号&#xff0c;回复【1】进入官方交流群 如何能够预知一个产品的未来&#xff1f;最好的办法当然是穿越到未来看一看。 这种“模拟未来、窥探底牌”的设想似乎只是一种天方夜谭。尤其在数字化浪潮冲击下&a…
阅读更多...
磨金石教育摄影技能干货分享｜杨元惺佳作欣赏——诗意人文

磨金石教育摄影技能干货分享｜杨元惺佳作欣赏——诗意人文

一般来说&#xff0c;人文摄影总会体现现实性多些。但杨老师是个摄影诗人&#xff0c;他的内心总能将刻板的现实融入美好的光芒。你在他的照片里&#xff0c;看着现实的摄影素材&#xff0c;所感受到的是诗意的绵绵未尽。春网&#xff08;中国&#xff09;正所谓春水碧于天&…
阅读更多...
Word控件Spire.Doc 【Table】教程(19)：在 C# 中的 Word 中添加/获取表格的替代文本

Word控件Spire.Doc 【Table】教程(19)：在 C# 中的 Word 中添加/获取表格的替代文本

Spire.Doc for .NET是一款专门对 Word 文档进行操作的 .NET 类库。在于帮助开发人员无需安装 Microsoft Word情况下&#xff0c;轻松快捷高效地创建、编辑、转换和打印 Microsoft Word 文档。拥有近10年专业开发经验Spire系列办公文档开发工具&#xff0c;专注于创建、编辑、转…
阅读更多...
7、STM32 FSMC驱动SRAM

7、STM32 FSMC驱动SRAM

本次使用CubeMx配置FSMC驱动SRAM,XM8A51216 IS62WV51216 原理图&#xff1a; 注意&#xff1a;FSMC_A0必须对应外部设备A0引脚 一、FSMC和FMC区别 FSMC&#xff1a;灵活的静态存储控制器 FMC:灵活存储控制器 区别&#xff1a;FSMC只能驱动静态存储控制器&#xff08;如&…
阅读更多...
软考中级有用吗

软考中级有用吗

当然有用了&#xff01; 软考“简历”&#xff1a;计算机软件资格考试在全国范围内已经实施了二十多年&#xff0c;近十年来,考试规模持续增长&#xff0c;截止目前,累计报考人数约有五百万人。该考试由于其权威性和严肃性&#xff0c;得到了社会各界及用人单位的广泛认同&…
阅读更多...
哈希函数的学习算法整理

哈希函数的学习算法整理

前言 如果你对这篇文章可感兴趣&#xff0c;可以点击「【访客必读 - 指引页】一文囊括主页内所有高质量博客」&#xff0c;查看完整博客分类与对应链接。 概述 哈希函数学习的两个步骤&#xff1a; 转为二进制编码&#xff1a;可以先降维成实数&#xff0c;再转为二进制&…
阅读更多...
【Spark分布式内存计算框架——离线综合实战】4. IP 工具类

【Spark分布式内存计算框架——离线综合实战】4. IP 工具类

2.2 IP 工具类 需要将IP地址代码封装到工具类中&#xff0c;方便后续使用&#xff0c;在包【cn.itcast.spark.utils】创建工具类&#xff1a;IpUtils.scala&#xff0c;定义方法【convertIpToRegion】&#xff0c;传递参数【ip地址和DbSearch对象】&#xff0c;返回Region对象…
阅读更多...
数据结构－树的理解

数据结构－树的理解

目录 一&#xff1a;要解决的问题&#xff0c;出发点 1.演进 树的定义&#xff1a; 树的深度&#xff08;高度&#xff09; 平衡二叉树&#xff08;AVL树&#xff09; 红黑树&#xff1a; B树&#xff1a; 深夜有感&#xff0c;灵感乍现&#xff0c;忽然感觉对这个数据结…
阅读更多...
Unity（二）--通过简单例子了解UGUI几个常用对象操作(Text，Image，Button)

Unity（二）--通过简单例子了解UGUI几个常用对象操作(Text，Image，Button)

目录 文本框等UI对象的添加Canvas 画布给Canvas添加脚本，绑定要操作的对象文本框Text的使用图像Image的使用更换图片Type:显示图片相关按钮Button的使用过渡导航事件绑定文本框等UI对象的添加 Canvas 画布 当创建一个UI元素的时候，如果没有Canvas 画布，就会自动创建一个画布…
阅读更多...
学习资料|SSH隧道端口转发功能详解

学习资料|SSH隧道端口转发功能详解

概念ssh隧道大致可以分为3种&#xff0c;分别为本地端口转发&#xff0c;远程端口转发&#xff0c;动态端口转发&#xff0c;本文将让你彻底搞懂这3个转发的命令表达形式&#xff0c;让你能够灵活运用解决生活中的各种特殊场景。如果你正在使用mobaxterm、xshell、secureCRT、p…
阅读更多...
怎样深度学习？主题碾压式学习法

怎样深度学习？主题碾压式学习法

怎样最深度的学习&#xff1f;【主题碾压式&#xff01;】 对一个学习主题&#xff0c;大体量投入学习资源 进行对比和实践 会取得突破 限定在社会科学和社会应用范围 趣讲大白话&#xff1a;大力出奇迹 【趣讲信息科技&#xff1a;84期&#xff0c;下期预告&#xff1a;很少有…
阅读更多...
C++条件变量唤醒问题 notify_one() 唤醒不及时问题

C++条件变量唤醒问题 notify_one() 唤醒不及时问题

条件变量唤醒问题 & notify_one() 唤醒不及时问题 因为我对于 C中条件变量的等待唤醒部分、notify_all & notify_one 的区别方面有些疑点&#xff0c;因此就有了以下的同 chatgpt 的沟通&#xff0c;希望同样能够帮助到大家 感叹于 chatgpt的强大 问题&#xff1f; 我比…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023