关于canvas使用api汇总

什么是canvas

canvas是HTML5提供的一种新标签。

canvas 的意思是"画布"。画布是一个矩形区域，您可以控制其每一像素。

用于图形的绘制，也可用于创建图片特效和动画。通过脚本(JavaScipt)来完成。

canvas可以做什么

使用canvas可以绘制图形、图标、文字

基本使用

html

html 复制代码

<view>
		<canvas canvas-id="firstCanvas" id="firstCanvas"></canvas>
	</view>

javascript 复制代码

// uniapp
var context = uni.createCanvasContext('firstCanvas')
context.setStrokeStyle("#00ff00")
// js
const canvasBox=document.querySelector("#firstCanvas");//获取画布元素
const ctx=canvasBox.getContext(contextType)
context.setStrokeStyle("#00ff00")

canvas绘制图形的方式：

绘制矩形：

javascript 复制代码

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）

绘制直线：

javascript 复制代码

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

绘制曲线

javascript 复制代码

ctx.moveTo(x, y);//起始点
ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);//分别是第一个控制点的横纵坐标第二个控制点的横纵坐标和结束点的横纵坐标
ctx.stroke();//实际绘制路径

绘制二次贝塞尔曲线

javascript 复制代码

ctx.moveTo(x, y);//起始点
ctx.quadraticCurveTo(cpx, cpy, x, y);//分别是第一个控制点的横纵坐标和结束点的横纵坐标
ctx.stroke();//实际绘制路径

绘制圆弧

javascript 复制代码

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

绘制矩形

javascript 复制代码

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

椭圆绘制

javascript 复制代码

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

关于样式的相关设置

线条样式的设置

javascript 复制代码

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是浮点数

填充描边

javascript 复制代码

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

图像和像素（重点）

javascript 复制代码

//用法：
/*参数说明
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) //参数依次是要绘制图片，图片从那个坐标点开始绘制，绘制的面积的大小将绘制的图片，绘制在画布中位置以及绘制图片在画布中大小
     }

文本

javascript 复制代码

/*
参数说明：
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

状态

javascript 复制代码

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

渐变

javascript 复制代码

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

变形

javascript 复制代码

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

阴影

javascript 复制代码

ctx.shadowBlur = value;//阴影大小
ctx.shadowColor = color;//阴影颜色
ctx.shadowOffsetX = offset;//阴影水平偏移
ctx.shadowOffsetY = offset;//阴影垂直偏移

透明度和层级

javascript 复制代码

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;

图案相关

javascript 复制代码

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

位置检测

javascript 复制代码

/*
参数说明
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);//同上