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:裁剪的高度