canvas入门

基础绘图

1、首先在HTML中写入canvas标签

<canvas width="600" height="600" id="canvas"></canvas>

2、在js中添加以下代码进行初始化

const canvas = document.getElementById('canvas')
const con = canvas.getContext('2d')

3、线条绘制/图形

const canvas = document.getElementById('canvas')
const con = canvas.getContext('2d')
con.moveTo(100, 100) // 起点
con.lineTo(300, 300) // 终点
con.lineTo(200, 300) // 终点
// 如果是绘制线条，则用stroke结束,如图1
con.stroke()
// 如果是绘制图形，则用fill结束,如图2
con.fill()

3、给线条、图形进行填充颜色

const canvas = document.getElementById('canvas')
const con = canvas.getContext('2d')

con.strokeStyle = 'red' // 线条颜色
con.lineWidth = 10 // 线条宽度
con.fillStyle = 'green' // 填充颜色

con.moveTo(100, 100) // 起点
con.lineTo(300, 300) // 终点
con.lineTo(200, 300) // 终点
con.stroke() // 线条
con.fill() // 图形

4、线性渐变和径向渐变

const canvas = document.getElementById('canvas')
const con = canvas.getContext('2d')

// 线性渐变
const gra = con.createLinearGradient(100,100,300,300)
// 100,100是渐变开始的点；300，300是渐变结束的点
gra.addColorStop(0, 'red') // 给渐变设置颜色
gra.addColorStop(.5, 'blue') // 给渐变设置颜色
gra.addColorStop(1, 'green') // 给渐变设置颜色
con.fillStyle = gra // 把渐变色赋值给图形
con.strokeStyle = gra // 把渐变色赋值给线条

con.moveTo(100, 100) // 起点
con.lineTo(300, 300) // 终点
con.lineTo(200, 300) // 终点
con.stroke() // 线条
con.fill() // 图形

// 径向渐变使用方式同上，只是参数不一样
const gra = con.createRadialGradient(200,200,0,200,200,100)
// 200,200，0是开始的点的坐标和半径；200,200,100是结束的点的坐标和半径

4、图形绘制：方形、正圆、椭圆、画弧线、（创建新路径）

const canvas = document.getElementById('canvas')
const con = canvas.getContext('2d')

con.fillStyle = 'green'

// rect方形
con.fillRect(0,0,100,100)
 // 参数一二：方形起点的 x、y 轴坐标。
 // 参数三四：方形终点的 x、y 轴坐标。

// arc圆形
 con.arc(200,50,50,0,Math.PI*2,false)
 con.fill()
 // 参数一二：圆形圆心的 x，y 轴坐标。
 // 参数三：圆形的半径。
 // 参数四：将要绘制的起始点角度，从 x 轴测量。
 // 参数五：将要绘制的结束点角度。
 // 参数六（可选）：Boolean 选项，如果为 true，逆时针方向绘制（逆时针），反之顺时针方向绘制。

//ellipse椭圆
 con.ellipse(400,50,100,50,0,0,Math.PI*2,false)
 con.fill()
 // 参数一：椭圆圆心的 x 轴坐标。
 // 参数二：椭圆圆心的 y 轴坐标。
 // 参数三：椭圆长轴的半径。
 // 参数四：椭圆短轴的半径。
 // 参数五：椭圆的顺时针旋转角度，以弧度表示 (非角度度数)。
 // 参数六：将要绘制的起始点角度，从 x 轴测量，以弧度表示 (非角度度数)。
 // 参数七：椭圆将要绘制的结束点角度，以弧度表示 (非角度度数)。
 // 参数八（可选）：Boolean 选项，如果为 true，逆时针方向绘制椭圆（逆时针），反之顺时针方向绘制。

// arcTo弧线
 con.beginPath() // 创建新路径
 con.moveTo(100,100) // 起点 1点
 con.arcTo(100,200,300,200,50) // 2点、3点、半径
 con.lineTo(300,200) 
 con.stroke()
 con.closePath() // 创建新路径
 // 注释如下图
 

5、背景图片

const canvas = document.getElementById('canvas')
const con = canvas.getContext('2d')

const m = require('./step.png')
const img = new Image()
img.src = m
img.onload = () => {
  const pat = con.createPattern(img, 'repeat') //repeat|repeat-x|repeat-y|no-repeat
  con.fillStyle = pat
  con.fillRect(0,0,600,600)
  // 描个边看起来更清晰
  con.strokeStyle = 'red'
  con.lineWidth = 2
  con.strokeRect(0,0,600,600)
}

6、图片

const canvas = document.getElementById('canvas')
const con = canvas.getContext('2d')

 const m = require('./step.png')
 const img = new Image()
 img.src = m
 img.onload = () => {
   con.drawImage(img,30,30,80,80,200,200,300,300)
	// 30,30 图片裁切开始的点（可省略）
	// 80,80 图片裁切结束的点（可省略）
	// 200,200 图片放置到画布左上角的点
	// 300,300 图片大小
 }

7、文本

const canvas = document.getElementById('canvas')
const con = canvas.getContext('2d')

con.textAlign = 'left'; // 水平对齐
// start：文本在路径或矩形的起始点对齐。
// end：文本在路径或矩形的结束点对齐。
// left：文本居中在路径或矩形的左侧。
// right：文本居中在路径或矩形的右侧。
// center：文本居中对齐。

// textAlign属性可以设置为start和end。这两个值表示文本相对于其方向的对齐方式，这个方向由direction属性确定。
// direction属性可以设置为以下值：
// ltr
// rtl
// 其中ltr表示从左到右的方向，rtl表示从右到左的方向。

con.textBaseline = 'middle'; // 垂直对齐
// top：文本基线在矩形的顶部。
// hanging：文本基线在字母的挂起部分。
// middle：文本基线在字母的中部。
// alphabetic：默认基线，通常是字母的底部。
// ideographic：文本基线是东亚语言字符的顶部。
// bottom：文本基线在矩形的底部。

con.font = '700 60px Arial'
con.fillStyle = 'red'
con.strokeStyle = 'green'
con.fillText('实心文字', 100, 100, 120) // (text,x,y,maxWidth) maxWidth可选。允许的最大文本宽度，以像素计

con.font = "italic 60px Arial" // 斜体
con.strokeText('描边文字', 100, 200) // (text,x,y,maxWidth) maxWidth可选。允许的最大文本宽度，以像素计

7、平移、旋转、缩放

const canvas = document.getElementById('canvas')
const con = canvas.getContext('2d')
// 创建矩形不做变换
con.save()
con.fillRect(0,0,100,100)
con.restore()

const width = 100
const height = 100
const x = 200
const y = 100
// 创建矩形平移
con.save()
con.fillStyle='red'
con.translate(x,y)
con.fillRect(0,0,100,100)
con.restore()
// 创建矩形旋转
con.save()
con.fillStyle='green'
con.translate(x + width / 2, y + height / 2)
con.rotate(Math.PI * 1 / 4)
con.fillRect(-width / 2,-height / 2, 100, 100)
con.restore()
// 创建矩形缩放
con.save()
con.fillStyle='pink'
con.translate(x + width / 2, y + height / 2)
con.scale(0.5,0.5)
con.fillRect(-width / 2,-height / 2, 100, 100)
con.restore()

常用方法

requestAnimationFrame() // 在浏览器下一次重绘之前执行,可以传入一个回调函数

con.save() // 用来保存canvas的状态
con.restore() // 用来恢复Canvas旋转、缩放等之后的状态，当和canvas.save( )一起使用时，恢复到canvas.save( )保存时的状态

setup %= 8 // 当大于8时将setup重置为0

con.clearRect(0,0,canvas.width,canvas.height) // 清除画布

con.beginPath() // 创建新路径开始
con.closePath() // 创建新路径结束

con.translate(x,y) // 平移至x,y
con.rotate(angle) // 旋转
con.scale(x,y) // 缩放