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

Note:绘制整体元素，特别是在其中使用图形变换的时候，都应该先save()一下，最终结束绘制时再restore()一下以保证canvas图形绘制的正确。

三、应用translate，rotate和scale 1、使用translate和rotate绘制固定大小星星的星空

没有用scale.

ctx.translate(x,y); ctx.rotate(rot/180*Math.PI); window.onload=function(){ var canvas=document.getElementById("canvas"); canvas.width=800; canvas.height=800; var context=canvas.getContext("2d"); context.fillStyle="black"; context.fillRect(0,0,canvas.width,canvas.height); for(var i=0;i<200;i++){ var r=Math.random()*10+10; var x=Math.random()*canvas.width; var y=Math.random()*canvas.height; var a=Math.random()*360; drawStar(context,x,y,r,a); } } //rot顺时针旋转的角度 function drawStar(ctx,x,y,R,rot){ ctx.save(); ctx.translate(x,y); ctx.rotate(rot/180*Math.PI); starPath(ctx); //绘制在(x,y)大小为R，旋转rot度的五角星 ctx.fillStyle="#fb3"; ctx.strokeStyle="#fd5"; ctx.lineWidth=3; ctx.lineJoin="round"; ctx.fill(); ctx.stroke(); ctx.restore(); } function starPath(ctx){ ctx.beginPath(); //角度转弧度：除以180*PI for(var i=0;i<5;i++){ ctx.lineTo(Math.cos((18+i*72)/180*Math.PI)*20, -Math.sin((18+i*72)/180*Math.PI)*20); ctx.lineTo(Math.cos((54+i*72)/180*Math.PI)*0.5*20, -Math.sin((54+i*72)/180*Math.PI)*0.5*20); } ctx.closePath(); } View Code

效果和上面图片一样。

2、scale副作用

不仅放在大小，还会放大坐标，边框等。

var canvas=document.getElementById("canvas"); canvas.width=400; canvas.height=400; var context=canvas.getContext("2d"); context.save(); context.scale(1,1); context.strokeRect(10,10,100,100); context.restore(); context.save() context.scale(2,2,); context.strokeRect(10,10,100,100); context.restore(); context.save() context.scale(3,3,); context.strokeRect(10,10,100,100); context.restore(); }

3，应用scale绘制星空

坐标是通过translate变换的，始终是(0,0)所以scale后还是(0,0)。

放弃外边框的绘制。

星星没有外边框。

四、深入理解图形变换

图形变换的实质是对图形的顶点坐标的再计算。计算过程通过变换矩阵来完成。

二维的变换矩阵是3*3，三维的变换矩阵是4*4。

使用transform(a,b,c,d,e,f)设置变换矩阵每次设置是在之前的基础上设置的。

可以用setTransform(a,b,c,d,e,f))忽略掉之前所有的变换矩阵。先设置为单位矩阵再变换。

window.onload=function(){ var canvas=document.getElementById("canvas"); canvas.width=400; canvas.height=400; var context=canvas.getContext("2d"); context.fillStyle="red"; context.strokeStyle="#058"; context.lineWidth=5; ///////////////////////////// // a c e // b d f // 0 0 1 ///////////////////////////// // a,d 水平，垂直缩放 // b,c 水平，垂直倾斜 // e,f 水平，垂直位移 ///////////////////////////// context.save(); // context.transform(1,0,0,1,0,0); //transform级联操作 context.transform(1,0,0,1,50,100); context.transform(2,0,0,1.5,0,0); context.transform(1,-0.2,-0.2,1,0,0); //setTransform()只使用当前变换 context.setTransform(1,0,0,1,100,100); context.fillRect(50,50,100,100); context.strokeRect(50,50,100,100); context.restore(); }

这部分内容和css3的动画的内容本质都是一样的，都是图形学的内容。

css3动画可以参考我之前的博客：

css3中变形与动画（一）

css3中变形与动画（二）

css3中变形与动画（三）

本文作者starof,因知识本身在变化，作者也在不断学习成长，文章内容也不定时更新，为避免误导读者，方便追根溯源，请诸位转载注明出处：有问题欢迎与我讨论，共同进步。

通过本文的学习希望对您了解和学习html的相关知识有一些好的帮助.感谢关注织梦者.我们将为您收集更多更好的html教程.

这些内容可能对你也有帮助

更多HTML教程可查看HTML教程列表页。