HTML 5 canvas lineCap ÊôÐÔ
ʵÀý
»æÖÆÔ²ÐεĽáÊøÏßñ£º
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.lineCap="round";
ctx.moveTo(20,20);
ctx.lineTo(20,200);
ctx.stroke();
ä¯ÀÀÆ÷Ö§³Ö
Internet Explorer 9¡¢Firefox¡¢Opera¡¢Chrome ÒÔ¼° Safari Ö§³Ö lineCap ÊôÐÔ¡£
×¢ÊÍ£ºInternet Explorer 8 ÒÔ¼°¸üÔçµÄ°æ±¾²»Ö§³Ö <canvas> ÔªËØ¡£
¶¨ÒåºÍÓ÷¨
lineCap ÊôÐÔÉèÖûò·µ»ØÏßÌõÄ©¶ËÏßñµÄÑùʽ¡£
×¢ÊÍ£º"round" ºÍ "square" »áʹÏßÌõÂÔ΢±ä³¤¡£
ĬÈÏÖµ£º | butt |
---|---|
JavaScript Óï·¨£º | context.lineCap="butt|round|square"; |
ÊôÐÔÖµ
Öµ | ÃèÊö |
---|---|
butt | ĬÈÏ¡£ÏòÏßÌõµÄÿ¸öÄ©¶ËÌí¼ÓƽֱµÄ±ßÔµ¡£ |
round | ÏòÏßÌõµÄÿ¸öÄ©¶ËÌí¼ÓÔ²ÐÎÏßñ¡£ |
square | ÏòÏßÌõµÄÿ¸öÄ©¶ËÌí¼ÓÕý·½ÐÎÏßñ¡£ |