<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function draw(){
// 获取context对象
var ctx = document.getElementById("myCanvas").getContext("2d");
// 调整坐标的位置
ctx.translate(200,20);
// 循环遍历
for(var i = 1;i<50;i++){
// 保存状态
ctx.save();
// 矩阵转化
ctx.transform(0.95,0,0,0.95,30,30);
// 旋转
ctx.rotate(Math.PI/12);
// 开始路径
ctx.beginPath();
// 填充的样式
ctx.fillStyle = 'rgba(255,0,0,'+(1-(i+10)/40)+')';
// 画圆
ctx.arc(0,0,50,0,Math.PI*2,true);
// 闭合路径
ctx.closePath();
// 填充
ctx.fill();
}
}
window.onload = function(){
draw();
}
</script>
</head>
<body>
<canvas id="myCanvas" width="700" height="300"></canvas>
</body>
</html>
482
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
