画布
canvas元素是H5新增的一个重要元素，专门用来绘制图形。在页面中放置一个canvas元素，就相当于在页面上放置一块画布，可以利用canvas api在其中进行图形的描绘。canvas只是一个容器，不具备绘制能力，需要我们编写js代码实现
矩形
绘制矩形的步骤：
1. 取得canvas对象
2. 取得2d上下文（context）
3. 设定绘图样式，使用图形上下文对象中的fillStyle填充样式 strokeStyle 边框样式
4. 指定线宽，使用图形上下文对象中的lineWidth
5. 绘制矩形，使用图形上下文对象的
代码实现：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><!--矩形:1. 取得canvas对象2. 取得2d上下文（context）3. 设定绘图样式，使用图形上下文对象中的fillStyle填充样式 strokeStyle 边框样式4. 指定线宽，使用图形上下文对象中的lineWidth5. 绘制矩形，使用图形上下文对象的 -->// canvas 画布宽高用heigh和width属性设置<canvas height="500" width="500" style="border: 1px solid #333;"></canvas><script>// 1.获取canvas对象var canvas = document.getElementsByTagName('canvas')[0]// 2.获取canvasd的2d上下文var context = canvas.getContext('2d');// 3.设置填充模式 填充/描边,当获取了2d上下文后，所有操作都要在context上进行context.fillStyle = 'red' //填充context.strokeStyle = 'blue' //描边// 4.设置线宽 描边时需要设置线宽context.lineWidth = '1'// 5.绘制矩形 (x坐标，y坐标，宽度，高度)// 填充矩形context.fillRect(20,20,100,100)// 描边矩形context.strokeRect(200,200,200,200)// 清除矩形// context.clearRect(20,20,30,30)</script></body></html>
圆形
绘制圆形的步骤：
取得canvas对象
取得2d上下文（context）
设定绘图样式，使用图形上下文对象中的fillStyle填充样式 strokeStyle 边框样式
指定线宽，使用图形上下文对象中的lineWidth
开始创建路径，context.beginPath()
设置路径context.arc(x, y, radius, startAngle, endAanle, direction),参数分别是：圆心x坐标，圆心y坐标，半径，开始角度，结束角度，绘制为逆时针，false为顺时针（默认） 派 =180度 派 = 3.1415弧度
角度到弧度的运算方式：Math.PI / 180 * startAngle
关闭路径context.closePath()
设定绘制样式，进行图形绘制fill() stroke() 重复绘制圆形
代码实现：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>画圆形</title></head><body><canvas height="500" width="500" style="border: 1px solid #333;"></canvas><script>// 1.获取canvas对象var canvas = document.getElementsByTagName('canvas')[0]// 2.获取canvasd的2d上下文var context = canvas.getContext('2d');// 3.设置填充模式 填充/描边context.fillStyle = 'red'context.strokeStyle = 'blue'// 4.设置线宽 描边时需要设置线宽context.lineWidth = '1'// 5.开始路径context.beginPath()// 6.设置路径///tags/canvas_arc.aspcontext.arc(200,200,50, Math.PI /180 * 0,Math.PI/180*360,)// 7.关闭路径context.closePath()// 8.绘制圆形context.fill() //填充圆形context.stroke()//描边圆形</script></body></html>
渐变色
绘制渐变的步骤：
取得canvas对象
获取2d上下文context
创建渐变对象，并添加渐变色
var gradient = context.createLinearGradient(xstart,ystart,xend,yend)
参数为：起始点x坐标，y坐标，结束点x坐标，y坐标。
gradient.addColorStop(number,'color')
gradient.addColorStop(number,'color')
number为偏移量，0～1之间
设置填充模式 context.fillStyle = gradient
绘制矩形 context.fillRect(x,y,宽，高)
代码实现
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>渐变色</title></head><body><canvas height="500" width="500" style="border: 1px solid #333;"></canvas><script>// 1.获取canvas对象var canvas = document.getElementsByTagName('canvas')[0]// 2.获取canvasd的2d上下文var context = canvas.getContext('2d');// 3.创建渐变对象 并添加渐变色var gradient = context.createLinearGradient(100,100,300,300)gradient.addColorStop(0,'#fff')gradient.addColorStop(1,'#000')// 4.设置填充模式context.fillStyle = gradient// 5.绘制 矩形context.fillRect(100,100,200,200)</script></body></html>
图片
绘制渐变的步骤：
取得canvas对象
获取2d上下文context
var context = canvas.getContext('2d')
创建图像对象
var image = new Image()
Image.src = './photo.jpg'
在图片加载完毕后绘制图片，绘制图像
image.onload = function(){
context.drawImage(image，x，y) 参数：图像，绘制位置的x坐标，y坐标
context.drawImage(image，x，y，w，h) 参数：图像，绘制位置的x坐标，y坐标 ，宽，高
}
可以设置平铺模式
var pattern = context.createPattern(image,'repeat')
将平铺对象复制给填充模式
context.fillStyle = pattern
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>图片</title></head><body><canvas height="500" width="500" style="border: 1px solid #333;"></canvas><script>// 1.获取canvas对象var canvas = document.getElementsByTagName('canvas')[0]// 2.获取canvasd的2d上下文var context = canvas.getContext('2d');// 3.创建图片对象 并导入图片var image = new Image()image.src = './photo.png'// 4.调用绘制图片的方法 image.onload = function(){// 绘制图片// context.drawImage(image,0,0)// 创建平铺对象 并设置平铺模式 var pattern = context.createPattern(image,'repeat')context.fillStyle = patterncontext.fillRect(0,0,500,500)}</script></body></html>
文字
绘制矩形的步骤：
1. 取得canvas对象2. 取得2d上下文（context）
3. 设定绘图样式 fillStyle填充样式 strokeStyle 边框样式
4. 指定线宽 lineWidth
5. 设置文字和对齐方式
6. 绘制文字
代码实现：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>文字</title></head><body><canvas height="500" width="500" style="border: 1px solid #333;"></canvas><script>// 1.获取canvas对象var canvas = document.getElementsByTagName('canvas')[0]// 2.获取canvasd的2d上下文var context = canvas.getContext('2d');// 3.设置填充模式 填充/描边context.fillStyle = 'red'context.strokeStyle = 'blue'// 4.设置线宽 描边时需要设置线宽context.lineWidth = '1'// 5.设置文字context.font = '40px sans-serif'context.textAlign = 'center'// 6.绘制文字context.fillText('hello canvas', 200,100) //填充文字context.strokeText('hello canvas', 200,200) //描边文字</script></body></html>
