HTML5 canvas arcTo() ·½·¨

ʵÀý

ÔÚ»­²¼ÉÏ´´½¨½éÓÚÁ½¸öÇÐÏßÖ®¼äµÄ»¡£º

Your browser does not support the HTML5 canvas tag.

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 »¡µÄ°ë¾¶
VUE