Html5 Canvas绘制锯齿形【每日一段代码29】

<!DOCTYPE html>
<html>
<head>
<title>绘制锯齿形</title>
<script>
window.onload = function(){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

var startX = 85;
var startY = 70;
var zigzagSpacing = 60;//锯齿间距

context.lineWidth = 10;
context.strokeStyle = "#0096FF";
context.beginPath();
context.moveTo(startX,startY);

//绘制7条线
for (var n=0; n<7; n++)
{
var x = startX+((n+1)*zigzagSpacing);
var y;
if (n%2==0)
{
y = startY+100;
}
else {
y = startY;
}
context.lineTo(x,y);
}
context.stroke();
}
</script>
</head>
<body style="margin:100px 10px;">
<canvas id="myCanvas" width="600" height="250" style="border:2px solid #06f;"></canvas>
</body>
</html>

 

 

本实例来自网络。传送门：http://demo.cnmsdn.com/demo38.html

posted on 2012-02-27 22:11  Cosimo  阅读(530)  评论(0)    收藏  举报

导航