您的位置:首页 > Web前端 > JavaScript

【JavaScript】用JS绘制一个球

2017-04-21 21:10 281 查看
参考:

1、http://www.w3school.com.cn/html5/html_5_canvas.asp

2、http://blog.csdn.net/qq_27626333/article/details/51595138

效果图:



思路:

1、创建一个画布。

2、在画布上绘制一个圆。

3、把画布放到HTML页面上。

代码:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>draw a Ball</title>
</head>
<body>
<script src="js/ball.js"></script>
</body>
</html>


ball.js

// Create the canvas
var canvas = document.createElement("canvas"); // 创建一个画布
var ctx = canvas.getContext("2d"); // 可以把ctx理解成一支画笔!
canvas.width = 1024;
canvas.height = 768;
document.body.appendChild(canvas);

// DRAW THE BALL
ctx.fillStyle="crimson";
ctx.beginPath();
ctx.arc(300,400,250,0,Math.PI*2,true);
//绘制弧线,使用arc(x,y,radius,startAngle,endAngle,counterclockwise)方法
//以(x,y)为圆心绘制一条弧线,弧线半径为radius,起始和结束角度(用弧度表示)分别为startAngle
//和endAngle。最后一个参数表示是否按逆时针方向计算,值为false表示顺时针方向计算。
//内容来自http://blog.csdn.net/qq_27626333/article/details/51595138!
ctx.closePath();
ctx.fill();
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