关于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)/