캔버스의 원호 종점에있는 드로잉 이미지

캔의 원호 끝 부분에 이미지 아이콘을 넣으려고했습니다. 호의 시작점과 끝점 모두에 있습니다. 그러나 그렇게 할 수는 없습니다.캔버스의 원호 종점에있는 드로잉 이미지

내 JS 코드 :

var coord=getPoint(x, y, radius, endAngle); 
var img = new Image(); 
img.src = 'http://dailydropcap.com/images/D-6.jpg'; 
context.drawImage(img, coord.x, coord.y,'20px','20px'); 
context.stroke();

내 js fiddle

출처

2014-01-20 stefun

당신이 같이 당신의 호의에있는 모든 각도에서 XY를 얻을 수 있습니다 :

function xyOnArc(cx,cy,radius,radianAngle){ 
    var x=cx+radius*Math.cos(radianAngle); 
    var y=cy+radius*Math.sin(radianAngle); 
    return({x:x,y:y}); 
}

데모 : http://jsfiddle.net/m1erickson/C4Y3V/

enter image description here

,515,

여기서 코드 예이다 :

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> 
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 

<style> 
    body{ background-color: ivory; } 
    #canvas{border:1px solid red;} 
</style> 

<script> 
$(function(){ 

    var canvas=document.getElementById("canvas"); 
    var ctx=canvas.getContext("2d"); 

    var cx=100; 
    var cy=100; 
    var radius=40; 
    var startAngle=Math.PI/2; 
    var endAngle=Math.PI*2; 

    ctx.beginPath(); 
    ctx.arc(cx,cy,radius,startAngle,endAngle); 
    ctx.stroke(); 

    var start=xyOnArc(cx,cy,radius,startAngle); 
    ctx.fillStyle="blue"; 
    ctx.fillRect(start.x,start.y,20,20); 

    var end=xyOnArc(cx,cy,radius,endAngle); 
    ctx.fillStyle="green"; 
    ctx.fillRect(end.x,end.y,20,20); 

    function xyOnArc(cx,cy,radius,radianAngle){ 
     var x=cx+radius*Math.cos(radianAngle); 
     var y=cy+radius*Math.sin(radianAngle); 
     return({x:x,y:y}); 
    } 

}); // end $(function(){}); 
</script> 

</head> 

<body> 
    <canvas id="canvas" width=300 height=300></canvas> 
</body> 
</html>

[추 이미지 로딩 시간 제공 방법] 또한 동일한 좌표를 제공

var img = new Image(); 
img.onload=function(){ 
    // img is now fully loaded 
    // do your drawImage inside this onload function 
    ctx.drawImage(img,x,y); 
} 
img.src = 'http://dailydropcap.com/images/D-6.jpg';

출처

2014-01-20 20:59:34 markE

내 참고 GetPoint() 함수. 이제 그 지점에 이미지를 표시하고 싶습니다. 나는 drawImage() 함수를 사용했다. 하지만 이미지가 표시되지 않습니다 – stefun

drawImage 기능에서 놓친 부분이 있습니까? – stefun

예. drawImage에서 이미지를 사용하기 전에 이미지로드 시간을 지정해야합니다. 이미지를로드하기 전에 drawImage를 기다리는 방법을 보여주는 답변을 게시하고 추가했습니다. 또한 크기 인수는 20px가 아닌 20이어야합니다. – markE

캔버스의 원호 종점에있는 드로잉 이미지

답변

관련 문제