你的位置:首页 > 网页设计

[网页设计]HTML5画布(变形)


坐标变换

案例1:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
function draw(){
var c=document.getElementById("myCanvas");
var cxt= c.getContext("2d");
cxt.translate(200,50);
cxt.fillStyle='rgba(255,0,0,0.25)';
for(var i=0;i<40;i++)
{
cxt.translate(25,25);
cxt.scale(0.9,0.9);
cxt.rotate(Math.PI/10);
cxt.fillRect(0,0,100,50);
}
}
</script>
</head>
<body onload="draw()">
<canvas id="myCanvas" width="450" height="350" >您的浏览器不支持</canvas>

</body>
</html>

效果图:


注释:

(1)平移

         cxt.translate( x , y );

         translate方法使用两个参数,x表示将坐标轴原点向左移动多少个单位,默认情况下为像素,y表示将坐标轴原点向下移动多少个单位。

(2)扩大

        cxt.scale( x , y );

        scale方法使用两个参数,x是水平方向的放大倍数,y是垂直方向的放大倍数;将图形缩小的时候,将这两个参数设为0到1之间的小数就可以了,譬如0.5是指将图形缩小一半。

(3)旋转

        cxt.rotate(angle);

        rotate方法接受一个参数angle,angle是指旋转的角度,旋转的中心点是坐标轴的原点。旋转是以顺时针方向进行的,要想逆时针旋转时,将angle设定为负数就可以了。

 

案例2

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
function draw(){
var c=document.getElementById("myCanvas");
var cxt= c.getContext("2d");
cxt.fill;
cxt.fillRect(0,0,400,320);

cxt.translate(60,60);
for( var i=0;i<6;i++)
{
cxt.translate(50,50);
cxt.scale(0.8,0.8);
cxt.rotate(Math.PI/10);
createStar(cxt);
cxt.fill();
}

function createStar(cxt){
var n=0;
var dx=0;
var dy=0;
var s=50;
cxt.beginPath();
cxt.fillStyle='rgba(255,0,0,0.5)';
var x=Math.sin(0);
var y=Math.cos(0);
var dig=Math.PI/5*4;
for(var i=0;i<5;i++)
{
var x=Math.sin(i*dig);
var y=Math.cos(i*dig);
cxt.lineTo(dx+x*s,dy+y*s);
}
cxt.closePath();
}
}
</script>
</head>
<body onload="draw()">
<canvas id="myCanvas" width="450" height="350" >您的浏览器不支持
</canvas>

</body>
</html>

效果图:

注释:
(1)如果要对矩形进行变形,使用坐标变换就足够了。
(2)createStar函数中,只创建了一个五角星,因坐标轴变换,在Canvas画布中,此五角星会一边缩小一边旋转,之后产生一个新的五角星,新的五角星又采用同样的方法进行绘制,最终绘制出一串变形效果的五角星。