2019-08-28 canvas

作者: 枫叶落尽 | 来源:发表于2019-08-29 16:08 被阅读0次

canvas和SVG的区别：
canvas使用它提供的方法来绘图，绘图API简洁。
SVG通过构建XML元素数绘图，对元素编辑方便，但语法复杂。

个人理解：差别就像使用OpenGl绘制一帧画面和使用HTML类似的感觉，一个提供API，一个是用一种语法体系来实现。

canvas的API大部分定义在 " 绘制上下文 " 对象上，提供getContext方法获取改对象。

首先，使用canvas绘制图形，必需指定在哪个canvas中绘制图形，然后，绘制图形的元素的width和height都必需显式指明~~（我猜在底层可能是用类似element.style.width类似的api来获取canvas高度与宽度的）~~（canvas的高宽是画布大小，css设置的高宽是屏显大小），否则canvas无法绘制，即在css的style中，设置元素的高度和宽度会影响元素的显示效果，但如果仅在此设置，则无法绘图。
比如，下面的例子：

黄色的是仅仅指定了width="30" height="30" 的效果，红色的所在的canvas被css指定为200px高、宽，可以看到，图形被放大了。我们可以得出结论，是绘制完成后进行的放大，因为图形较模糊。fillRect根据 width和height作为参考进行绘图，绘制完成后，图像被拉伸填充满css所指定的canvas区域。

绘制图像的流程为：
1、获取canvas元素
2、获取canvas元素的上下文对象（有两种，参数分别是2d和webgl）
3、设置参数（这个过程可以理解为画笔、路径准备阶段）
4、进行绘制（绘制的图形会在屏幕上显示出来）

点的坐标》一个CSS像素》一个或多个设备像素

CanvasRenderingContext2D.createLinearGradient
参数为两个点的坐标
在下图中，设置两个点分别为（0，0）（300，300）

var canvas = document.getElementById("canvas");
var c = canvas.getContext("2d");

var bgfade = c.createLinearGradient(0,0,300,300);
bgfade.addColorStop(0.0, "rgb(0,0,0)");
bgfade.addColorStop(1.0, "#fff"); 

c.fillStyle = bgfade; 
c.fillRect(0,0,300,300);`

可以看出，虚线所在位置的颜色是相同的，颜色的渐变方向是按照实线箭头的方向渐变的。

CanvasRenderingContext2D .createRadialGradient(x0,y0,r0,x1,y1,r1):

参数	描述
x0	渐变的开始圆的 x 坐标
y0	渐变的开始圆的 y 坐标
r0	开始圆的半径
x1	渐变的结束圆的 x 坐标
y1	渐变的结束圆的 y 坐标
r1	结束圆的半径

之后通过CanvasGradient.addColorStop来定义渐变色，其参数为位置（0~1）、颜色

在定义了CanvasGradient对象之后，渐变效果已经完成了，在每个位置的渐变色已经确定，之后调用fill或storke之类的方法，只是确定显示的范围。

fillRect 和 strokeRect
两者都是画一个矩形。
fillRect 是画一个填充矩形， strokeRect 是画一个描边矩形。
fillRect 使用fillStyle来填充矩形内部。
strokeRect 使用 strokeStyle来对矩形的边缘进行描色。
案例：

    var canvas = document.getElementById("canvas");
    var c = canvas.getContext("2d");

    c.fillStyle = "green"; // Start with the linear gradient
    c.fillRect(0,0,100,100); // Fill the entire canvas
    
    c.strokeStyle = "red";
    c.lineWidth = 20;
    c.strokeRect(110,110,100,100);