画布的目的是元素的顺序

canvas purpose of the order of elements

本文关键字：元素 顺序      更新时间：2023-09-26

查找画布并尝试一次。我画这样的东西只是为了方便。

var widthCanvas = 960;
var heightCanvas = 1910;
var widthWhiteLine = 250;                    
var startY = 0;
//shadow
ctx.shadowColor = '#111';
ctx.shadowBlur = 20;
  //right top stroke                    
ctx.beginPath();
ctx.lineWidth = widthWhiteLine;
ctx.shadowColor = '#111';
ctx.shadowBlur = 20;
ctx.strokeStyle = '#f2f2f2';
ctx.moveTo( 1920 + widthWhiteLine /1.5 , 0);
ctx.lineTo(widthCanvas - widthWhiteLine /1.6, widthCanvas + widthWhiteLine *1.4);                    
ctx.stroke();                  
//left top stroke 
ctx.beginPath();
ctx.lineWidth = widthWhiteLine;                    
ctx.strokeStyle = '#f2f2f2';
ctx.moveTo(-widthWhiteLine /1.4 , startY);
ctx.lineTo(widthCanvas + widthWhiteLine / 1.6, widthCanvas + widthWhiteLine *1.4);                    
ctx.stroke();
  //left bottom stroke 
ctx.beginPath();                    
ctx.lineWidth = widthWhiteLine;
ctx.strokeStyle = '#f2f2f2';
ctx.moveTo(-widthWhiteLine /1.4, heightCanvas);
ctx.lineTo(widthCanvas + widthWhiteLine / 1.6, widthCanvas - widthWhiteLine *1.4);                    
ctx.stroke();
ctx.closePath;
//right bottom stroke 
ctx.beginPath();                    
ctx.lineWidth = widthWhiteLine;
ctx.strokeStyle = '#f2f2f2';
ctx.moveTo(1920 + widthWhiteLine /1.4, heightCanvas);
ctx.lineTo(widthCanvas - widthWhiteLine /1.6 , widthCanvas - widthWhiteLine *1.4);                    
ctx.stroke();
ctx.closePath;

在绘制正确显示中间的交叉线后，我需要有一个元素，右顶部笔画已经高于右底部笔画，但不高于左顶部笔画。这可以用画布来完成吗?

您需要自己管理分层。最好的方法是将绘制例程放入函数中，然后按从下到上的顺序运行这些函数。我已经更新了你的小提琴，让你知道我在说什么。

// pseudo code
function drawSquare() {
  ...
}
function drawCircle() {
  ...
}
drawCircle();
drawSquare();
相关文章：