从《HTML5+CSS3从入门到精通》 P125 copy的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas</title>
<script>
function draw() {
var ctx = document.getElementById(‘myCanvas‘).getContext(‘2d‘);
ctx.translate(200, 20);
for (var i = 1; i < 80; i++ ) {
ctx.save();
ctx.translate(30, 30);
ctx.scale(0.95, 0.95);
ctx.rotate(Math.PI/12);
ctx.beginPath();
ctx.fillStyle = ‘red‘;
ctx.globalAlpha = ‘0.4‘;
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>
效果如下：
时间： 2024-08-01 12:24:14