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相干文档
发表回复