Canvas 旋转风车绘制

时间 2019-12-11

标签 canvas 旋转风车绘制繁體版

原文原文链接

写在前面：javascript

　　亲爱的朋友们你们好，鄙人自学前端，第一次写博客，写的很差的地方，烦请同窗们谅解，若是本文对你有一丁点帮助，还请劳驾您给我点个赞，您的承认将是我坚持下去的强大动力！谢谢！css

　　　在进行教学以前，我想聪明的你已经掌握了基本的Canvas基本操做方法，若是对Canvas还不是很了解，那么我建议你去http://www.w3school.com.cn/tags/html_ref_canvas.asp这里先熟悉一下；
html

okey！下图便是咱们完成后的简单效果，心动不如行动，那么我们就进行简单绘制吧！　　　　前端

一、定义画布

　　首先咱们如今html文件里面插入<canvas>标签，定义画布的尺寸，我这里定义画布的尺寸为800*600像素。同时在内部样式表里面设置canvas的背景色（方便画图时观看）；java

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        body{
            padding: 0;
            margin: 0;
        }
        #canvas {
            background:#5151a2;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="800" height="600"></canvas>
</body>
</html>

　　接下来的核心就是在原生JS环境下，绘制风车；经过JS DOM操做方法获取到canvas元素对象，并经过getContex（"2d"）获取2D绘图上下文，经过这个方法就像是要告诉浏览器“咱们要在这个画布上绘制2d图形”；git

<script type="text/javascript">

    //获取画布的2d上下文
    var ctx = document.getElementById("canvas").getContext("2d");

二、绘制风车底座

　　风车的底座的几何图形看似就像一个细长细长的梯形，咱们能够画出一个梯形出来，而后填充颜色，这里为了达到相对较好的效果，使用了颜色渐变填充的方法；okey！直接看代码吧~~！github

    //定义一个函数 ，封装风车的底部基座
    function buttom(){
        ctx.beginPath();                                        //开始一条新的绘制路径
        var liner = ctx.createLinearGradient(390,600,410,600);    //设置变量（颜色渐变的方向-起点-终点）
        liner.addColorStop(0,"#ccc");                            //设置起点颜色
        liner.addColorStop(0.5,"#fff");                            //设置中点颜色
        liner.addColorStop(1,"#ccc");                            //设置终点颜色
        ctx.fillStyle = liner;                                    //梯形的填充方式设置为 变量（渐变颜色）    
        ctx.moveTo(395,300);                                    //提起咱们的画笔，起点设置为（395,300）
        ctx.lineTo(405,300);                                    //链接起点画线
        ctx.lineTo(410,600);
        ctx.lineTo(390,600);                                    
        ctx.closePath();                                        //闭合路径
        ctx.fill();                                                //填充梯形
        
    }
　　buttom();　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//要调用函数，才能在浏览器显示

咱们来看一下页面中的效果，是否是很简单？canvas

（我感受我话有点多哦~！~！）浏览器

三、绘制叶子

　　接下来的部分将是这个动画中最关键的地方，首先咱们分析一下叶子的结构，三片叶子夹角为120°，并且每片叶子的形状是相同的；他们有一个圆心，你心中或许也有疑问，先画圆心仍是先画叶子？叶子的形状应该怎么画呢？叶子可不可复制粘贴呢？答案固然是能够的，Let's do it！　微信

思路分析：

　 1）、因为3片叶子的形状是如出一辙，咱们只须要画出一片叶子，第二第三片叶子直接copy就好了，聪明的咱们是否是应该给这个叶子的画法封装一个函数呀？就叫它bind( )函数吧！！每次调用它就能够了！哎！大家TM太机智了

　　2）、三片叶子有一个圆心，绘制叶子的时候为了方便取坐标值，咱们将圆心从画图的左上角移动梯形顶部，这样咱们绘制叶子会方便不少！这里使用了translate（）方法，移动坐标系！

　 3）、最难的一点就是理解这里动画是怎么实现的，由于动画原理会影响到咱们画叶子的文档结构：

　　　　首先咱们先新建一个绘图环境，咱们称它为环境1，咱们在环境1上画完第一片叶子；而后在第一个绘图环境前提下　旋转120°新建第一个绘图环境2，再此基础上调用画叶子的函数bind( )，绘制二片叶子;第三片叶子的绘制方法如法炮制，在环境2的基础上旋转120°，新建环境3，调用绘制叶子函数bind( )画第三片叶子;

