《JS原理、方法与实践》- canvas作图（七）- 缩放

方法 scale(x, y)

坐标系除了可以移动和旋转外还可以进行缩放 缩放使用的是scale方法 它有两个参数 分别标识横轴和纵轴缩放的比例, 1为原始大小 大于1为放大 小于1为缩小。

示例

html

!DOCTYPE html

html lang en

head

    meta charset UTF-8

    meta name viewport content width device-width, initial-scale 1.0

    title Document /title

/head

body

    canvas id c2d height 600 width 600 浏览器不支持canvas /canvas

    script

       const canvas document.querySelector( #c2d

       if(canvas.getContext) {

           const ctx canvas.getContext( 2d

           ctx.fillText( 爱我中华 , 10, 50);

           ctx.scale(2,2);

           ctx.translate(50,50);

           ctx.fillText( 爱我中华 , 10, 50);

       }

    /script

/body

/html


同样是填充一个文本 由于第二次填充文字时 x轴和y轴都同比增加了2倍 所以文字的大小也相应的增加。