<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title> Canvas 绘图</title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="cloud">
<meta name="Keywords" content="H5 Canvas 绘图">
<meta name="Description" content="使用Html5 Canvas 绘制图形">
</head>
<style type="text/css">
#canvas{
border: 1px solid #000;
display:block;
margin: 50px auto;
}
</style>
<body>
<canvas id="canvas">
您的浏览器不支持Canvas
</canvas>
</body>
<script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery.js"></script>
<script type="text/javascript">
// 得到 canvas 容器
var canvas = document.getElementById("canvas");
// 初始化Canvas
function init_canvas(canvas_id){
canvas.width = 800;
canvas.height = 800;
return canvas.getContext("2d");
}
// 绘制圆弧
function ph1(context){
for(var i = 0 ; i < 10 ; i++){
context.beginPath();
// x座标, y座标, 半径, 开始角度, 结束角度, 是否是逆时间绘制
var rote = Math.random();
context.arc(50 + i * 100, 350 + rote, 40 + rote, 0, 2 * Math.PI * (i + 1) / 10, (i % 2));
context.stroke();
}
for(var i = 10 ; i >= 0 ; i--){
context.beginPath();
// x座标, y座标, 半径, 开始角度, 结束角度, 是否是逆时间绘制
var rote = Math.random();
context.arc(50 + i * 100, 450 + rote, 40 + rote, 0, 2 * Math.PI * (i + 1) / 10, (i % 3));
context.fill();
}
}
$(function(){
var context = init_canvas("canvas");
ph1(context);
});
</script>
</html>
