HTML5 Canvas简介（五）

萧萧可乐

于 2012-06-26 10:45:05 发布

阅读量207

点赞数

本文链接：https://blog.youkuaiyun.com/NIHAOX1/article/details/7692064

版权

<!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>

效果图：