HTML5 Canvas 转动风车绘图

2021-02-23 22:25 jianzhan

写在前面:

亲爱的盆友们大伙儿好,敝人自学前端开发,第1次写blog,写的不太好的地区,烦请同学们原谅.

在开展课堂教学以前,我想聪慧的你早已把握了基础的Canvas基础实际操作方式,假如对Canvas还并不是很掌握,那末我提议你去http://www.w3school.com.cn/tags/html_ref_canvas.asp这里先熟习1下;

okey!下图就是大家进行后的简易实际效果,动心比不上行動,那末我们就开展简易绘图吧!    

1、界定画布

最先大家如今html文档里边插进<canvas>标识,界定画布的规格,我这里界定画布的规格为800*600像素。另外在內部款式表中面设定canvas的情况色(便捷画图时收看);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF⑻">
    <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图型”;

<script type="text/javascript">

    //获得画布的2d左右文
    var ctx = document.getElementById("canvas").getContext("2d");

2、绘图风车底座

风车的底座的几何图形图型看似就像1个长细长细的梯形,大家能够画出1个梯形出来,随后填充色调,这里以便做到相对性较好的实际效果,应用了色调渐变色填充的方式;okey!立即看编码吧~~!

 

    //界定1个涵数 ,封裝风车的底部基座
    function buttom(){
        ctx.beginPath();                                        //刚开始1条新的绘图相对路径
        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();                              //要启用涵数,才可以在访问器显示信息

大家看来1下网页页面中的实际效果,是否很简易?

(我觉得我话有点多哦~!~!)

3、绘图叶子

接下来的一部分将是这个动漫中最重要的地区,最先大家剖析1下叶子的构造,3片叶子夹角为120°,并且每片叶子的样子是同样的;她们有1个圆心,你心中也许也是有疑惑,先画圆心還是先画叶子?叶子的样子应当如何画呢?叶子可不能拷贝粘贴呢?回答自然是能够的,Let's do it! 

思路剖析:

1)、因为3片叶子的样子是1模1样,大家只必须画出1片叶子,第2第3片叶子立即copy就可以了,聪慧的大家是否应当给这个叶子的画法封裝1个涵数呀?就叫它bind(  )涵数吧!!每次启用它便可以了!哎!你们TM太机灵了

2)、3片叶子有1个圆心,绘图叶子的情况下以便便捷取座标值,大家将圆心从画图的左上角挪动梯形顶部,这样大家绘图叶子会便捷许多!这里应用了translate()方式,挪动座标系!

3)、最难的1点便是了解这里动漫是如何完成的,由于动漫基本原理会危害到大家画叶子的文本文档构造:

最先大家先新建1个制图自然环境,大家称它为自然环境1,大家在自然环境1上画完第1片叶子;随后在   第1个制图自然环境前提条件下  转动120°新建第1个制图自然环境2,再此基本上启用画叶子的涵数bind(  ),绘图2片叶子;第3片叶子的绘图方式如出一辙,在自然环境2的基本上转动120°,新建自然环境3,启用绘图叶子涵数bind(  )画第3片叶子;

假如要完成动漫,大家只必须转动第1片叶子的制图自然环境1,第2片叶子和第3片叶子全是参考自然环境1为标准画出来的,是否也跟随动起来了呢??        弹幕:666666

4)、最终便是1些基础的外型款式调节的啦!例如色调渐变色啊,全透明度啊,之类的!

绘图叶子

画这个叶子样子的情况下我是渐渐地调节的,我的审美非常low,谅解我只能画出这样的叶子,自然想像力丰富多彩的同学能够依据自身爱好来绘图,但是大致思路是1致的;

这里我申明了1个自变量 var num = 0;,做为自然环境1转动度数转变的1个主要参数:  那末咱就立即看编码吧!!!

 

var num =0;
function yezi(){
        ctx.save();  //储存默认设置状况下的canvas转换情况
        ctx.beginPath();
        ctx.translate(400,300);
        // ctx.globalAlpha = 0.9;
        // 设定第1次情况下 座标系转动度数
        ctx.rotate((Math.PI/180)*num);
        var liner1 = ctx.createLinearGradient(30,⑴2,30,12);      //这里设定色调渐变色填充的款式
            liner1.addColorStop(0,"#ccc");
            liner1.addColorStop(0.5,"#fff");
            liner1.addColorStop(1,"#ccc");
            ctx.fillStyle = liner1;
        ctx.save();                 //储存第1次情况  平移座标系转换
            ctx.beginPath();
            bind();                //启用涵数

            //绘图第2片叶子
            ctx.beginPath();
            ctx.rotate((Math.PI/180)*120);   //座标系转动120°
            ctx.save();                        //储存转动座标系情况,为第3片叶子做铺垫
                bind();            //启用涵数
                //绘图第3片叶子
                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状下  自然环境1   态座标系转动度数提升********************************这个num使得自然环境1的转动角度在不断的转变,**********************************************
        ctx.restore();

    }

    //绘图每片叶子都反复的编码,这里做1个涵数包装
    function bind(){
        ctx.moveTo(0,0);                    
        ctx.quadraticCurveTo(10,⑴2,30,⑴2);    //赛事尔曲线图
        ctx.lineTo(190,⑶);
        ctx.quadraticCurveTo(200,0,190,3);    
        ctx.lineTo(30,12);
        ctx.moveTo(0,0);
        ctx.quadraticCurveTo(10,12,30,12);
        ctx.fill();
    }

4、设定动漫

动漫这一部分就较为简易了,设定定时执行器,消除画布,启用涵数;大获全胜,打完收工!!!

 

setInterval(function(){
        ctx.clearRect(0,0,800,600);    //每次实行编码前,都要将画布清空,要不然画出的图型会停留在画布上;
        buttom();               //启用涵数 
        yezi();
    },50);

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

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。