利用坐标的变换对canvas图像进行旋转和缩放

效果如图



绘图依然用前面使用过的Polygon类进行绘图

drawPolygon是复制图形并旋转的函数
make_image是复制图像并进行缩放的函数
二者的思想就是对context绘图环境进行translate scale平移或缩放 ,平移缩放之后再restore进行还原 毫不影响
下面是代码

var canvas=document.getElementById("canvas")
   var context=canvas.getContext("2d")
   var RECT_width=100
   var RECT_height=100;
var Point = function (x, y) {
   this.x = x;
   this.y = y;
};

var Polygon=function(centerX,centerY,radius,sides,startAngle,strokeStyle,fillStyle,filled){

    this.x=centerX;
    this.y=centerY;
    this.radius=radius;
    this.sides=sides;
    this.startAngle=startAngle;
    this.strokeStyle=strokeStyle;
    this.fillStyle=fillStyle;
    this.filled=filled;
}
Polygon.prototype={
   getPoints:function(){
     var points=[];
     var angle=this.startAngle||0;
     for(var i=0;i

你可能感兴趣的:(利用坐标的变换对canvas图像进行旋转和缩放)