介绍

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

创建一个画布

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

前端开发-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>

前端开发-Canvas入门红色矩形

绘制一个圆

<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>

前端开发-Canvas入门绘制圆

画条直线

<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>

前端开发-Canvas入门绘制直线

绘制文本

<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>

前端开发-Canvas入门绘制文本

绘制图片

<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>

前端开发-Canvas入门绘制图片

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