HTML5 canvas提供了 rotate(angle)方法,该方法用于围绕当前原点旋转画布。
此方法仅使用一个参数,即画布旋转的角度。这是以弧度为单位的顺时针旋转。
下面是一个简单的示例,无涯教程正在运行两个循环,其中第一个循环确定环的数量,第二个循环确定每个环中绘制的点数。
<!DOCTYPE HTML> <html> <head> <style> #test { width: 100px; height:100px; margin: 0px auto; } </style> <script type="text/javascript"> function drawShape() { //使用 DOM 获取画布元素 var canvas=document.getElementById('mycanvas'); //确保不支持画布时不执行 if (canvas.getContext) { //使用 getContext 使用画布进行绘图 var ctx=canvas.getContext('2d'); ctx.translate(100,100); for (i=1; i<7; i++) { ctx.save(); ctx.fillStyle='rgb('+(51*i)+','+(200-51*i)+',0)'; for (j=0; j < i*6; j++) { ctx.rotate(Math.PI*2/(i*6)); ctx.beginPath(); ctx.arc(0,i*12.5,5,0,Math.PI*2,true); ctx.fill(); } ctx.restore(); } } else { alert('You need Safari or Firefox 1.5+ to see this demo.'); } } </script> </head> <body id="test" onload="drawShape();"> <canvas id="mycanvas" width="400" height="400"></canvas> </body> </html>
上面的示例将产生以下输出-
祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)