Question

寻找画布并在案例中尝试一次。我画了这样的东西jsfiddle。

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;

在正确显示中间的十字准线后，我需要有一个右上冲程元素高于右下冲程但不高于左顶冲程。这可以使用画布来完成吗？

Answer 1

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

// pseudo code

function drawSquare() {
  ...
}
function drawCircle() {
  ...
}

drawCircle();
drawSquare();

元素顺序的画布目的

1 个答案: