学习canvas

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 当前路径绘制边框

文字的绘制

ctx.font = ‘100px 宋体’;//大小字体
ctx.fillStyle = ‘rgba(255, 255, 255)’;//颜色
ctx.fillText(‘前端同学’, 0,0, 500);// 500 可选。允许的最大文本宽度，以像素计。

补充

拐角类型
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();// 恢复

canvas.toDataURL(type,range) //canvas对象转换为Blob对象
canvas.toBlob(callback, type, range); //canvas对象转换为base64位编码；

callback: 因为canvas 如何转为 blob是一个异步操作，所以需要一个回调函数，参数就是 blob对象。
type指定转换为base64编码后图片的格式，如：image/png、image/jpeg、image/webp等等，默认为image/png格式；
range用于设置转换为base64编码后图片的质量，取值范围为0-1，超出取值范围用默认值0.92代替；

需要注意的是，当绘制下载一个比较大的图片时，浏览器就会提示下载失败。使用dataURL进行下载会有大小限制，可以使用 blob 进行下载。