您的位置：首页 > 其它

Canvas绘制图形（一）

2015-07-08 21:59 337 查看

<img src="http://img.blog.csdn.net/20150709090925648?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" height="296" width="234" alt="" />
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
function draw(id)
{
var canvas = document.getElementById(id);
var context = canvas.getContext("2d");
context.fillStyle = "#eeeeef";
context.fillRect(0,0,300,400);
var dx = 150;
var dy = 150;
var s = 100;
context.beginPath();
context.fillStyle = "rgb(100,255,100)";
context.strokeStyle = "rgb(0,0,100)";
var x = Math.sin(0);
var y = Math.cos(0);
var dig = Math.PI/15*11;
for(var i = 0;i<30;i++)
{
var x = Math.sin(i*dig);
var y = Math.cos(i*dig);
context.lineTo(dx+x*s,dy+y*s);
}
context.closePath();
context.fill();
context.stroke();
}
</script>
</head>
<body onload="draw('canvasid')">
<canvas id="canvasid" width="300" height="400"></canvas>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航