HTML5中canvas绘制圆形 - 右手博客 HTML5中canvas绘制圆形 - 右手博客

HTML5中canvas绘制圆形

625191023   


<!DOCTYPE html>
<html> 
<head lang="en"> 
<meta charset="UTF-8"> 
<title>canvas绘制圆形</title> 
<script type="text/javascript" src="yuanxing.js"></script> 
<style type="text/css"> body{ margin: 0; padding: 0; } 
</style> 
</head> 
<body onload="draw('yuanxing')"> 
<canvas id="yuanxing" width="400" height="400"></canvas> 
</body> 
</html>
5     
function draw(id) {
 var yuanxing = document.getElementById(id); 
var context = yuanxing.getContext('2d');
 context.fillStyle = "#f1f2f3"; 
context.fillRect(0, 0, 400, 400); 
for (var i = 0; i < 10; i++)
 { context.beginPath(); context.arc(i * 15, i * 15, i*10, 0, Math.PI * 2, true); 
context.closePath(); 
context.fillStyle = "rgba(255,0,0,0.25)"; 
context.fill(); } 
for (var i = 0; i < 10; i++) 
{ context.beginPath(); 
context.arc(400-i * 15, i * 15, i*10, 0, Math.PI * 2, true); 
context.closePath(); 
context.fillStyle = "rgba(255,0,0,0.25)"; 
context.fill(); } 
for (var i = 0; i < 10; i++) 
{ context.beginPath(); 
context.arc(i * 15, 400-i * 15, i*10, 0, Math.PI * 2, true); 
context.closePath(); 
context.fillStyle = "rgba(255,0,0,0.25)"; 
context.fill(); } 
for (var i = 0; i < 10; i++) 
{ context.beginPath(); 
context.arc(400-i * 15,400- i * 15, i*10, 0, Math.PI * 2, true); 
context.closePath(); 
context.fillStyle = "rgba(255,0,0,0.25)"; 
context.fill(); } }


评论 0

挤眼 亲亲 咆哮 开心 想想 可怜 糗大了 委屈 哈哈 小声点 右哼哼 左哼哼 疑问 坏笑 赚钱啦 悲伤 耍酷 勾引 厉害 握手 耶 嘻嘻 害羞 鼓掌 馋嘴 抓狂 抱抱 围观 威武 给力
提交评论

清空信息
关闭评论