HTML5 canvas arcTo() ·½·¨
ʵÀý
ÔÚ»²¼ÉÏ´´½¨½éÓÚÁ½¸öÇÐÏßÖ®¼äµÄ»¡£º
JavaScript:
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.beginPath(); ctx.beginPath(); ctx.moveTo(20,20); // ´´½¨¿ªÊ¼µã ctx.lineTo(100,20); // ´´½¨Ë®Æ½Ïß ctx.arcTo(150,20,150,70,50); // ´´½¨»¡ ctx.lineTo(150,120); // ´´½¨´¹Ö±Ïß ctx.stroke(); // ½øÐлæÖÆ
ä¯ÀÀÆ÷Ö§³Ö
Internet Explorer 9¡¢Firefox¡¢Opera¡¢Chrome ÒÔ¼° Safari Ö§³Ö arcTo() ·½·¨¡£
×¢ÊÍ£ºInternet Explorer 8 »ò¸üÔçµÄä¯ÀÀÆ÷²»Ö§³Ö <canvas> ÔªËØ¡£
¶¨ÒåºÍÓ÷¨
arcTo() ·½·¨ÔÚ»²¼ÉÏ´´½¨½éÓÚÁ½¸öÇÐÏßÖ®¼äµÄ»¡/ÇúÏß¡£
Ìáʾ£ºÇëʹÓà stroke() ·½·¨ÔÚ»²¼ÉÏ»æÖÆÈ·ÇеĻ¡¡£
JavaScript Óï·¨£º
context.fillRect(x1,y1,x2,y2,r);
²ÎÊýÖµ
²ÎÊý | ÃèÊö |
---|---|
x1 | »¡µÄÆðµãµÄ x ×ø±ê |
y1 | »¡µÄÆðµãµÄ y ×ø±ê |
x2 | »¡µÄÖÕµãµÄ x ×ø±ê |
y2 | »¡µÄÖÕµãµÄ y ×ø±ê |
r | »¡µÄ°ë¾¶ |