canvas2D 基础知识浅析

1.canvas

HTML5给出的一个可以展示绘图内容的标签

使用领域： (推荐网站：threejs.org)

1. 游戏 2. 可视化数据 3. Banner广告 4. 多媒体

（1）在 canvas 中使用各种方法描点实际上描述的是一个称为路径( path )的东西

（2）在 canvas 绘图中，所有描述的东西都是路径，只有最后填充或描边的时候才会显示出效果

（3）每一个路径都是一个状态

2.canvas标签的基本使用

① canvas标签默认占据300*150像素区域的页面空间

②设置canvas标签的宽高，必须使用行内样式，即属性设置宽高，不能使用css设置宽高，css设置的canvas画布大小，不会增加像素点，会将原有像素扩大，正确设置宽高的代码如下：

<canvas width="600" height="300"></canvas>

③ canvas 2d平面绘图工具语法: getContext(‘2d’) 坐标原点在左上角

对象是CanvasRenderingContext2D类型

④ canvas 3d平面绘图工具语法：getContext(‘webgl’)

对象是WebGLRenderingContext类型

⑤非零环绕原则

如果需要判断某一个区域是否需要填充颜色，就从该区域中随机的选取一个点，从这个点拉一条直线出来, 一定要拉到图形的外面，此时以该点为圆心，看穿过拉出的直线的方向线段。如果是顺时针方向就记为 +1, 如果是逆时针方向,就记为 -1。最终看求和的结果，如果是 0 就不填充，如果是非零就填充。

如上图所示：1.区域填充（逆时针），2区域填充（逆时针，逆时针），3区域不填充（逆时针，顺时针）

⑥ canvas 2d平面基本绘图代码（画一条直线）：

canvas {

border: 1px solid red;

}

</style>

必须设置行内样式的宽高

var cas = document.getElementById("cas");

var cax = cas.getContext("2d");

cax.moveTo(200, 100);

cax.lineTo(400, 100);

cax.stroke();

3.canvas标签的2d平面画图属性

var cas = document.getElementById("cas");

var cax = cas.getContext("2d");

cax.moveTo(x,y) 设置绘图的起始点坐标为x，y

cax.lineTo(x,y) 从当前起始点位置，绘制直线点到坐标x，y

cax.stroke( ) 将绘制的点连起来，显示成图形

cax.fill( ) 将所有的点连接起来, 并构成一个封闭的图形结构如果所有的描点没有构成封闭结构, 也会将起点与终点连接起来, 构成一个闭合的图形, 并在里面填充颜色(默认黑色)

cax.closePath( ) 闭合路径方法，该方法会将最后一个描点与最开始的描点自动连接起来，与直接使用lineTo连接相比，如果在线较宽的情况下，不会在连接处出现锯齿现象

cax.moveTo(200, 100); cax.moveTo(200, 100);

cax.lineTo(400, 100); cax.lineTo(400, 100);

cax.lineTo(400, 250); cax.lineTo(400, 250);

cax.lineTo(200, 100); cax.closePath();

cax.beginPath( ) 开启一个新的路径，类似开启一个新的图层，回和原来的图层重合，但不会影响原来图层的结构样式，例如可以画两个不同颜色的封闭图形

cax.lineWidth = ‘10’ 设置线宽

cax.lineCap = value 设置线末端类型（线帽）

'butt' 表示两端使用方形结束（默认值）

'round' 表示两端使用圆角结束

'square' 表示突出的圆角结束

cax.lineJoin = value 设置相交线的拐点

'round' 使用圆角连接

'bevel' 使用平切连接

'miter' 使用直角转（默认值）

cax.setLineDash([10,5,5]) 设置虚线，使用数组描述实线与虚线的长度，10表示实线长度，5表示空白长度，5表示实线长度，接着10又表示空白长度，循环往复设置，如果传入空数组，画出实线

cax. getLineDash() 获得线段样式数组

cax.strokeStyle = ‘red’ 设置描边的颜色，可以使用rgba

cax.fillStyle = ‘red’ 设置填充的颜色，可以使用rgba

绘制矩形：

cax.rect(x,y,width,height) 描边不展现图形, 需要 stroke 或 fill才显示图形

cax.strokeRect(x,y,width,height) 显示只有边框的矩形

cax.fillRect(x,y,width,height) 显示填充的矩形

cax.clearRect(x,y,width,height) 清除矩形区域，功能类似橡皮擦

绘制圆：

cax.act( x, y, r, startAngle, endAngle, clockwise) 圆弧描边，需要与stroke，fill才显示图形 x，y为圆心坐标，startAngle为开始的角度，endAngle结束角度，角度以弧度的形式传递（Math.PI）为180度，clockwise为旋转方向两个参数”false”，”true”，默认为”false”，代表顺时针旋转，”true”代表逆时针旋转。

