canvas 能够做什么？

基础图形的绘制
文字的绘制
图形的变形和图片的合成
图片和视频的处理
动画的实现
小游戏的制作

基础知识

canvas 的 width 和 height

canvas 默认样式的宽度和高度是 300px _ 150px，
需要注意的是，canvas 相当于是一张图片，如果我们设置 <canvas width="500" height="500">，这样写相当于图片的实际大小是 500 _ 500.
但是，假如我们这样去书写。<canvas style="width:500px;height:500px;"> 这样实际是把 canvas 默认的 300 _ 150 的图片强行拉伸为 500px _ 500px 了，所以这样会导致我们的内容被强行缩放，从而导致问题。

绘制的坐标轴

从 canvas 的左上角为起点，横轴向右是正，纵轴向下是正。

操作步骤

1、获取画布
var canvas = document.querySelector(“#canvas”);
2、获取上下文对象 CanvasRenderingContext2D，即画笔
var context = canvas.getContext(“2d”);
3、设置画布宽高不要通过 style 的方式设置，不然会强行拉伸
canvas.width = 400;
canvas.height = 400;

绘制直线

我们既然要画一条直线，我们是不是至少应该有这么几个条件呢？
1、线的起点 2、线的终点 3、线的颜色 4、线的宽度

beginPath() 开始定义路径
closePath() 1、关闭前面定义的路径 2、将当前绘制图形的最后一个点和我们绘制图形开始的点进行连接，
moveTo(float x,float y) 起点
lineTo(float x,float y) 连接到对应的点

fillStyle() 设置填充颜色
strokeStyle() 设置绘制颜色

lineWidth() 线的宽度

fill() 填充 canvas 当前路径
stroke() 填充 canvas 当前路径绘制边框

补充

拐角类型
lineJoin

miter 尖角 >
round 圆角 )
bevel 切角

API
fillRect(x, y, w, h),strokeRect(x, y, w, h)
x: 当前坐标系中的 x 点
y：当前坐标系中的 y 点
w: 矩形的宽
h: 矩形的高

arc(x, y, r, star, end, dir)
x: 圆弧所在的圆心的 x 点
y: 圆弧所在的圆心的 y 点
star: 圆弧起始位置
end: 圆弧结束的位置
dir: 方向 false: 顺时针 true: 逆时针
注：使用 fillRect，strokeRect 不用开启路径

ctx.drawImage(img, img_x, img_y, img_w, img_h, canvas_x, canvas_y , canvas_w, canvas_h )
img: 要绘制的图片
img_x: 要截取的图片的 x 点
img_y: 要截取的图片的 y 点
img_w: 要截取的图片的宽
img_h: 要截取的图片的高
canvas_x: 将截取后的图片放在 canvas 上的 x 点
canvas_y: 将截取后的图片放在 canvas 上的 y 点
canvas_w: 截取后的图片放在 canvas 上的宽
canvas_h : 截取后的图片放在 canvas 上的高

ctx.save();// 保存
ctx.restore();// 恢复