캔버스를 사용하여 도로를 만들었습니다. 중간에 선을 추가하고 싶습니다. 또한 선 사이의 너비, 높이 및 간격도 이에 따라 증가해야합니다.
<canvas id="myCanvas" width="578" height="500"></canvas>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var j = 0;
for(var i = canvas.height*.30; i< canvas.height; i=i+20){
context.beginPath();
context.rect(canvas.width*.50, i-j, 3+j, 10+(j*2));
context.fillStyle = '#000000';
context.fill();
j++;
}
하지만 위의 코드로는 만들 수 없었습니다. 이 문제를 해결하도록 도와주세요. jsfiddle
업데이트 됨 : 다음 솔루션은 각 선의 기울기도 고려하므로 사각형을 그리지 않고 대신 다각형이 사용됩니다. 여기 바이올린 : https://jsfiddle.net/tcdLf0xu/4/
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.clearRect(0,0,canvas.width,canvas.height);
var j = 0;
var y = 0;
for(var j = 1; y < canvas.height; j++){
context.beginPath();
spacing = 2.5
w = j+1;
h = 4*w;
x = canvas.width*.50 - w/2;
y = y + spacing*h;
context.rect(x,y ,w,h );
context.moveTo(x,y);
context.lineTo(x+w,y);
context.lineTo(x+w+1/spacing,y+h);
context.lineTo(x-1/spacing,y+h);
context.lineTo(x,y);
context.closePath();
context.fillStyle = '#000000';
context.fill();
}
디자인을 개선하기 위해 각 변수가 수행하는 작업을 이해하는 것이 중요합니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다