canvas元素的学习笔记

发表于 | 分类于 | 本文总阅读量 次

什么是 canvas

HTML5 新增了 canvas 元素，专门用来绘制图形，在页面上放置一个 canvas 元素，相当于在页面上放置一块”画布”，画布是一个矩形区域，你可以在其中进行图形的绘制。canvas 元素放在 html 页面中，跟其他标签没太大区别。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

创建 canvas 元素

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Canvas~</title>
</head>
<body>
	<canvas id="mycanvas" width="200" height="200"></canvas>
</body>
</html

canvas 需指定 ID、width、height 三个属性值

绘制矩形

canvas 本身是没有绘制能力的，需要通过 JavaScript 来进行绘制。
用 canvas 元素绘制图形时，步骤如下

  • 取得 canvas 元素（创建 canvas 元素）
1
var canvas = document.getElementById('mycanvas')
  • 取得上下文对象
1
var context = canvas.getContext('2d')

利用 canvas 对象的 getContext 方法来获得图形上下文，将参数设为“2d”,不能够设置为 3d 或 4d。

getContext(“2d”) 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

  • 设定绘图样式
1
2
context.fillStyle = 'AAA' //填充的样式,填入填充的颜色值
context.strokeStyle = 'FF0000' //图形边框的样式,填入边框的颜色值
  • 绘制图形
1
2
context.fillRect(0, 0, 50, 50) // 填充矩形
context.strokeRect(0, 0, 50, 50) //绘制矩形边框

x 指矩形起点的横坐标，y 指矩形起点的纵坐标，width 指矩形的长度，height 指矩形的高度

1
context.clearRect(x,y,width,height)

clearRect ，该方法可以擦除指定的矩形区域的图形，使得该区域中的颜色全部变为透明。

设定绘图样式必须在绘制图形之前，如果在绘制图形之后的话，绘图样式会使用默认值，而不是我们设定的那个值

1
2
3
context.fillRect(0, 0, 50, 50)
context.fillStyle('FF0000')
//最终图形显示的填充颜色值是默认的黑色而不是我们设定的红色（#FF0000）

使用路径

绘制圆形

  1. 开始创建路径
  2. 创建圆形路径
  3. 路径创建完成后，关闭路径
  4. 设定绘制样式，调用绘制方法，绘制路径
1
2
3
4
5
6
7
8
9
var canvas = document.getElmentById('mycanvas')
var context = canvas.getContext('2d')

context.beginPath() //创建路径
context.arc(50, 50, 50, 0, Math.PI * 2, true) //创建圆形路径
context.closePath() //关闭路径
context.fillStyle = 'rgba(100,100,100,0.2)' //填充样式，给定颜色值
context.strokeStyle = '#000' //绘制图形边框样式，给定颜色值
context.fill() //因为路径已经确定了图形的大小，所以不用再使用参数去指定图形的大小,也可以使用stroke 方法

如果没有关闭路径，创建的路径会永远保留着，如果进行多次绘制，则创建的图形会一次又一次地进行重叠。

1
2
3
4
5
6
7
8
9
10
var canvas = document.getElementById('mycanvas')
var context = canvas.getContext('2d')

context.fillStyle = '#EEEEFF'
context.fillRect(0, 0, 500, 500)
for (var i = 0; i < 10; i++) {
  context.arc(i * 25, i * 25, i * 10, 0, Math.PI * 2, true)
  context.fillStyle = 'rgba(100,100,100,0.2)'
  context.fill()
}

如图

绘制直线

  1. moveTo (x,y) 将光标移动到指定坐标点，绘制直线的时候以这个坐标点为起点
  2. lineTo (x,y) 以 moveTo 方法设定的点为起点，到自己的参数中指定的点之间绘制一条直线 x 表示直线终点的横坐标，y 表示终点纵坐标
1
2
3
4
5
6
7
8
var canvas = document.getElementById('mycanvas')
var context = canvas.getContext('2d')
context.beginPath()
context.moveTo(20, 20)
context, lineTo(50, 100)
context.lineWidth = 3 //设置直线的宽度   ps：需要在stroke前面调用
context.stokeStyle = '#FF0000'
context.stroke() //绘制直线

绘制渐变图形

绘制线性渐变

使用图形上下文的 createLinearGradient 方法
context.createLinearGradient(xStart, yStart, xEnd, yEnd);
然后再使用 LinearGradient 对象的 addColorStop 方法
addColorStop(offset, color);
offset 为设定的颜色离开渐变起始点的偏移量，范围为 0~1

1
2
3
var g1 = context.createLinearGradient(0, 0, 200, 200);
g1.addColorStop(0,"#FF0000"）;  //起点偏移量为0，颜色为红色
g1.addColorStop(1,"#FFF"); //终点偏移量为1，颜色为白色

绘制径向渐变

使用图形上下文的 createRadiaGradient 方法
context.createLinearGradient(xStart, yStart, radiusStart, xEnd, yEnd, radiusEnd);
xStart 为渐变开始圆的圆心横坐标，yStart 为圆心纵坐标
同理 xEnd，yEnd 为渐变结束圆的圆心横纵坐标。
radiusStart 为渐变开始圆的半径，radiusEnd 为渐变结束圆的半径

1
2
3
4
5
6
7
8
var canvas = document.getElementById('mycanvas')
var context = canvas.getContext('2d')
var g2 = context.createRadialGradient(40, 40, 50, 500, 500, 300)
g2.addColorStop(0, 'blue')
g2.addColorStop(0.8, 'red')
g2.addColorStop(1, 'rgba(100,100,105,0.5)')
context.fillStyle = g2
context.fillRect(0, 0, 500, 500)

绘制变形图形

坐标变换

  • 平移 context.translate(x,y);
  • 扩大 context.scale(x,y) x 为水平方向扩大的放大倍数，y 是垂直方向的放大倍数
  • 旋转 context.rotate(angle); angle 是指旋转的角度
    利用这个坐标变换我们可以做很多好玩的图形。
1
2
3
4
5
6
7
8
9
10
11
12
13
var canvas = document.getElementById('mycanvas')
var context = canvas.getContext('2d')

context.fillStyle = '#888'
context.fillRect(0, 0, 500, 500)
context.translate(250, 100)
context.fillStyle = 'rgba(255,0,0,0.25)'
for (var i = 0; i < 60; i++) {
  context.translate(25, 25)
  context.scale(0.93, 0.95)
  context.rotate(Math.PI / 10)
  context.fillRect(0, 0, 150, 40)
}

未完待续…