介绍SVG是构建XML树的方式来达到绘制图形的，canvas是通过调用相关的方法来绘制图形的。区别：SVG绘制图形，通过移除或者更改DOM方式来而使用canvas需要把图片从新擦除。绘制的API在绘制上下文中定义。而不在画布中定义。需要获得上下文对象的时候，需要调用画布的getContext方法，获得绘画的上下文。画布元素和上下文，属于两个不同的对象，其中画布元素为canvas画布，而上下文对象为绘制需要的上下文。关于3D图形，即，webGL 为封装了基本的OPENGL，当调用webGL的时候，其浏览器会调用OpenGL相关的API绘制圆<!DOCTYPE html><html lang=“zh_CN” xmlns=“http://www.w3.org/1999/html"><head> <meta charset=“UTF-8”> <title>Title</title></head><body><div>第一个园</br> <canvas id=“square” width=“10” height=“100”> </canvas></div><div> 第二个园 <canvas id=“circle” width=“10” height=“10”> </canvas></div><script src=”./js/index.js" charset=“UTF-8”></script></body></html>// 获取画布元素let canvas = document.getElementById(“square”);// 获取绘制2D元素上下文let context = canvas.getContext(“2d”);// 设置填充颜色为红色context.fillStyle = “#f00”;// 填充一个正方形context.fillRect(10,0,10,10);绘制线段，填充多边形// 获取画布元素let canvas = document.getElementById(“square”);// 获取绘制2D元素上下文let context = canvas.getContext(“2d”);// 开始一条路径context.beginPath();// 从100,100 开始定义一条新的子路径context.moveTo(100,100);// 从100 100 到 200 200 绘制一条线段context.lineTo(200,200);// 从200 200 到 100 200 绘制一条线段context.lineTo(100,200);// 从100 200 到 100 100 绘制一条路径context.lineTo(100,100);// 绘制边context.stroke();// 进行填充context.fill();绘制多边形以五边形为例子，var canvas = document.getElementById(“square”);var context = canvas.getContext(“2d”);// 绘制一个以100,100为中心，半径为20的柜子N变形，每个定点均匀分布在圆角上，第一个定点放置在最上下// 偏转角度为0// 开始定义一条子路径context.moveTo(100 + 20 * Math.sin(0), 100 - 20 * Math.cos(0));// 计算两个顶点之间夹角// 其中2为一个园，除以边数，得到需要旋转的角度var delta = 2 * Math.PI/5;console.log(delta);// 循环剩余每个顶点var angle = 0;for(var i = 1; i < 5; i++){ // 角度累加 angle += delta; // 通过旋转绘制下一个顶点，不断的旋转绘制 context.lineTo(100 + 20 * Math.sin(angle), 100 - 20Math.cos(angle));}// 最后一个顶点和起点进行连接context.closePath();// 从新开始一条新路径context.stroke();context.fill();同理，画圆var canvas = document.getElementById(“square”);var context = canvas.getContext(“2d”);// 绘制一个以100,100为中心，半径为20的柜子N变形，每个定点均匀分布在圆角上，第一个定点放置在最上下// 偏转角度为0// 开始定义一条子路径context.moveTo(100 + 20 * Math.sin(0), 100 - 20 * Math.cos(0));// 计算两个顶点之间夹角// 其中2为一个园，除以边数，得到需要旋转的角度var delta = 2 * Math.PI/500000;console.log(delta);// 循环剩余每个顶点var angle = 0;for(var i = 1; i < 500000; i++){ // 角度累加 angle += delta; // 通过旋转绘制下一个顶点，不断的旋转绘制 context.lineTo(100 + 20 * Math.sin(angle), 100 - 20Math.cos(angle));}// 最后一个顶点和起点进行连接context.closePath();// 从新开始一条新路径context.stroke();context.fill();非零绕数原则要检测一个点p是否在路径内部，使用非零绕数原则，即，一条从点p出发沿着任意方向无限延伸，或者一直延伸到路径所在的区域外某点的射线，现在从0开始初始化一个计数器，对穿过这条射线的路径进行枚举，每当一条路径顺时针方向穿过射线的时候，计数器加1，逆时针减1，最后，枚举完所有路径以后，如果计时器的值不是0，那么就认为p在路径内，反过来，计数器的值为0，p在路径外。js根据非零绕数原则确定那个在路径内，那个在路径外，用于进行填充。图形属性可以通过设置画布上下文的fillStyle等属性，设置图形的属性，例如对画布上下文的fillStyle的属性进行设置，即，可以设置出填充时的颜色，渐变，图案等样式。对于canvas来说，每次获取上下文对象的时候，都会返回同一个上下文对象，即，上下文对象为单例的。还可以使用save方法，把当前的状态，压入已经保存的栈中，调用restore方法，把状态进行恢复，即弹栈。画布尺寸坐标画布的默认的坐标系为左上角的坐标原点(0,0)，右边数值大，下数值大，使用浮点数指定坐标，但不会自动转换为整数，会用反锯齿的方式，模拟填充部分元素。画布尺寸不能随意改变，对任意属性进行操作，都会清空整个画布。坐标系变换每一个点的坐标都会映射到css像素上，css像素会映射到一个或多个设备像素。画布中的特定操作，属性使用默认坐标系。画布还有当前变换矩阵。画布还有当前变换矩阵，当前变换矩阵作为图形状态的一部分。矩阵定义了当前画布的坐标系。画布的操作会把该点映射到当前的坐标系中。坐标变换当调用c.translate(dx,dy)方法的时候，会进行如下变换translate会进行坐标的上下移动x’ = x + dy;y’ = y + dy;缩放如要进行缩放，进行的是如下的变换x’ = sx * x;y’ = sy * y;进行旋转操作，进行的是如下变换x’ = x * cos(a) - y * sin(a);y’ = y * cos(a) - x * sin(a);如果要先变换再伸缩，进行如下变换需要先把现有坐标系映射成为坐标系中的点x’， y’ 然后再变换到x‘’ ， y‘’x’’ = sxx + dx;y’’ = syy + dy;如果变换顺序相反进行如下变换x’’ = sx*(x + dx);y’’ = sy*(y + dy);这种变换称为仿射变换，并且仿射变换会修改点的距离和线段间的夹角。对于平行线来说，仿射变换也会保持平行。仿射变换用6个参数描述成为如下表述x’ = ax + cy + e;y’ = bx + dy + f;通过传入参数实现仿射变换对于坐标变换来说，除非进行刷新，否则，已经绘制的图形，不会进行消失，所有的变换，都不能对已经绘制的图形进行更改。栗子如下var canvas = document.getElementById(“square”);var context = canvas.getContext(“2d”);// 通过坐标变换实现科赫雪花// 开始一条路径context.beginPath();// 开始绘制子路径context.moveTo(100,100);// 继续绘制context.lineTo(200,200);// 继续绘制context.lineTo(200,200);// 进行绘制边context.stroke();context.translate(200,200);// 开始一条路径context.beginPath();// 开始绘制子路径context.moveTo(100,100);// 继续绘制context.lineTo(200,200);// 继续绘制context.lineTo(200,200);// 进行绘制边context.stroke();已经绘制的图形不会进行改变，改变的是已经绘制的图形科赫雪花var canvas = document.getElementById(“square”);var context = canvas.getContext(“2d”);// 通过坐标变换实现科赫雪花// 当前状态入栈function leg(n) { // 保存状态 context.save(); // 递归画 if(n == 0){ context.lineTo(50, 0); }else{ // 定义为v字型 context.scale(1/2,1/2); // 递归第一条 context.rotate(60 * (Math.PI / 180)); leg(n - 1); context.rotate(-120 * (Math.PI / 180)); leg(n - 1); } // 坐标恢复变换 context.restore(); // 恢复下一个坐标为0,0 context.translate(50, 0);}context.save();context.moveTo(50, 50);// 绘制第一条leg(1);context.stroke();绘制填充曲线绘制一些常见的图形var canvas = document.getElementById(“square”);var context = canvas.getContext(“2d”);// 工具函数，角度转弧度function rads(x) { return Math.PI * x / 180;}// 绘制园context.beginPath();context.arc(100,100,40, 0, rads(360), false);context.stroke();context.fill();同理绘制贝塞尔曲线也是同理。颜色，透明度，渐变，图案绘制一个渐变需要使用createLinearGradient获取一个进行渐变的上下文，对这个上下文进行处理。然后其颜色设置为这个渐变的上下文，即，fillStyle属性。线段绘制封顶对于线段，有三种封顶方式，即，butt，square，round在绘制图形以后，会参数尖角，圆角，平角，三种。lineCap属性文本和css类似，基线问题。裁剪直接调动clip即可，当前路径也会被裁剪进入，路径外的统统不会显示。阴影设置shadow属性即可图片画布API支持位图图片，同时也支持canvas导出成为图片。// 创建一个img元素let img = document.createElement(“img”);// 设置src属性img.src = canvas.toDataURL();// 追加到文档后面document.body.appendChild(img);合成一些api不在阐述像素操作调用getImageDate方法返回ImageDate对象使用createImageDate()可以创建像素容器进行动态模糊先获取像素的ImageDate对象，然后再获取该对象的data属性，该data为一个数组。为一个维数组。每四个元素代表红色分量，绿色分量，蓝色分量，透明度分量。（Alpha分量）其色素直为0-1，即，数组元素中保存的数组为色素值。每四个每四个元素遍历。然后把其色素值的1/ n + 上一个色块的m/n 然后赋值给新的色块，代码如下// row为行数for(var row = 0; row < height; row++){ // 获得每行第二个元素的偏移量，其中width为行的色素块。 var i = row * width * 4; // 每4个的色素值进行处理 for(var col = 1; col < width; col++, i+=4){ // 对红色分量处理 data[i] = (data[i] + data[i - 4] * m) / n; // 对绿色分量处理 data[i + 1] = (data[i + 1] + data[i + 1 - 4] * m) / n; // 对蓝色分量处理 data[i + 2] = (data[i + 2] + data[i + 2 - 4] * m) / n; // 对透明度分量处理 data[i + 3] = (data[i + 3] + data[i + 3 - 4] * m) / n; }}然后把其色素块进行复制回去即可。其中每个像素占据一个字节，一个四个字节。命中检测isPointInPath方法用来确定一个点是否落在当前路径中。即命中检测。命中检测可以和鼠标事件相互转化但是坐标需要进行转换。
Canvas
February 11, 2019 · 3 min · jiezi