이미지가 포함 된 캔버스가 있습니다. 사용자가 x 축에만 선을 그리고 배경 이미지를 지우지 않고 그 위에 선을 그릴 수 있도록하고 싶습니다.
var lala = document.getElementById('demo');
var canvas = lala,
ctx = canvas.getContext('2d'),
img = new Image;
img.onload = start;
img.src = 'https://via.placeholder.com/300';
function start() {
ctx.drawImage(img, 0, 0, demo.width, demo.height);
}
function drawOnX() {
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id="demo" width=300 height=300></canvas>
<button onclick = "drawOnX();"> start drawing </button>그냥 사용 moveTo(x, y)하고 lineTo(x, y)다음 사용하는 경로를 정의하는 데 stroke()사용할 수있는, 그것을 그릴 lineWidth과 strokeStyle각각 두께와 라인의 스타일을 지정할 수 있습니다.
var lala = document.getElementById('demo');
var canvas = lala,
ctx = canvas.getContext('2d'),
img = new Image;
img.onload = start;
img.src = 'https://via.placeholder.com/300';
function start() {
ctx.drawImage(img, 0, 0, demo.width, demo.height);
}
function drawOnX() {
ctx.moveTo(0, 150);
ctx.lineTo(300, 150);
ctx.lineWidth = 3;
ctx.strokeStyle = "red";
ctx.stroke();
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id="demo" width=300 height=300></canvas>
<button onclick = "drawOnX();"> start drawing </button>을 (를) 호출하기 전에 복잡한 경로 나 모양 (예 : 별) 을 많이 호출 moveTo하고 lineTo그릴 수 있습니다 stroke.
또는 수평선에만 관심이있는 경우 선 fillRect(x, y, width, height)을 모방하기 위해 길고 작은 직사각형을 그리는 데 사용할 수 있습니다 (너비는 캔버스의 전체 너비가되고 높이는 선의 두께가 됨). fillStyle이 경우 다음과 같이 사각형의 스타일을 지정합니다.
var lala = document.getElementById('demo');
var canvas = lala,
ctx = canvas.getContext('2d'),
img = new Image;
img.onload = start;
img.src = 'https://via.placeholder.com/300';
function start() {
ctx.drawImage(img, 0, 0, demo.width, demo.height);
}
function drawOnX() {
ctx.fillStyle = "red";
ctx.fillRect(0, 149, 300, 2);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id="demo" width=300 height=300></canvas>
<button onclick = "drawOnX();"> start drawing </button>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다