canvas详解

canvas

是 HTML5 提供的一种新标签

• Canvas 是一个矩形区域的画布，可以用 JavaScript 在上面绘画。控制其每一个像素。
• canvas 标签使用 JavaScript 在网页上绘制图像，本身不具备绘图功能。
• canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
• HTML5 之前的 web 页面只能用一些固定样式的标签：比如 p、div、h1 等

canvas 标签语法和属性

canvas：画布油布的意思

• 标签名 canvas，需要进行闭合。就是一普通的 html 标签。
• 可以设置 width 和 height 属性，但是属性值单位必须是 px，否则忽略。
• width 和 hegiht：默认 300*150 像素
  注意：
  • 不要用 CSS 控制它的宽和高,会走出图片拉伸，
  • 重新设置 canvas 标签的宽高属性会让画布擦除所有的内容。
  • 可以给 canvas 画布设置背景色

canvas 绘图上下文 context

• 上下文：是所有的绘制操作 api 的入口或者集合。
• Canvas 自身无法绘制任何内容。Canvas 的绘图是使用 JavaScript 操作的。
• Context 对象就是 JavaScript 操作 Canvas 的接口。
• 使用[CanvasElement].getContext(‘2d’)来获取 2D 绘图上下文。

var canvas = document.getElementById(''); //获得画布
var ctx = canvas.getContext('2d'); //注意：2d小写， 3d：webgl 

canvas 绘制的基本步骤：
第一步：获得上下文 =>canvasElem.getContext(‘2d’);
第二步：开始路径规划 =>ctx.beginPath()
第三步：移动起始点 =>ctx.moveTo(x, y)，x,y 都是相对于canvas盒子的最左上角。
第四步：绘制线(矩形、圆形、图片…) =>ctx.lineTo(x, y)，从x,y的位置绘制一条直线到起点或者上一个线头点
第五步：闭合路径 =>ctx.closePath();
第六步：绘制描边 =>ctx.stroke();

  const onCanvas = () => {
    const canvas = document.getElementById('cavsElem'); //获得画布
    const ctx = canvas.getContext('2d'); //注意：2d小写， 3d：webgl
    ctx.beginPath(); //开始路径
    ctx.moveTo(10, 10);  //移动起始点
    ctx.lineTo(100, 10);
    ctx.lineTo(100, 100);
    ctx.lineTo(10, 100);
    ctx.closePath();//结束路径
    ctx.stroke(); //描边路径
  };

快速创建矩形：rect()方法

• 语法：ctx.rect(x, y, width, height);
• 解释：x, y是矩形左上角坐标， width和height都是以像素计
• rect方法只是规划了矩形的路径，并没有填充和描边。

快速创建描边矩形和填充矩形：strokeRect()、fillRect()方法
语法：ctx.strokeRect(x, y, width, height);
语法：ctx.fillRect(x, y, width, height);

清除矩形(clearRect)
语法：ctx.clearRect(x, y, width, hegiht);
清除某个矩形内的绘制的内容，相当于橡皮擦。

绘制圆形（arc)

概述：arc() 方法创建弧/曲线（用于创建圆或部分圆）。

• 语法：ctx.arc(x,y,r,sAngle,eAngle,counterclockwise);
• 解释： x,y：圆心坐标。 r：半径大小。 sAngle:绘制开始的角度。 圆心到最右边点是 0 度，顺时针方向弧度增大。 eAngel:结束的角度，注意是弧度。counterclockwise：是否是逆时针。true 是逆时针，false：顺时针； 弧度和角度的转换公式： rad = deg*Math.PI/180;
• 在 Math 提供的方法中sin、cos 等都使用的弧度

绘制图片（drawImage）

基本绘制图片的方式：
context.drawImage(img,x,y);
参数说明： x,y 绘制图片左上角的坐标， img是绘制图片的dom对象。

在画布上绘制图像，并规定图像的宽度和高度：
context.drawImage(img,x,y,width,height);
参数说明：width 绘制图片的宽度， height：绘制图片的高度
如果指定宽高，最好成比例，不然图片会被拉伸
等比公式： toH = Height * toW / Width;
设置高 = 原高度 * 设置宽/ 原宽度;

图片裁剪，并在画布上定位被剪切的部分
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
参数说明：sx,sy 裁剪的左上角坐标， swidth：裁剪图片的高度， sheight:裁剪的高度