html5 小实例2 球球转

最新推荐文章于 2020-03-31 22:29:35 发布

毛太

最新推荐文章于 2020-03-31 22:29:35 发布

阅读量898

点赞数

分类专栏： html5 前端

前端同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

html5

5 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>
    
    <canvas id="canvas" width="1000" height="1000" style="background: #000;">  
        您的浏览器不支持canvas
    </canvas>

</body>
<script> 
// 获取canvas
var canvas = document.getElementById("canvas");
// 设置2d绘图环境
var cxt = canvas.getContext('2d');
// 声明时间参数
var time=0; 

function fun(){
    // 清除
        cxt.clearRect(0,0,1000,1000);

    // 轨道
        // 设置笔触颜色
        cxt.strokeStyle="#fff";
    cxt.beginPath();
    cxt.arc(500,500,100,0,360,false);
    cxt.closePath();
    cxt.stroke();
    // 画太阳
        // 设置填充颜色  ~~渐变色
        // var sco = cxt.createLinearGradient(内圆心，內圆形，内半径，外，外，外半径);
        var sco = cxt.createRadialGradient(500,500,0,500,500,20);
        sco.addColorStop(0,"#f00");
        sco.addColorStop(1,"#f90");
        cxt.fillStyle=sco;
    cxt.beginPath();
    cxt.arc(500,500,20,0,360,false);
    cxt.closePath();
    cxt.fill();

    // 地球
    cxt.save();
        // 设置空间 0 0 点
        cxt.translate(500,500);
        // 设置旋转角度 角度*Math.PI/180
        cxt.rotate(time*365/360*Math.PI/180); 
        // 画地球
        cxt.beginPath();
        cxt.arc(0,-100,10,0,360,false);
        cxt.closePath();
        // 渐变
        var earco = cxt.createRadialGradient(5,-100,0,1,-100,10);
        earco.addColorStop(0,"red");
        earco.addColorStop(0.4,"#fff");
        earco.addColorStop(0.8,"#f00");
        earco.addColorStop(1,"orange");
        cxt.fillStyle = earco;
        cxt.fill();
    cxt.restore();
    // 按照轨道动

    // 每花一次+=1
    time++;
}
setInterval(fun,50);

</script>
</html>

毛太

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5 小实例2 球球转

test 您的浏览器不支持canvas // 获取canvasvar canvas = document.getElementById("canvas");// 设置2d绘图环境var cxt = canvas.getContext('2d');// 声明时间参数var time=0; function fun(){
复制链接

扫一扫