canvas基础功能介绍

大家好,我是梅巴哥er。 最近在看一些html基础知识,刚看了canvas的相关知识,做个基础整理。如需了解更多内容,请移步cavas在MDN上的教程,可以学习更多更深入的知识。

本篇就以代码demo的形式,对基础功能进行罗列。


Canvas

就是一块画布。 用js在画布上画画的。

基础步骤:

<!-- 1,准备一个canvas标签,默认尺寸是宽300px,高150px -->
<canvas id="canvas" width="300px" height="150px"></canvas>
<script>
  // 2,获取canvas元素
  const canvas = document.getElementById('canvas')
  // 3,获取2d画布(这里先说2d的)
  const ctx = canvas.getContext('2d')
  // 4,给图像填色
  ctx.fillStyle = 'pink'
  // 5,规定图像的位置和宽高,即left top width height,单位是px
  ctx.fillRect(10, 10, 100, 100)
</script>

画一个矩形:

<!-- 1,准备一个canvas标签,默认尺寸是宽300px,高150px -->
<canvas id="canvas" width="300px" height="150px"></canvas>
<script>
  // 2,获取canvas元素
  const canvas = document.getElementById('canvas')
  // 3,获取2d画布
  const ctx = canvas.getContext('2d')
  // 填充一个黑色长方形
  ctx.fillRect(25, 25, 120, 100) 
  // 把里面清除掉,留出一个1px边框的长方形
  ctx.clearRect(26, 26, 118, 98)
</script>

画一个实心的三角形:

<!-- 1,准备一个canvas标签,默认尺寸是宽300px,高150px -->
<canvas id="canvas" width="300px" height="150px"></canvas>
<script>
  // 2,获取canvas元素
  const canvas = document.getElementById('canvas')
  // 3,获取2d画布
  const ctx = canvas.getContext('2d')
  // 开始
  ctx.beginPath()
  // 起点
  ctx.moveTo(20, 30)
  // 往这个点画
  ctx.lineTo(100, 50)
  // 往这个点画
  ctx.lineTo(50, 120)
  // 默认开启闭合路径 ctx.closePath(),即把另一条没画的线也默认连上,形成一个三角形
  // 填充成实心图像
  ctx.fill()
</script>

画一个空心三角形:

<!-- 1,准备一个canvas标签,默认尺寸是宽300px,高150px -->
<canvas id="canvas" width="300px" height="150px"></canvas>
<script>
  // 2,获取canvas元素
  const canvas = document.getElementById('canvas')
  // 3,获取2d画布
  const ctx = canvas.getContext('2d')
  // 开始
  ctx.beginPath()
  // 起点,相当于每次的起笔位置
  ctx.moveTo(20, 30)
  // 往这个点画
  ctx.lineTo(100, 50)
  // 往这个点画
  ctx.lineTo(50, 120)
  // stroke()情况下,不会默认闭合路径,所以这里要主动开启
  ctx.closePath()
  // 绘制线条
  ctx.stroke()

画一条直线:

<!-- 1,准备一个canvas标签,默认尺寸是宽300px,高150px -->
<canvas id="canvas" width="300px" height="150px"></canvas>
<script>
  // 2,获取canvas元素
  const canvas = document.getElementById('canvas')
  // 3,获取2d画布
  const ctx = canvas.getContext('2d')
  // 开始
  ctx.beginPath()
  // 起点
  ctx.moveTo(20, 30)
  // 往这个点画
  ctx.lineTo(100, 50)
  // 绘制线条
  ctx.stroke()
</script>

画空心圆:

<!-- 1,准备一个canvas标签,默认尺寸是宽300px,高150px -->
<canvas id="canvas" width="300px" height="150px"></canvas>
<script>
  // 2,获取canvas元素
  const canvas = document.getElementById('canvas')
  // 3,获取2d画布
  const ctx = canvas.getContext('2d')
  // 开始
  ctx.beginPath()
  // ctx.arc(x, y, r, s, e, a)
  // x, y定义圆点坐标
  // r表示半径,不用写单位
  // s表示开始弧度,沿着x正方向是0
  // e表示结束弧度
  // a表示顺时针还是逆时针。 默认是顺时针,也就是false
  // 弧度 = Math.PI * (角度 / 180)
  ctx.arc(100, 100, 50, 0, Math.PI * 2, true)
  // stroke()是绘制线条
  ctx.stroke()
