JavaScript图形实例:图形的旋转变换 |
您所在的位置:网站首页 › 圆形旋转图案简笔 › JavaScript图形实例:图形的旋转变换 |
旋转变换:图形上的各点绕一固定点沿圆周路径作转动称为旋转变换。可用旋转角表示旋转量的大小。 旋转变换通常约定以逆时针方向为正方向。最简单的旋转变换是以坐标原点(0,0)为旋转中心,这时,平面上一点P(x,y) 旋转了θ之后,变成点P’(x,y) ,如图1所示。
图1 点P逆时针旋转 由三角关系可得:
平面上一点P(x,y)若按顺时针方向旋转了θ之后,变成点P’(x,y) ,如图2所示。
图2 点P顺时针旋转 由三角关系可得: 1.三角形旋转 先绘制一个三角形,然后将该三角形依次顺时针旋转45°,90°,135°,180°,225°,270°,315°,可以绘制出一个三角形旋转图案。 编写如下的HTML代码。 三角形旋转 function draw(id) { var canvas=document.getElementById(id); if (canvas==null) return false; var context=canvas.getContext('2d'); context.fillStyle="#EEEEDD"; context.fillRect(0,0,300,300); context.strokeStyle="red"; context.lineWidth=1; context.fillStyle="yellow"; context.beginPath(); px1=150; py1=150; px2=250; py2=150; px3=200; py3=120; context.moveTo(px1,py1); context.lineTo(px2,py2); context.lineTo(px3,py3); context.lineTo(px1,py1); x0=150; y0=150; // 旋转中心 a=Math.PI/4; // 旋转角度 for (i=1;i |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |