关于canvas:关于Canvas-API的学习

Canvas 是什么

Canvas 英文画布，是 HTML5 出的一个能够在下面绘制一系列图像的元素。

Canvas 的应用场景

能够用于动画、游戏画面、数据可视化、图片编辑以及实时视频解决等方面。

根本应用办法

在 HTML 文件中

<canvas id="canvasBox" width=""height=""></canvas>
<!--
注解:
 canvas 必须是闭合标签 </canvas> 不可省, 如果省略文档的其余内容将不会显示
只有两个属性 width 和 height 如果没用设置宽高默认宽 300 高 150

-->

在 JS 文件中

const canvasBox=document.querySelector("#canvasbox");// 获取画布元素
const ctx=canvasBox.getContext(contextType);
/* 获取渲染上下文（具备了绘制和解决展现内容的能力）contextType 参数有
2d：绘制 2d 图像（创立一个 CanvasRenderingContext2D 对象作为 2d 渲染的上下文）webgl（experimental-webgl）、webgl2：绘制 3d 图像（实验性）bitmaprenderer：把位图绘制在 canvas 上下文上（实验性）*/

canvas 绘制图形的形式：

第一通过矩形
例如绘制矩形：

fillRect(x,y,width,height)// 矩形的终点坐标（x,y）矩形的宽高（width,height）ctx.fillRect(0,0,300,150)// 绘制了一个终点坐标为（0,0）宽高别离为 300px,150px 的矩形
strokeRect(x,y,width,height)// 绘制一个矩形边框（x,y）终点坐标矩形长宽（width,height）ctx.strokeRect(0,0,300,150)// 绘制了一个终点坐标为（0,0）长宽别离为 300,150
clearRect(x,y,width,heihgt)// 革除指定矩形区域，让革除局部齐全通明。ctx.clearRect(x,y,width,heihgt) // 革除一个矩形边框（x,y）终点坐标革除矩形长宽（width,height）

第二通过门路
绘制直线

ctx.beginPath();// 开始绘制新的门路
ctx.moveTo(x,y)// 门路起始坐标
ctx.lineTo(x,y);// 绘制直线到指定坐标点
...
ctx.closePath()// 闭合门路
ctx.stroke();// 理论绘制门路

绘制曲线

ctx.moveTo(x, y);// 起始点
ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);// 别离是第一个控制点的横纵坐标第二个控制点的横纵坐标和完结点的横纵坐标
ctx.stroke();// 理论绘制门路

绘制二次贝塞尔曲线

ctx.moveTo(x, y);// 起始点
ctx.quadraticCurveTo(cpx, cpy, x, y);// 别离是第一个控制点的横纵坐标和完结点的横纵坐标
ctx.stroke();// 理论绘制门路

绘制圆弧

context.beginPath();// 开始绘制新的门路
ctx.arc(x, y, radius, startAngle, endAngle [, anticlockwise])// 圆弧圆心横纵坐标半径圆弧开始的角度圆弧完结的角度
context.stroke();// 理论绘制门路

绘制矩形

ctx.rect(x,y,width,height)// 矩形起始点的横纵坐标和宽高
context.stroke();// 理论绘制门路

椭圆绘制

ctx.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise)
// 椭圆弧对应的圆心横纵坐标椭圆弧的长短轴半径大小椭圆弧的旋转角度圆弧开始和完结的角度顺逆时针
context.stroke()// 理论绘制门路

对于款式的相干设置

线条款式的设置

ctx.lineWidth=number// 设置线条的宽度
ctx.lineCap=// 线头的款式别离 buzz（默认），round（圆弧）和 square（方头）ctx.lineJoin=//miter: 尖角 round：圆角 bevel：平角
ctx.miterLimit = value;//0-10// 设置尖角长度和 lineJoin 属性值是 miter 配合应用
ctx.getLineDash()// 获取以后线条的虚线数值一个偶数个数的数组
ctx.setLineDash()// 线条为虚线参数是个数组如果是 [] 实线
context.lineDashOffset=value// 虚线绘制的偏移间隔默认 0 是浮点数

填充描边

ctx.fillStyle=// 填充色彩 color gradient pattern
ctx.strokeStyle=// 边框色彩 color gradient pattern
ctx.stroke()// 绘制门路

图像和像素（重点）

