HTML5 canvas scale() ·½·¨
ʵÀý
»æÖƾØÐΣ¬·Å´óµ½ 200%£¬È»ºóÔٴλæÖƾØÐΣº
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
ä¯ÀÀÆ÷Ö§³Ö
Internet Explorer 9¡¢Firefox¡¢Opera¡¢Chrome ÒÔ¼° Safari Ö§³Ö scale() ·½·¨¡£
×¢ÊÍ£ºInternet Explorer 8 »ò¸üÔçµÄä¯ÀÀÆ÷²»Ö§³Ö <canvas> ÔªËØ¡£
¶¨ÒåºÍÓ÷¨
scale() ·½·¨Ëõ·Åµ±Ç°»æÍ¼£¬¸ü´ó»ò¸üС¡£
×¢ÊÍ£ºÈç¹ûÄú¶Ô»æÍ¼½øÐÐËõ·Å£¬ËùÓÐÖ®ºóµÄ»æÍ¼Ò²»á±»Ëõ·Å¡£¶¨Î»Ò²»á±»Ëõ·Å¡£Èç¹ûÄú scale(2,2)£¬ÄÇô»æÍ¼½«¶¨Î»ÓÚ¾àÀ뻲¼×óÉϽÇÁ½±¶Ô¶µÄλÖá£
JavaScript Óï·¨£º
context.scale(scalewidth,scaleheight);
²ÎÊýÖµ
²ÎÊý | ÃèÊö |
---|---|
scalewidth | Ëõ·Åµ±Ç°»æÍ¼µÄ¿í¶È (1=100%, 0.5=50%, 2=200%, ÒÀ´ÎÀàÍÆ) |
scaleheight | Ëõ·Åµ±Ç°»æÍ¼µÄ¸ß¶È (1=100%, 0.5=50%, 2=200%, etc.) |
¸ü¶àʵÀý
»æÖÆÒ»¸ö¾ØÐΣ»·Å´óµ½ 200%£¬ÔٴλæÖƾØÐΣ»·Å´óµ½ 200%£¬È»ºóÔٴλæÖƾØÐΣ»·Å´óµ½ 200%£¬ÔٴλæÖƾØÐΣº
JavaScript:
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.strokeRect(5,5,25,15);ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);