【JavaScript】用JS绘制一个球

参考：

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();

 

posted @ 2017-04-21 21:10  xkfx  阅读(1246)  评论(0)  编辑  收藏  举报