// 用法：/* 参数阐明
image：图片资源
在画布上布局一片区
dx：规划区的横坐标
dy：规划区的纵坐标
dWidth：规划区的宽
dHeight：规划区的高
图片元素绘制在 Canvas 画布
sx：起始横坐标
sy：起始纵坐标
sWidth：图片元素从坐标点开始算，多大的宽度内容
sHeight：图片元素从坐标点开始算，多大的高度内容 */
context.drawImage(image, dx, dy);
context.drawImage(image, dx, dy, dWidth, dHeight);
context.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
// 例子
let image= new Image();   // 创立一个空元素
                image.src = Url; // 门路 
                image.onload = function(){// ctx.drawImage(image,0,0)   
                    ctx.drawImage(image,41,74,64,82,0,0,128,164) // 参数顺次是要绘制图片，图片从那个坐标点开始绘制，绘制的面积的大小将绘制的图片，绘制在画布中地位以及绘制图片在画布中大小
                }    

文本

/*
参数阐明：text 文本内容
x，y 文本在画布中的终点坐标地位
maxWidth 文本占据的最大宽度（强制压缩不换行）*/
ctx.fillText(text, x, y [, maxWidth]);// 绘制文本
ctx.strokeText(text, x, y [, maxWidth]);// 绘制文本边框
ctx.measureText(text)// 获取 TextMetrics 对象测量文本的宽
// 对于文本的款式
ctx.font=""// 设置文本字体大小
/*
vulue 文本对齐形式
left：左对齐
right：右对齐
center：居中对齐
start：起始方位对齐
end：完结方位对齐
*/
ctx.textAlign=value

状态

ctx.save()// 存储
context.restore();// 弹出存储状态

突变

/*
线性突变
x0,y0 突变起始点横纵坐标
x1,y1 突变完结点横纵坐标
*/
ctx.createLinearGradient(x0, y0, x1, y1);
/*
镜像突变
x0,y0 起始圆得圆心坐标
r0 起始圆半径
x1,y1 完结圆得圆心坐标
r1 完结圆半径
*/
ctx.createRadialGradient(x0, y0, r0, x1, y1, r1);

变形

ctx.rotate(angle)// 旋转单位是弧度
ctx.scale(x,y)// 缩放
ctx.translate(x,y)// 位移
ctx.transform(a,b,c,d,e,f)// 变形别离程度缩放程度斜切垂直斜切垂直缩放程度位移垂直位移
ctx.setTransform()// 同上区别执行会齐全重置已有的变换

暗影

ctx.shadowBlur = value;// 暗影大小
ctx.shadowColor = color;// 暗影色彩
ctx.shadowOffsetX = offset;// 暗影程度偏移
ctx.shadowOffsetY = offset;// 暗影垂直偏移

透明度和层级

ctx.globalAlpha = value;// 透明度 0 -1
/*
type 参数阐明:
source-over：间接笼罩在原有图层下面互相叠加（纯视觉笼罩）source-in：只显示互相叠加的区域（新内容为显示层，原内容是遮罩层）source-out：和 source-in 相同（重叠的地位是通明的）source-atop：重叠内容进行相似遮罩解决未重叠的失常显示
****destination-* 和 source-* 显示主体绝对 destination 以原图层为显示主体 sourc 以新图层为显示主体 ****
destination-over
destination-in
destination-out
destination-atop
lighter：混合模式
copy：只显示新内容
xor：相互重叠的区域是通明的
multiply：正片迭代
screen：滤色
overlay：叠加
darken：变暗
lighten：变亮
color-dodge：色彩减淡
color-burn：色彩加深
hard-light：强光
soft-light：柔光
difference：差别
exclusion：排除
hue：色调
saturation：饱和度
color：色值
luminosity：亮度 */
ctx.globalCompositeOperation = type;

图案相干

/*
imag：平铺的 CanvasImageSource 图像
repetition:
repeat 程度垂直平铺
 no-repeat 不平铺
 repeat- x 程度平铺
 repeat- y 垂直平铺
*/
ctx.createPattern(image, repetition)；

地位检测

/*
参数阐明
x,y 检测的点的横纵坐标
 fillRule 参数填充规定
nonzero：非零规定，此乃默认规定。evenodd：奇偶规定。*/
// 检测点是否在指定门路内
ctx.isPointInPath(x, y);// 返回值 true 和 false
ctx.isPointInPath(x, y, fillRule);// 返回值 true 和 false

/*
x,y 检测的点的横纵坐标
path 指 Path2D 对象 */
// 检测点是否在门路上
context.isPointInStroke(x, y);// 返回值 true 和 fasle
context.isPointInStroke(path, x, y);// 同上

以上就是 canvas 罕用的 api，更详尽的学习请查看 CanvasAPI 相干文档