注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

星期五

明天不上班

 
 
 

日志

 
 
关于我

一个特立独行的Java程序员,比较宅,上上网,写博客,听音乐,看电影。

网易考拉推荐

Html5 Canvas (6)Transformations  

2011-04-02 17:01:32|  分类: Html5 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

Transformations


context . rotate(angle)

Changes the transformation matrix to apply a rotation transformation with the given characteristics.

context . scale(x, y)

Changes the transformation matrix to apply a scaling transformation with the given characteristics.

context . setTransform(m11, m12, m21, m22, dx, dy)

Changes the transformation matrix to the matrix given by the arguments as described below.

context . transform(m11, m12, m21, m22, dx, dy)

Changes the transformation matrix to apply the matrix given by the arguments as described below.

context . translate(x, y)

Changes the transformation matrix to apply a translation transformation with the given characteristics.

 

一个例子

  Html5 Canvas (6)Transformations - zhenghaoju700 - zhenghaoju700 的博客?

CODE

<!DOCTYPE HTML>

<html>

<head>

<title>Html5 Canvas Translate</title>

</head>

<body>

<canvas id="c" height="1000" width="700"></canvas>

<script type="text/javascript">

var c = document.getElementById('c');//取得Dom元素

    var context = c.getContext("2d");//拿到Canvas的上下文 目前好像只支持2D渲染

    //translate(x,y) 移动(x,y)  rotate(angle) 旋转angle

context.translate(100,100);

 

for(var i = 1; i<6; i++){

context.save();

        context.fillStyle = 'rgb('+(51*i)+','+(255-51*i)+',255)';

for(var j = 0; j<i*6; j++){

context.rotate(Math.PI*2/(i*6));

context.beginPath();

context.arc(0,i*12.5,5,0,Math.PI*2,true);

context.fill();

}

context.restore();

}

 

context.translate(0,200)

 

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

context.fillStyle = 'rgb('+(10*i)+','+(255-10*i)+',255)';

context.beginPath();

context.arc(12.5,0,5,0,Math.PI*2,true);

context.arc(25,0,5,0,Math.PI*2,true);

context.arc(37.5,0,5,0,Math.PI*2,true);

context.arc(50,0,5,0,Math.PI*2,true);

context.arc(62.5,0,5,0,Math.PI*2,true);

context.arc(75,0,5,0,Math.PI*2,true);

        context.fill();

context.rotate(Math.PI*2/(30));

}

    context.save(); 

//scale(x, y) 缩放 

//x,y 分别是横轴和纵轴的缩放因子,它们都必须是正值。值比 1.0 小表示缩小,比 1.0 大则表示放大

context.translate(0,160);

    context.beginPath();

context.scale(10,4);

context.arc(0,0,5,0,Math.PI*2,true);

context.fill();

//transform(m11, m12, m21, m22, dx, dy) 变形

//这个方法必须将当前的变形矩阵乘上下面的矩阵:

 

//m11 m21 dx

//m12 m22 dy

//0 0 1

</script>

</body>

</html>

  评论这张
 
阅读(320)| 评论(0)
推荐

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017