드로잉 캔버스 끝 부분에 포인팅 화살표 만들기

거북이 그래픽을 사용하여 자바 스크립트 프로그램을 만들었습니다. 각 드로잉 끝 부분에 포인팅 삼각형 (또는 모든 모양)을 배치하는 방법을 알고 싶습니다. 어느 쪽이 그림을 지향 할 수 있습니다. 여기 예를 들어드로잉 캔버스 끝 부분에 포인팅 화살표 만들기

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=utf-8 /> 
<title>HTML5 canvas turtle graphics</title> 
<style> 
    article, aside, figure, footer, header, hgroup, 
    menu, nav, section { display: block; } 
    canvas {border: 1px dotted #564b47;} 
</style> 
</head> 
<body> 

<h1>HTML5 canvas turtle graphics</h1> 

<canvas id="myDrawing" width="600" height="300"></canvas> 

<script type="text/javascript"> 

"use strict"; 
// JavaScript statements 
// ===================================================================================== 
var color = { 
    black: "#ffffff", 
    red: "#ff0000", 
    green: "#00ff00", 
    blue: "#0000ff", 
    yellow: "#ffff00", 
    fuchsia: "#ff00ff", 
    aqua: "#00ffff" 
}; 

var turtle = { 
    x: 0, 
    y: 0, 
    angleInRadians: 0, 
    penDown: false, 
    penColor: "#000000", 
    lineWidth: 2 
}; 

var canvas = document.getElementById('myDrawing'); 

if (canvas && canvas.getContext) { // does the browser support 'canvas'? 
    turtle.ct = canvas.getContext("2d"); // get drawing context 
} else { 
    alert('You need a browser which supports the HTML5 canvas!'); 
} 

// ===================================================================================== 


turtle.logPenStatus = function() { 
    console.log('x=' + this.x + "; y=" + this.y + '; angle = ' + this.angle + '; penDown = ' + this.penDown); 
}; 


turtle.forward = function (length) { 
    // console.log('forward(' + length + ')'); 
    // this.logPenStatus(); 
    var x0 = this.x, 
     y0 = this.y; 
    this.x += length * Math.sin(this.angleInRadians); 
    this.y += length * Math.cos(this.angleInRadians); 
    if (this.ct) { 
     if (this.penDown) { 
      //this.logPenStatus(); 
      this.ct.beginPath(); 
      this.ct.lineWidth = this.lineWidth; 
      this.ct.strokeStyle = this.penColor; 
      this.ct.moveTo(x0, y0); 
      this.ct.lineTo(this.x, this.y); 
      this.ct.stroke(); 
     } 
    } else { 
     this.ct.moveTo(this.x, this.y); 
    } 
    return this; 
}; 

turtle.backward = function (length) { 
    this.forward(-length); 
    return this; 
}; 

turtle.left = function (angleInDegrees) { 
    // console.log('left(' + angleInDegrees + ')'); 
    // A complete circle, 360º, is equivalent to 2? radians 
    // angleInDegrees is an angle measure in degrees 
    this.angleInRadians += angleInDegrees * Math.PI/180.0; 
    return this; 
}; 

turtle.right = function (angleInDegrees) { 
    this.left(-angleInDegrees); 
    return this; 
}; 


turtle.angle = function() { 
    // the turtle status is hold in this.angleInRadians; 
    // degrees are often more convenient for the display 
    return this.angleInRadians * 180.0/Math.PI; 

};

당신이 화살표와 "거북이"의 라디안 각도를 원하는 X/Y를 알고 있다면, 당신은 다음과 같이 화살촉을 그릴 수

turtle.x = 50;  // the x-axis of the pen 
turtle.y = 100;  // the y-axis of the pen 
turtle.penDown = true; 
turtle.forward(50); 
    turtle.left(150); 
    turtle.forward(7); 
    turtle.backward(7); 
    turtle.right(150); 
    turtle.right(150); 






</script> 

</body> 
</html>

출처

2013-04-21 mike10101

간단한 도면이다 :

function drawArrowhead(x,y,radians){ 
    ctx.save(); 
    ctx.beginPath(); 
    ctx.translate(x,y); 
    ctx.rotate(radians); 
    ctx.moveTo(0,0); 
    ctx.lineTo(5,20); 
    ctx.lineTo(-5,20); 
    ctx.closePath(); 
    ctx.restore(); 
    ctx.fill(); 
}

화살촉의 끝을 x/y에 놓고 지정된 라디안 각도로 회전합니다.

화살촉의 정확한 배치 (끝점, 끝점 등)와 화살촉의 모양을 실험 할 수 있습니다.

출처

2013-04-22 00:48:53 markE

드로잉 캔버스 끝 부분에 포인팅 화살표 만들기

답변

관련 문제