<!DOCTYPE HTML>
<html lang="en">
<meta charset="utf-8">
<script type="text/javascript" src="JS/JQ.js"></script>
<style>
@charset "utf-8";
/* CSS Document */
body{background:#fff;}
body,form,ul,ol,li,p,h1,h2,h3,h4,h5,h6,dl,dt,dd,table,fieldset,hr,div{margin:0; padding:0;}
body, input,select,textarea{color:#000; font:12px/1.8 "微软雅黑",Arial, Helvetica, sans-serif;}
img{border:0; vertical-align:middle;}
table{width:100%; border:0; border-collapse:collapse; border-spacing:0;}
ul,ol,li{list-style-type:none;}
a{color:#000; outline:none; text-decoration:none;}
a:hover{text-decoration:underline;}
.contain{width:500px; margin:0 auto; padding-top:200px;}
</style>
<body>
<div class="contain">
<canvas id="myCanvas" height="300px" width="500px" style="border:1px solid #333;">your browser does not support the canvas tag </canvas>
<img src="" />
</div>
</body>
<script type="text/javascript">
var canvas=$("#myCanvas").get(0);
var _canvas=$("#myCanvas").get(0).getContext("2d");
function start(){
_canvas.translate(175,175);
for(k=1;k<5;k++){
_canvas.save();
_canvas.fillStyle="rgb("+k*51+","+(255-51*k)+",255)";
for(i=0;i<6*k;i++){
_canvas.rotate(Math.PI*2/(6*k));
_canvas.beginPath();
_canvas.arc(0,12.5*k,5,0,Math.PI*2,false);
_canvas.fill();
};
_canvas.restore();
};
var _url=canvas.toDataURL("png");
$("img").attr("src",_url);
};
$(document).ready(function(e){
start();
});
</script>
</html>
效果图:
代码在前辈的代码上加了点东西。。。
主要是要注意 rotate(angle)的运用