var ti = i;
//sqrt(x)
if (ti > R) {
ti = ti – R;
var ty = Math.sqrt((RR – ti * ti));
var y = $(‘<div style=”top:’ + (R – ty) + ‘px;left:’ + i + ‘px;”>*</div>’)
var y1 = $(‘<div style=”top:’ + (R + ty) + ‘px;left:’ + i + ‘px;”>*</div>’)
box.append(y);
box.append(y1);
} else if (ti < R) {
ti = R – ti;
var ty = Math.sqrt((RR – ti * ti));
var y = $(‘<div style=”top:’ + (R – ty) + ‘px;left:’ + i + ‘px;”>*</div>’)
var y1 = $(‘<div style=”top:’ + (R + ty) + ‘px;left:’ + i + ‘px;”>*</div>’)
box.append(y);
box.append(y1);
}
}
});
</script>
</head>
<body>
<div id=”box” style=”width: 504px; height: 504px; position: relative; top: 20px;
left: 300px; border: 0px solid black;”>
</div>
</body>
</html>
话说，他还是比较圆的说。。。
进入正题
说起画圆、正弦图等肯定会经过一定计算的，所以稍稍复杂点：
① 创建路径
② 创建图形路径
③ 路径创建完成后关闭路径
④ 设定绘制样式调用方法绘制之
复制代码
我是一个圆
<!DOCTYPE html>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title></title>
<script type=”text/javascript”>
function draw() {
//获取canvas对象
var canvas = document.getElementById(‘canvas’);
if (canvas == null) {
return false;
}
var context = canvas.getContext(‘2d’);
context.fillStyle = ‘#99d9ea’;
context.fillRect(0, 0, 300, 200); //填充画布结束
for (var i = 0; i < 5; i++) {
context.beginPath();
context.arc(i * 25, i * 25, i * 10, 0, Math.PI * 2, true);
context.closePath();
context.strokeStyle = ‘red’;
context.fill();
}
}
</script>
</head>
<body>
<canvas id=”canvas” width=”300″ height=”200″ >
</canvas>
<button onclick=”draw();”>
绘制圆</button>
<input type=”color” />
</body>
</html>
我们来看看绘制圆过程中其它地方都没有问题，但是创建圆路径这块值得考虑：
