07绘制奥运五环
2016-12-07 本文已影响35人
夜幕小草
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绘制奥运五环</title>
</head>
<body style="padding: 100px;">
<canvas id="canvas" width="900" height="600" style="border:1px solid #000"></canvas>
<script>
// 1. 获取标签
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
// 2. 绘制奥运五环
var colorArr = ["red", "blue", "yellow", "purple", "black"];
for(var i=0; i<colorArr.length; i++){
ctx.beginPath();
ctx.arc((i+1) * 100, 150, 80, 0, 2 * Math.PI);
ctx.strokeStyle = colorArr[i]; // 设置颜色
ctx.lineWidth = 6;
ctx.stroke();
}
for(var i=0; i<colorArr.length; i++){
ctx.beginPath();
if(i < 3){
ctx.arc((i+1) * 100, 350, 80, 0, 2 * Math.PI);
}else {
ctx.arc((i-2) * 100 + 50, 430, 80, 0, 2 * Math.PI);
}
ctx.strokeStyle = colorArr[i]; // 设置颜色
ctx.lineWidth = 6;
ctx.stroke();
}
</script>
</body>
</html>
