介绍

Canvas画布，用于图形的控制，通过脚本来绘制完成

创建一个画布

<canvas
  id="canvas"
  width="300"
  height="300"
  style="border: 1px solid #ddd"
></canvas>

初始化一个画布

绘制一个红色的矩形

<script>
  // 获取画布dom元素
  let canvasDom=document.getElementById('canvas')
  // 获取画布的上下文context对象
  let ctx=canvasDom.getContext('2d')
  // 设置填充色为红色
  ctx.fillStyle='#FF0000'
  // 绘制一个长200，宽150的矩形
  ctx.fillRect(0,0,200,150);
</script>

红色矩形

绘制一个圆

<script>
    // 获取画布dom元素
    let canvasDom = document.getElementById('canvas')
    // 获取画布的上下文context对象
    let ctx = canvasDom.getContext('2d')
    // 设置绘制的颜色为红色
    ctx.fillStyle = '#FF0000'
    // 路径开始
    ctx.beginPath()
    // 画坐标点x:100,y:100的位置画一个半径为40的圆
    ctx.arc(100, 100, 40, 0, 2 * Math.PI)
    // 填充
    ctx.fill()
</script>

绘制圆

画条直线

<script>
  // 获取画布dom元素
  let canvasDom = document.getElementById('canvas')
  // 获取画布的上下文context对象
  let ctx = canvasDom.getContext('2d')
  // 设置绘制颜色
  ctx.strokeStyle = '#FF0000'
  // 画线的起始位置
  ctx.moveTo(0, 0)
  // 画线的终点位置
  ctx.lineTo(200, 100)
  // 绘制
  ctx.stroke()
</script>

绘制直线

绘制文本

<script>
  // 获取画布dom元素
  let canvasDom = document.getElementById('canvas')
  // 获取画布的上下文context对象
  let ctx = canvasDom.getContext('2d')
  // 设置绘制颜色
  ctx.strokeStyle = '#FF0000'
  // 设置字体
  ctx.font = '30px Arial'
  // 在x:10,y:50的点上开始绘制
  ctx.strokeText('您好，Canvas', 10, 50)
  // 填充的话，用下面这个方法
  // ctx.fillText("Hello World",10,50);
</script>

绘制文本

绘制图片

<script>
  // 获取画布dom元素
  let canvasDom = document.getElementById('canvas')
  // 获取画布的上下文context对象
  let ctx = canvasDom.getContext('2d')
  // 获取图片
  let img = document.getElementById('img')
  // 在x:0,y:0的位置上绘制一个长200，宽100的图片
  ctx.drawImage(img, 0, 0, 200, 100)
</script>

绘制图片

觉得效果不错的请帮忙加个关注点个赞，每天分享前端实用开发技巧