双端 Diff 算法原理解析及 snabbdom 简单实现

一、准备工作

• 先找个放猪的容器canvas,这里宽设置了1200，高设置了600

 当前浏览器不支持canvas元素 
1

• 然后获取它进行操作

const canvas = document.getElementById('canvas');
if(canvas.getContext) {
 // 获取绘图上下文
 var ctx = canvas.getContext('2d');
 //然后就可以咔咔咔咔进行操作了
} 
1
2
3
4
5
6

• 这里我顺便还设置了一下样式

 ctx.fillStyle = 'pink'; //填充的颜色为粉红色
 ctx.strokeStyle = "#f95a75"; //描线的颜色
 ctx.lineWidth = 4; //描线的厚度 
1
2
3

前面会详细一点，后面就阿巴阿巴了

二、吹风机头

• 这个我一直不知道要怎么处理比较好，最后调啊调啊，采用两个半圆加上一个椭圆完成
• 下面先绘制一个半圆* 每一次绘画前都要用ctx.beginPath()开启绘画，防止跟前面的藕断丝连* 画圆的操作：ctx.arc(x，y，radius，startAngle，endAngle，anticlockwise）* x,y为圆的圆心坐标* radius为半径* startAngle,endAngle 分别为圆弧或圆的开始位置，结束位置* anticlockwise是绘画方向，默认false为顺时针方向

 ctx.beginPath();
 ctx.arc(300, 200, 80, 0, Math.PI, false);
 ctx.fill(); 
1
2
3

• 右上角也是一个半圆，一样的操作

 ctx.beginPath();
 ctx.arc(310, 200, 70, 0 , Math.PI,true);
 ctx.fill(); 
1
2
3

• 左上角为一个椭圆* 椭圆操作：ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise)* x,y为椭圆圆心坐标* radiusx为椭圆的在x轴和y轴的半径* rotation：椭圆自身旋转的方向* startAngle,endAngle 分别为圆弧的开始位置，结束位置* anticlockwise是绘画方向，默认false为顺时针方向

 ctx.beginPath();
 ctx.ellipse(250, 160, 120, 60, Math.PI*0.1, 0, 2 * Math.PI);
 ctx.fill(); 
1
2
3