html文档中图形的变形,HTML5中canvas知识点详解4-绘制变形图形

一.变换的三种方式

1.平移:translate(25,25);

2.扩大缩小:scale(0.9,0.9);//注意:在一个循环的操作中，倍数是可以累加的，还有border也是可以放大缩小的。

3.旋转:rotate(Math.PI/10);

二.实例操作

绘制变形图形

window.onload = function(){

var oC = document.getElementById('can');

var oCt = oC.getContext('2d');

oCt.fillStyle = '#c0c0c0';

oCt.fillRect(0,0,500,500);

oCt.fillStyle = 'rgba(255,0,0,0.25)';

//图形的绘制

//translate(x,y)原点(0,0);x轴向右平移200，y轴向下平移50.

oCt.fillStyle = 'rgba(255,0,0,0.25)';

oCt.translate(200,100);

for(var i = 0;i < 50;i++){

//画填充的直方形

oCt.fillRect(0,0,100,50);

//x向右平移25，y向下平移25

oCt.translate(25,25);

//scale(x,y)整体画布所画图案x，y比例分别缩小0.9倍

oCt.scale(0.9,0.9);

//rotate(n*Math.PI/180)画布所画的图案旋转度数为18度。

oCt.rotate(Math.PI/10);

}

};