关于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相关文档

关于Canvas 常用API汇总相关推荐

c、c++ 常用API汇总
前言本文汇总c.cpp里常用API,会持续更新,便于查阅. C语言部分参考:C语言基础知识整理 <string.h> 传入此类函数的指针必须是以空字符为结尾的. char *strch ...
python-kafka 常用 api 汇总
简介 python连接kafka的标准库,kafka-python和pykafka.kafka-python使用的人多是比较成熟的库,kafka-python并没有zk的支持.pykafka是Sams ...
工作、生活免费常用API汇总
free-api: https://www.free-api.com/ 短信验证码:可用于登录.注册.找回密码.支付认证等等应用场景.支持三大运营商,3秒可达,99.99%到达率,支持大容量高并发. ...
jquery的常用API汇总
1.$.contains()方法定义与用法:$.contains() 方法用于判断指定元素内是否包含另一个元素.即判断另一个DOM元素是否是指定DOM元素的后代.语法: $.contains( co ...
C#:字符串的常用API汇总
目录一:字符串声明二:字符串的使用 1,转义字符 ' / ' 2,"@"符号 3,字符串分割 4,截取字符串 5,替换字符串 6,将字符串转大写和小写 7,移除当前字符串的前后 ...
JavaScript一些常用 API整理汇总
JavaScript一些常用 API整理汇总 Array new Set() 数组去重 const arr = [3,4,4,5,4,6,5,7]; console.log(new Set(arr)) ...
带你快速玩转canvas（8）非常用API的说明集
10. API简单说明解释: 1. 写这个的目的只是熟悉API的功能,因此不会去像上面那样写DEMO和一一验证: 2. 只写API和API的功能,具体请参照MDN: 3. 或许存在兼容性问题,用的时 ...
【大数据分析必备】超全国内常用API接口汇总
下面列举了100多个国内常用API接口,并按照笔记.出行.词典.电商.地图.电影.即时通讯.开发者网站.快递查询.旅游.社交.视频.天气.团队协作.图片与图像处理.外卖.消息推送.音乐.云.语义识别 ...
Selenium Web 自动化 - Selenium常用API
Selenium Web 自动化 - Selenium常用API 2016-08-01 目录 1 对浏览器操作 1.1 用webdriver打开一个浏览器 1.2 最大化浏览器&关闭浏 ...
Bitmap详解(上)常用概念和常用API
前言: 图片的操作我相信大家都操作过,在算法层面大家往往都是把图片转成MAT矩阵处理的,而Android 开发层面大多数都是bitmap位图操作.接下来我将分算法层面以及android层面来讲解一下图 ...

关于Canvas 常用API汇总

Canvas是什么

Canvas的使用场景

基本使用方法

canvas绘制图形的方式：

关于样式的相关设置

填充描边

图像和像素（重点）

文本

状态

渐变

变形

阴影

透明度和层级

图案相关

位置检测

关于Canvas 常用API汇总相关推荐

最新文章

热门文章