cax.arc(100, 100, 80, 0, -0.5*Math.PI,true); 逆时针旋转

cax.arc(100, 100, 80,0, -0.5*Math.PI,false); 顺时针旋转

cax.arc(300, 100, 80, (1/6)*Math.PI , 0.5*Math.PI); 默认值，顺时针旋转

绘制多段圆弧会自动用直线连接前一个圆弧的终点和后一个圆的起点，后一个圆相当于lineTo

cax.arc(100, 100, 80, 0,-0.5*Math.PI,false);

cax.arc(200, 100, 80, (1/6)*Math.PI,0.5*Math.PI);

cax.stroke();

只需在绘制第二个圆弧前加上beginPath()即可，消除相连直线

cax.arc(100, 100, 80, 0,-0.5*Math.PI,false);

cax.stroke();

cax.beginPath();

cax.arc(200, 100, 80, (1/6)*Math.PI,0.5*Math.PI);

　 cax.stroke();

绘制简单扇形代码：

cax.arc(200, 100, 80, (1/6)*Math.PI,(2/3)*Math.PI);

cax.lineTo(200,100); 用直线画向圆心

cax.fill();

绘制相切圆弧：

cax. arcTo( x1, y1, x2, y2, radius )

x1，y1为起始点坐标；x2，y2为终点坐标；radius为圆弧半径，是数值

cax.moveTo(100, 100);

cax.lineTo(400, 100);

cax.moveTo(420, 120);

cax.lineTo(420, 200);

cax.moveTo(400, 100); 画笔落点

cax.arcTo(420, 100, 420, 120, 20);

cax.stroke();

绘制文字：

cax.fillText(words, x, y ) words为文字内容，x，y为文本开始左下角坐标，实心文本

cax.strokeText(words, x, y ) words为文字内容，x，y为文本开始左下角坐标，空心文本，描边文字

cax.font = “30px 微软雅黑” 设置文字样式，使用方法和css类似

cax.textAlign = “left” 设置文本水平对齐方式可以取值：left坐标点在文本框左边，center坐标点在文本框中间，right坐标点在文本框右边，start等价于left, end等价于right

cax.textBaseline= “top” 设置文本垂直对齐方式可以取值：top，middle，bottom上中下对齐；hanging悬挂对齐，类似top, ideographics类似bottom, alphabetic基线对齐，这三个对齐方式主要应用于英文

cax.measureText( words ) 获取传入文字(words)在字体设置下的宽度对象

绘制图片：

cax.drawImage(img , x , y , width , height ) 将img绘制到画布的指定矩形区域中，img为new Image()对象，x，y为图片左上角在画布上的坐标，width，height为绘制图片的宽高，由于图片加载需要时间，这段代码需要写在img.onload下

cax.drawImage(img , imgx , imgy , imgwidth , imgheight , x , y , width , height ) 指定img中的矩形区域，绘制到画布的指定矩形区域中，imgx，imgy为指定img中矩形区域的左上角相对于图片左上角(0,0)的坐标，imgwidth，imgheight为img中指定区域宽高，x，y为图片左上角在画布上的坐标，width，height为绘制图片的宽高，也需要在onload下进行，

示例代码如下： img分辨率1024*576

var img = new Image();

img.src = "images/instance.jpg";

cax.drawImage(img, 50, 50, 200, 100); 绘制完整的图形

cax.drawImage(img, 500, 300, 300, 150, 50, 50, 200, 100); 绘制指定区域

绘制坐标系变换：

cax.translate(x,y) 平移变换，x方向和y方向平移坐标系

cax.rotate((1/6)*Math.PI) 旋转变换，传入参数为弧度制

cax.scale(0.5 , 1) 伸缩变换，表示将x轴压缩一倍，y轴不变

状态栈，保持与恢复：

cax.save(); 保持状态

cax.restore(); 提取状态，提取最近一次save的状态，

最好在执行代码之前save，执行完之后restore，让这两个方法成对出现，可以使这段执行代码的状态不传递给后续执行的代码

将canvas传入canvas之中：

var cas = document.getElementById( 'cas' );

var cax = cas.getContext( '2d' );

var canvas = document.createElement( 'canvas' );

canvas.width = 100;

canvas.height = 100;

canvas.getContext( '2d' ).fillStyle = 'red';

canvas.getContext( '2d' ).fillRect( 0, 0, 100, 100 );

cax.drawImage( canvas, 100, 100 );

4.图形框架KonvaJS（完全面向对象的框架）

参考官网，官方文档

推荐:百度开发的图形框架ECharts