html文档中图形的变形,（18）HTML5-控制图形的变形

介绍完绘制简单几何图形的函数后，接着来介绍如何使用javascript控制图形的变形，例如位移(translate)，旋转(rotate)和缩放(scale)等，在游戏中通常会使用到这些变形方法。

{translate}

位移方法可以直接对画布的x，y坐标进行移动。所谓对画布进行移动，也就是原本画布定义的原点坐标(0，0)在画布的左上角，当使用位移方法后，原点坐标将会重新定义成坐标(x，y)的位置，后续绘制的图形将会把坐标(x，y)认作为原点坐标(0，0).

canvas{

border:1px solid black;

}

function draw(){

var canvas=document.getElementById('tutorial');

var ctx = canvas.getContext('2d');

ctx.fillRect(0,0,50,50);

ctx.translate(100,100);

ctx.fillRect(0,0,50,50);

}

浏览器不支持画布功能