Javascript 如何在html画布上绘制人字形图案 我必须在画布上画人字形图案并用图像填充

有人请帮助我，我是画布二维绘图新手。 我需要画十字图案的混合瓷砖（人字形）

var canvas=this.\uu canvas=newfabric.canvas（'canvas'）；
var canvas_objects=canvas._objects；
//创建一个带有填充和不同颜色笔划的矩形
左向量=150；
var-top=150；
var x=20；
变量y=40；
var rect=new fabric.rect({
左:左,，
顶:顶,，
宽度：x，
身高：y，
角度：45，
填写：'rgba（255127,39,1）'，
中风：“rgba（34177,76,1）”，
冲程宽度：0，
原文：'对'，
原文：'top'，
中心旋转：false
});
canvas.add（rect）；
对于（var i=0；iTrippy disco地板）
要获得图案，您需要为每一行绘制一个水平平铺的矩形，左或右各一个空间，垂直矩形也是如此

矩形的宽度为高度的2倍

画图案很简单

旋转也很容易，更难的是找到在哪里绘制旋转的瓷砖

为此，我创建了一个旋转的逆矩阵（它反转旋转）。然后，我将该旋转应用于画布的4个角
0,0
，
宽度，0
宽度，高度和
0，高度
，这在旋转的空间中为我提供了位于画布边缘的4个点

当我从左到右从上到下绘制瓷砖时，我找到左上角的最小角点，右下角的最大角点，将其展开一点，这样我就不会错过任何像素，并使用旋转设置的变换绘制瓷砖

因为我无法确定你想要的角度，所以函数将以任何角度绘制它。On为动画，另一个为顺时针60度

警告演示包含闪烁的内容。
更新闪烁的方式很简单，因此做了一些更改，现在颜色是更令人愉悦的混合色，具有固定的绝对位置，并将瓷砖原点绑定到鼠标位置，单击鼠标按钮也会循环一些尺寸


const ctx=canvas.getContext（“2d”）；
常量颜色=[]
对于（设i=0；i<1；i+=1/80）{
颜色.push（`hsl（${Math.floor（i*360）}，${Math.floor（（Math.sin（i*Math.PI*4）+1）*50）}%，${Math.floor（Math.sin（i*Math.PI*8）*25+50）}`）
}
常数大小=[0.04,0.08,0.1,0.2]；
var currentSize=0；
const origin={x:canvas.width/2，y:canvas.height/2}；
var size=Math.min（canvas.width*0.2，canvas.height*0.2）；
功能绘图模式（尺寸、原点、ang）{
const xAx=Math.cos（ang）；//定义xAx的方向
const xAy=Math.sin（ang）；
setTransform（1,0,0,1,0,0）；
clearRect（0,0，canvas.width，canvas.height）；
setTransform（xAx，xAy，-xAy，xAx，origin.x，origin.y）；
函数getExtent（xAx、xAy、origin）{
常数im=[1,0,0,1]；//逆矩阵
常数点=xAx*xAx+xAy*xAy；
im[0]=xAx/点；
im[1]=-xAy/点；
im[2]=xAy/dot；
im[3]=xAx/dot；
常数toWorld=（x，y）=>{
变量点={}；
var xx=x-原点.x；
var yy=y-原点.y；
点x=xx*im[0]+yy*im[2]；
点y=xx*im[1]+yy*im[3]；
返回点；
}
返回[
toWorld（0,0），
toWorld（画布宽度，0），
toWorld（画布.宽度，画布.高度），
toWorld（0，画布高度），
]
}
const corners=getExtent（xAx、xAy、原点）；
var startX=Math.min（角点[0].x，角点[1].x，角点[2].x，角点[3].x）；
var endX=Math.max（角点[0].x，角点[1].x，角点[2].x，角点[3].x）；
var startY=Math.min（角点[0].y，角点[1].y，角点[2].y，角点[3].y）；
var endY=Math.max（角点[0].y，角点[1].y，角点[2].y，角点[3].y）；
startX=数学地板（startX/尺寸）-2；
endX=数学楼层（endX/尺寸）+2；
startY=数学地板（startY/尺寸）-2；
endY=数学楼层（endY/尺寸）+2；
//画图案
ctx.lineWidth=尺寸*0.1；
ctx.lineJoin=“圆形”；
ctx.strokeStyle=“黑色”；
var指数=0；
用于（变量y=startY；y Trippy disco地板
要获得图案，您需要为每一行绘制一个水平平铺的矩形，左或右各一个空间，垂直矩形也是如此

矩形的宽度为高度的2倍

画图案很简单

旋转也很容易，更难的是找到在哪里绘制旋转的瓷砖

为此，我创建了一个旋转的逆矩阵（它反转旋转）。然后，我将该旋转应用于画布的4个角
0,0
，
宽度，0
宽度，高度和
0，高度
，这在旋转的空间中为我提供了位于画布边缘的4个点

当我从左到右从上到下绘制瓷砖时，我找到左上角的最小角点，右下角的最大角点，将其展开一点，这样我就不会错过任何像素，并使用旋转设置的变换绘制瓷砖

因为我无法确定你想要的角度，所以函数将以任何角度绘制它。On为动画，另一个为顺时针60度

警告演示包含闪烁的内容。
更新闪烁的方式很简单，因此做了一些更改，现在颜色是更令人愉悦的混合色，具有固定的绝对位置，并将瓷砖原点绑定到鼠标位置，单击鼠标按钮也会循环一些尺寸


const ctx=canvas.getContext（“2d”）；
常量颜色=[]
对于（设i=0；i<1；i+=1/80）{
颜色.push（`hsl（${Math.floor（i*360）}，${Math.floor（（Math.sin（i*Math.PI*4）+1）*50）}%，${Math.floor（Math.sin（i*Math.PI*8）*25+50）}`）
}
常数大小=[0.04,0.08,0
  var canvas = this.__canvas = new fabric.Canvas('canvas');
  var canvas_objects = canvas._objects;
// create a rectangle with a fill and a different color stroke
var left = 150;
var top = 150;
var x=20;
var y=40;

var rect = new fabric.Rect({
   left: left,
   top: top,
   width: x,
   height: y,
   angle:45,
   fill: 'rgba(255,127,39,1)',
   stroke: 'rgba(34,177,76,1)',
   strokeWidth:0,
    originX:'right',
        originY:'top',
        centeredRotation: false
});
canvas.add(rect);
for(var i=0;i<15;i++){
    var rectangle = fabric.util.object.clone(getLastobject());
 if(i%2==0){
    rectangle.left = rectangle.oCoords.tr.x;
    rectangle.top = rectangle.oCoords.tr.y;
    rectangle.originX='right';
        rectangle.originY='top';
    rectangle.angle =-45;
  }else{
        
      fabric.log('rectangle: ', rectangle.toJSON());
            rectangle.left = rectangle.oCoords.tl.x;
      rectangle.top = rectangle.oCoords.tl.y;
      fabric.log('rectangle: ', rectangle.toJSON());
        rectangle.originX='left';
            rectangle.originY='top';
        rectangle.angle =45;
      
  }
  //rectangle.angle -90;
  canvas.add(rectangle);
}
fabric.log('rectangle: ', canvas.toJSON());
canvas.renderAll();    


function getLastobject(){
    var last = null;
    if(canvas_objects.length !== 0){
        last = canvas_objects[canvas_objects.length -1]; //Get last object   
    }    
  return last;
}

h = sqrt(a^2 + a^2)
  = sqrt(2 * a^2)
  = sqrt(2) * a