</script>

画实心圆:

<!-- 1,准备一个canvas标签,默认尺寸是宽300px,高150px -->
<canvas id="canvas" width="300px" height="150px"></canvas>
<script>
  // 2,获取canvas元素
  const canvas = document.getElementById('canvas')
  // 3,获取2d画布
  const ctx = canvas.getContext('2d')
  // 开始
  ctx.beginPath()
  // ctx.arc(x, y, r, s, e, a)
  // x, y定义圆点坐标
  // r表示半径,不用写单位
  // s表示开始弧度,沿着x正方向是0
  // e表示结束弧度
  // a表示顺时针还是逆时针。 默认是顺时针,也就是false
  // 弧度 = Math.PI * (角度 / 180)
  ctx.arc(100, 100, 50, 0, Math.PI * 2, true)
  // fill()是闭合路径并填充成实心
  ctx.fill()
</script>

画一段逆时针圆弧:

<!-- 1,准备一个canvas标签,默认尺寸是宽300px,高150px -->
<canvas id="canvas" width="300px" height="150px"></canvas>
<script>
  // 2,获取canvas元素
  const canvas = document.getElementById('canvas')
  // 3,获取2d画布
  const ctx = canvas.getContext('2d')
  // 开始
  ctx.beginPath()
  // ctx.arc(x, y, r, s, e, a)
  // x, y定义圆点坐标
  // r表示半径,不用写单位
  // s表示开始弧度,沿着x正方向是0
  // e表示结束弧度
  // a表示顺时针还是逆时针。 默认是顺时针,也就是false
  // 弧度 = Math.PI * (角度 / 180)
  ctx.arc(100, 100, 50, Math.PI / 3, Math.PI, true)
  ctx.stroke()
</script>

画一段顺时针圆弧:

<!-- 1,准备一个canvas标签,默认尺寸是宽300px,高150px -->
<canvas id="canvas" width="300px" height="150px"></canvas>
<script>
  // 2,获取canvas元素
  const canvas = document.getElementById('canvas')
  // 3,获取2d画布
  const ctx = canvas.getContext('2d')
  // 开始
  ctx.beginPath()
  // ctx.arc(x, y, r, s, e, a)
  // x, y定义圆点坐标
  // r表示半径,不用写单位
  // s表示开始弧度,沿着x正方向是0
  // e表示结束弧度
  // a表示顺时针还是逆时针。 默认是顺时针,也就是false
  // 弧度 = Math.PI * (角度 / 180)
  ctx.arc(100, 100, 50, Math.PI / 3, Math.PI, false)
  ctx.stroke()
</script>

*注意:通过上面两个例子可以看出,结束点的弧度总是相对于x轴的正方向来算的。 和起始弧度无关。

给三角形设置线条颜色:

<!-- 1,准备一个canvas标签,默认尺寸是宽300px,高150px -->
<canvas id="canvas" width="300px" height="150px"></canvas>
<script>
  // 2,获取canvas元素
  const canvas = document.getElementById('canvas')
  // 3,获取2d画布
  const ctx = canvas.getContext('2d')
  // 设置默认颜色。 一旦设置,后续的颜色都将使用这个默认色。
  // 如果需要更改,则在后续再重新设置strokeStyle的值。
  ctx.strokeStyle = 'pink'
  // 开始
  ctx.beginPath()
  ctx.moveTo(20, 20)
  ctx.lineTo(40, 100)
  ctx.lineTo(100, 50)
  ctx.closePath()
  ctx.stroke()
  
</script>

给三角形设置填充颜色:

