本文介绍了一种使用HTML5 Canvas元素绘制桥洞的方法。通过JavaScript编程，实现了动态调整画布大小，并利用循环绘制一系列半圆弧来模拟桥洞的形状。此教程适合初学者了解Canvas的基本用法及图形绘制技巧。
</<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
123
<canvas id="canvas">该浏览器不支持canvas，请更换浏览器后查看</canvas>
<script>
window.onload=function () {
var canvas = document.getElementById('canvas');
var a = 1000;
var a2 = a*2;
var aa2 = a/2;
canvas.width=a2;
canvas.height=a;
var sc = canvas.getContext("2d");
sc.lineWidth = 5;
sc.strokeStyle = "#00ffff";
for(var i = 300;i<=aa2;i+=100){
sc.beginPath();
sc.arc(a,a,i,0,0.5*Math.PI,true);
sc.stroke();
}
}
</script>
</body>
</html>
这也不能叫彩虹，叫桥洞吧
扫一扫
1426
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