　　　　若是要实现动画，咱们只须要旋转第一片叶子的绘图环境1，第二片叶子和第三片叶子都是参照环境1为基准画出来的，是否是也跟着动起来了呢？？弹幕：666666

　　4）、最后就是一些基本的外观样式调试的啦！好比颜色渐变啊，透明度啊，之类的！

以上思路听明白的同窗请扣1，不明白的扣2！

　　　　22222 　　　　　　　　　　222222　　　　　　　　　　　　1 　　　　垃圾，下去 　　　　　　　　　　　　66666　　　　　　　　2222　　　　　　　　22

2222　　　　　　　　　　22222　　　　　　　　222　　　　　　　22　　　22 最帅不过卢本伟　　　　　　　　　　　　　　　　　　　　222　　　　　　　　　　2222

2222　　··。。。。。　　博主你讲的什么鬼　　　　　　　　　　　　　　博主我要跟你生猴子　　　　　　　　　　　　　　　　222　　　　　　　　　　　　　　　　222

　　　　okey，我们也很少扯，个人表达能力实在有限，不能理解的粉丝自行脑补！！那位要跟我生猴子的同窗，留下微信哈！

绘制叶子

　　　　画这个叶子形状的时候我是慢慢调试的，个人审美至关low，原谅我只能画出这样的叶子，固然想象力丰富的同窗能够根据本身喜爱来绘制，不过大致思路是一致的；

这里我声明了一个变量 var num = 0;，做为环境1旋转度数变化的一个参数：那么咱就直接看代码吧！！！


var num =0;
function yezi(){
        ctx.save();  //保存默认状况下的canvas变换状态
        ctx.beginPath();
        ctx.translate(400,300);
        // ctx.globalAlpha = 0.9;
        // 设置第一次状态下 坐标系旋转度数
        ctx.rotate((Math.PI/180)*num);
        var liner1 = ctx.createLinearGradient(30,-12,30,12);      //这里设置颜色渐变填充的样式
            liner1.addColorStop(0,"#ccc");
            liner1.addColorStop(0.5,"#fff");
            liner1.addColorStop(1,"#ccc");
            ctx.fillStyle = liner1;
        ctx.save();                 //保存第一次状态  平移坐标系变换
            ctx.beginPath();
            bind();                //调用函数

            //绘制第二片叶子
            ctx.beginPath();
            ctx.rotate((Math.PI/180)*120);   //坐标系旋转120°
            ctx.save();                        //保存旋转坐标系状态，为第三片叶子作铺垫
                bind();            //调用函数
                //绘制第三片叶子
                ctx.beginPath();
                ctx.rotate((Math.PI/180)*120);   //坐标系旋转120°
                ctx.save();    
                    bind();     //调用函数
                ctx.restore();    //回复第3次状态前（旋转坐标系）
            ctx.restore();        //回复第2次状态前（旋转坐标系）

            //绘制叶子中心圆圈
            ctx.beginPath();
            var arcgradient = ctx.createRadialGradient(0,0,0,0,0,16);
            arcgradient.addColorStop(0,"#ccc");
            arcgradient.addColorStop(0.1,"#fff");
            arcgradient.addColorStop(1,"#ccc");
            ctx.arc(0,0,10,0,Math.PI*2);
            ctx.fillStyle  = arcgradient;
            ctx.fill();

        ctx.restore();             //回复第1次状态前（平移坐标系）

        num+=5;   //第一状下  环境1   态坐标系旋转度数增长********************************这个num使得环境1的旋转角度在不停的变化，**********************************************
        ctx.restore();

    }

    //绘制每片叶子都重复的代码，这里作一个函数包装
    function bind(){
        ctx.moveTo(0,0);                    
        ctx.quadraticCurveTo(10,-12,30,-12);　　　　//比赛尔曲线
        ctx.lineTo(190,-3);
        ctx.quadraticCurveTo(200,0,190,3);　　　　
        ctx.lineTo(30,12);
        ctx.moveTo(0,0);
        ctx.quadraticCurveTo(10,12,30,12);
        ctx.fill();
    }

四、设置动画

　　动画这部分就比较简单了，设置定时器，清除画布，调用函数；大功告成，打完收工！！！

setInterval(function(){
        ctx.clearRect(0,0,800,600);　　　　//每次执行代码前，都要将画布清空，否则画出的图形会滞留在画布上；
        buttom();　　　　　　　　　　　　　　　//调用函数　
        yezi();
    },50);

啊！忘记给源码了，sorry！

https://github.com/224137748/Canvas/blob/master/windmill.html