canvas星空和图形变换_H5之家 - 中国HTML5教程资源分享第一站

本文将为关注织梦者的朋友提供的是的canvas星空和图形变换相关教程，具体实例代码请看下文:

图形变换。

一、画一片星空

先画一片canvas.width宽canvas.height高的黑色星空，再画200个随机位置，随机大小，随机旋转角度的星星。

产生一个扁平化设计中200个星星的效果。

二、图像变换和状态保存 1、用标准路径+图形变换思想重构

上面drawStar函数承载的功能太多来，整个绘制路径的指定，同时把五角星的位移，大小，旋转多少度全部揉合在一个函数里了。

假如需要变为画一个四角形？六角形？代码改起来就比较麻烦了。

标准做法：修改函数结构。

接口不变，省去了旋转角度，画一个标准星星。假设外圆半径是内圆半径的两倍，所以只需要传入一个小r。drawStar里调用一个startPath()函数来绘制一个标准五角星的路径。

标准的五角星路径：只传入一个context，在(0,0)的位置绘制来一个大圆半径为1，同时没有任何偏移，任何旋转的的五角星。

在drawStar里勾绘出标准五角星后再通过图形变换使得标准五角星的位移变成在(x,y)的位置，大小变成R这么大，同时旋转rot角度。再进行具体的绘制。

这样一个设计的结构可以避免之前的问题。比如需求变成要画六角形，四角形，只需要把starPath()里面路径勾绘的代码进行相应的更改即可。

更高级的复用：starPath()函数以参数的形式传入drawStar()中。这样drawStar可以叫drawSheap用户可以绘制任意的图形，只需要传入绘制图形的标准路径，变更的位移量，大小量，旋转量即可。

//rot顺时针旋转的角度 function drawStar(ctx,x,y,r,R,rot){ starPath(ctx); //绘制在(x,y)大小为R，旋转rot度的五角星 //... }
function starPath(ctx){ ctx.beginPath(); //角度转弧度：除以180*PI for(var i=0;i<5;i++){ ctx.lineTo(Math.cos((18+i*72)/180*Math.PI), -Math.sin((18+i*72)/180*Math.PI)); ctx.lineTo(Math.cos((54+i*72)/180*Math.PI), -Math.sin((54+i*72)/180*Math.PI)); } ctx.closePath(); }

总结：图形学里绘制先绘制标准路径，再通过图形变换成需求大小。

2，图形变换

三种基本操作：

位移translate(x,y) 旋转rotate(deg) 缩放 scale(sx,sy)

translate会叠加

绿色正方形位置经过2次translate后到达了(200,200)。并不是代码里看起来的(150,150)。

window.onload=function(){ var canvas=document.getElementById("canvas"); canvas.width=400; canvas.height=400; var context=canvas.getContext("2d"); context.fillStyle="red"; context.translate(50,50); context.fillRect(0,0,200,200); context.fillStyle="green"; context.translate(150,150); context.fillRect(0,0,200,200); } View Code

为了避免上述问题，最佳实践是使用图形变换之后，再反向操作把图形变换的结果逆转过来。如下：

window.onload=function(){ var canvas=document.getElementById("canvas"); canvas.width=400; canvas.height=400; var context=canvas.getContext("2d"); context.fillStyle="red"; context.translate(50,50); context.fillRect(0,0,200,200); context.translate(-50,-50);//反向操作 context.fillStyle="green"; context.translate(150,150); context.fillRect(0,0,200,200); context.translate(-150,-150);//反向操作 } View Code

3，canvas状态的保存save()和恢复restore()

逆转图形变换太麻烦了，canvas提供了一个save()API,保存当前的图形状态，状态包括所有我们设置的状态，自然也包括图形变换的状态。

在完成图形变换并且具体绘制以后，在最后再调用一次context.restore()。

restore()和save()是成对出现的，restore()返回在save()时候canvas的所有状态，这是一个非常好的保持canvas绘图状态的方法，在save()和restore()之间可以随意的更改canvas的状态而不影响后续的绘制效果。

window.onload=function(){ var canvas=document.getElementById("canvas"); canvas.width=400; canvas.height=400; var context=canvas.getContext("2d"); context.save(); context.fillStyle="red"; context.translate(50,50); context.fillRect(0,0,200,200); //context.translate(-50,-50);//反向操作 context.restore(); context.save() context.fillStyle="green"; context.translate(150,150); context.fillRect(0,0,200,200); // context.translate(-150,-150);//反向操作 context.restore(); }