canvas仿小米天气绘图-HTML5_canvas -山楂狂魔 -飞趣

html 代码

context.beginPath();
            context.arc(15, 80, 25, 0, Math.PI * 2, true);
            context.arc(50, 90, 25, 0, Math.PI * 2, true);
            var grd1 = context.createLinearGradient(15, 55, 15, 80);
            grd1.addColorStop(0, "#acc8f7");
            grd1.addColorStop(1, "#8eb1f3");
            context.fillStyle = grd1;
            context.fill();
            context.closePath();

context.beginPath();
            context.arc(470, 135, 30, 0, Math.PI * 2, true);
            var grd1 = context.createLinearGradient(530, 100, 530, 140);
            grd1.addColorStop(0, "#acc8f7");
            grd1.addColorStop(1, "#8eb1f3");
            context.fillStyle = grd1;
            context.fill();
            context.closePath();

//          小山丘1
            context.beginPath();
            context.moveTo(0,330);
            context.strokeStyle='#96b7ec';
            context.fillStyle='#96b7ec';
            context.bezierCurveTo(350,350,350,450,500,500)
            context.lineTo(0,500);
            context.lineTo(0,350);
            context.fill();
            context.stroke();
            context.closePath();
            //          大山丘2
            context.beginPath();
            context.moveTo(0,400);
            context.strokeStyle='#7da1df';
            context.fillStyle='#7da1df';
            context.bezierCurveTo(200,400,300,250,500,350)
            context.lineTo(500,500);
            context.lineTo(0,500);
            context.lineTo(0,400);
            context.fill();
            context.stroke();
            context.closePath();
            //风车1
//          柱子
            context.beginPath();
            context.moveTo(350,320)
            context.strokeStyle='#7496d6';
            context.fillStyle='#7496d6';
            context.lineTo(352,240);
            context.lineTo(354,240);
            context.lineTo(356,320);
            context.fill();
            context.stroke();
            context.closePath();
//          翅
            context.save();
            context.translate(353,240); 
            context.rotate(Math.PI/40*x);
            for(var i = 0; i <3; i++) {
            context.beginPath();
            context.fillStyle = "#80a5eb";
            context.moveTo(-5, -0);
            context.lineTo(-2, 50);
            context.lineTo(2, 50);
            context.lineTo(5, 0);
            context.rotate(2*Math.PI/3);
            context.fill();
            context.closePath();
            }
            context.restore();
            //圆
            context.beginPath();
            context.fillStyle = "#fff";
            context.arc(353,240,5,0,2*Math.PI,true);
            context.fill();
            context.closePath();

//          风车2
//          柱子
            context.beginPath();
            context.moveTo(450,330)
            context.strokeStyle='#7496d6';
            context.fillStyle='#7496d6';
            context.lineTo(452,270);
            context.lineTo(454,270);
            context.lineTo(456,330);
            context.fill();
            context.stroke();
            context.closePath();
//          翅
            context.save();
            context.translate(453,270); 
            context.rotate(Math.PI/30 * x);
            for(var i = 0; i <3; i++) {
            context.beginPath();
            context.fillStyle = "#80a5eb";
            context.moveTo(-4, -0);
            context.lineTo(-1, 40);
            context.lineTo(1, 40);
            context.lineTo(4, 0);
            context.rotate(2*Math.PI/3);
            context.fill();
            context.closePath();
            }
            context.restore();
            //圆
            context.beginPath();
            context.fillStyle = "#fff";
            context.arc(453,270,3,0,2*Math.PI,true);
            context.fill();
            context.closePath();
//              风车3
//          柱子
            context.beginPath();
            context.moveTo(50,335)
            context.fillStyle='#7496d6';
            context.lineTo(52,270);
            context.lineTo(54,270);
            context.lineTo(55,335);
            context.fill();
            context.closePath();
//          翅
            context.save();
            context.translate(53,270);  
            context.rotate(2*Math.PI/40 * x);
            for(var i = 0; i <3; i++) {
            context.beginPath();
            context.fillStyle = "#80a5eb";
            context.moveTo(-4, -0);
            context.lineTo(-1, 40);
            context.lineTo(1, 40);
            context.lineTo(4, 0);
            context.rotate(2*Math.PI/3);
            context.fill();
            context.closePath();
            }
            context.restore();
            //圆
            context.beginPath();
            context.fillStyle = "#fff";
            context.arc(53,270,3,0,2*Math.PI,true);
            context.fill();
            context.closePath();

//          风车4
//          柱子
            context.beginPath();
            context.moveTo(150,350)
            context.strokeStyle='#7496d6';
            context.fillStyle='#7496d6';
            context.lineTo(152,290);
            context.lineTo(154,290);
            context.lineTo(156,350);
            context.fill();
            context.stroke();
            context.closePath();
//          翅
            context.save();
            context.translate(153,290); 
            context.rotate(Math.PI/30 * x);
            for(var i = 0; i <3; i++) {
            context.beginPath();
            context.fillStyle = "#80a5eb";
            context.moveTo(-4, -0);
            context.lineTo(-1, 30);
            context.lineTo(1, 30);
            context.lineTo(4, 0);
            context.rotate(2*Math.PI/3);
            context.fill();
            context.closePath();
            }
            context.restore();
            //圆
            context.beginPath();
            context.fillStyle = "#fff";
            context.arc(153,290,3,0,2*Math.PI,true);
            context.fill();
            context.closePath();
            },20)
        </script>
    </body>
</html>

作者简介

来自上海浦东新区

2017年11月13日加入飞趣社区

是个男孩纸哦

学校是苏州大学

类似文章

IntelliJ IDEA 使用阿里云maven仓库793阅
Mybatis和JDBC的区别（优缺点）620阅
自律的人有多可怕？-转载596阅
在Java中使用HMAC加密算法485阅
一个两年Java的面试总结(转载)354阅
讲讲爬虫（使用webmagic）354阅
Java面试通关要点汇总集300阅
微信支付第一步，申请企业商户号298阅
开始你的写作264阅
【javascript】函数中的this的四种绑定形式 — 大家准备好瓜子，我要讲故事啦~~259阅

广告位