HTML5 canvas scale() ·½·¨

ʵÀý

»æÖƾØÐΣ¬·Å´óµ½ 200%£¬È»ºóÔٴλæÖƾØÐΣº

Your browser does not support the HTML5 canvas tag.

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%£¬ÔٴλæÖƾØÐΣº

Your browser does not support the HTML canvas tag.

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);

Ç××ÔÊÔÒ»ÊÔ

VUE