【JavaScript】用JS绘制一个球

最新推荐文章于 2022-08-11 21:35:09 发布

bangtuo9862

最新推荐文章于 2022-08-11 21:35:09 发布

阅读量251

点赞数

原文链接：http://www.cnblogs.com/xkxf/p/6745553.html

版权

参考：

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

转载于:https://www.cnblogs.com/xkxf/p/6745553.html

bangtuo9862

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【JavaScript】用JS绘制一个球

参考：1、http://www.w3school.com.cn/html5/html_5_canvas.asp2、http://blog.csdn.net/qq_27626333/article/details/51595138效果图：思路：1、创建一个画布。2、在画布上绘制一个圆。3、把画布放到HTML页面上。代码：index.html&...
复制链接

扫一扫