<!-- 1,准备一个canvas标签,默认尺寸是宽300px,高150px -->
<canvas id="canvas" width="300px" height="150px"></canvas>
<script>
  // 2,获取canvas元素
  const canvas = document.getElementById('canvas')
  // 3,获取2d画布
  const ctx = canvas.getContext('2d')
  // 设置默认颜色。 一旦设置,后续的颜色都将使用这个默认色。
  // 如果需要更改,则在后续再重新设置strokeStyle的值。
  ctx.fillStyle = 'pink'
  // 开始
  ctx.beginPath()
  ctx.moveTo(20, 20)
  ctx.lineTo(40, 100)
  ctx.lineTo(100, 50)
  ctx.fill()
</script>

填充文字:

<!-- 1,准备一个canvas标签,默认尺寸是宽300px,高150px -->
<canvas id="canvas" width="300px" height="150px"></canvas>
<script>
  // 2,获取canvas元素
  const canvas = document.getElementById('canvas')
  // 3,获取2d画布
  const ctx = canvas.getContext('2d')
  ctx.font = '48px serif'
  textAlign = 'center'
  // ctx.fillText(text, x, y)
  // text是文本内容
  // x, y是内容的定位坐标
  ctx.fillText('Hello world', 10, 50)
</script>

填充描边文字:

<!-- 1,准备一个canvas标签,默认尺寸是宽300px,高150px -->
<canvas id="canvas" width="300px" height="150px"></canvas>
<script>
  // 2,获取canvas元素
  const canvas = document.getElementById('canvas')
  // 3,获取2d画布
  const ctx = canvas.getContext('2d')
  ctx.font = '48px serif'
  textAlign = 'center'
  // ctx.fillText(text, x, y)
  // text是文本内容
  // x, y是内容的定位坐标
  ctx.strokeText('Hello world', 10, 50)
</script>

画布的保存

ctx.save() // 保存当前状态到栈中
ctx.restore() // 把之前的状态从栈中弹出,然后保存最新的状态

移动原点位置:

<!-- 1,准备一个canvas标签,默认尺寸是宽300px,高150px -->
<canvas id="canvas" width="300px" height="150px"></canvas>
<script>
  // 2,获取canvas元素
  const canvas = document.getElementById('canvas')
  
  // 3,获取2d画布
  const ctx = canvas.getContext('2d')
  // 把原点位置移动到新坐标
  ctx.translate(50, 50)
  ctx.font = '48px serif'
  textAlign = 'center'
  // ctx.fillText(text, x, y)
  // text是文本内容
  // x, y是内容的定位坐标
  ctx.strokeText('Hello world', 10, 50)
</script>

旋转

<!-- 1,准备一个canvas标签,默认尺寸是宽300px,高150px -->
<canvas id="canvas" width="300px" height="150px"></canvas>
<script>
  // 2,获取canvas元素
  const canvas = document.getElementById('canvas')
  
  // 3,获取2d画布
  const ctx = canvas.getContext('2d')
  // 默认以原点为圆心, 顺时针旋转60弧度
  ctx.rotate(Math.PI / 3)
  ctx.font = '48px serif'
  textAlign = 'center'
  // ctx.fillText(text, x, y)
  // text是文本内容
  // x, y是内容的定位坐标
  ctx.strokeText('Hello world', 10, 50)
</script>

缩放

<!-- 1,准备一个canvas标签,默认尺寸是宽300px,高150px -->
<canvas id="canvas" width="300px" height="150px"></canvas>
<script>
  // 2,获取canvas元素
  const canvas = document.getElementById('canvas')
  
  // 3,获取2d画布
  const ctx = canvas.getContext('2d')
  // ctx.scale(x, y)
  // x是沿着x轴方向缩放,y是沿着y轴方向缩放
  // x ,y 如果大于1, 就是放大, 如果小于1, 就是缩小
  ctx.scale(2, 3)
  ctx.font = '48px serif'
  textAlign = 'center'
  // ctx.fillText(text, x, y)
  // text是文本内容
  // x, y是内容的定位坐标
  ctx.strokeText('Hello world', 10, 50)
</script>

基本上就是这些基础功能了。

在MDN上讲解很详细,有兴趣可以去查看和学习更多知识。


以上。

你可能感兴趣的:(html,CSS)