学习canvas

最新推荐文章于 2023-06-09 11:35:33 发布

letMeAlone_

最新推荐文章于 2023-06-09 11:35:33 发布

阅读量317

点赞数

分类专栏： HTML/CSS 文章标签： canvas

本文链接：https://blog.csdn.net/a250758092/article/details/75146858

版权

HTML/CSS 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

本来这个东西是早就要学得了。但是我对动画不是特别感冒，所以一直没有去学习，这两天有朋友面试，说让他做实现一个gif图的效果，让我想想怎么实现比较好，不过我不懂canvas啊，不知道性能方面怎么样，但肯定是考这个，不然没什么好考的了。于是我动手写了下，代码是比较乱的，参数都是直接复制粘贴，因为我也是一边看文档一边写就随意了。很多数学的东西也忘了，还得查一下，心累。。。，以下是自己写的两个例子，算是初学吧。。。

效果图：这里写图片描述

然后那朵云是左右移动的,我这个算是简写版，他们对颜色要求很高。里面看似一个颜色其实是一些渐变色。我这里没处理。。只是把大概画出来了

<html>
    <head>
        <title></title>
    </head>
    <body>

        <canvas id="gif" width="300px" height="300px"></canvas>

        <script type="text/javascript">



    function begin(run_x)
    {
        //run_x 云朵的位置



            //var rom=Math.random()*10;//云朵的位置，随机
            var canvas=document.getElementById('gif');
            var ctx=canvas.getContext('2d');
            //背景色
            ctx.fillStyle='lightskyblue';
            ctx.fillRect(0,0,300,300);
            //底下绿色矩形
            ctx.fillStyle='green';
            ctx.fillRect(canvas.width/2-100,canvas.height-50,200,30);
            //三角形山峰


            var drawS= function(x1, y1, x2, y2, x3, y3,color) {
    ctx.fillStyle=color;
   ctx.beginPath();
    ctx.moveTo(x1, y1);
    ctx.lineTo(x2, y2);
    ctx.lineTo(x3, y3);
    ctx.closePath();
    ctx.fill();
 ctx.fillStyle=''


}
            //半圆
            var drawC=function(x, y, radius, startAngle, endAngle, counterclockwise,color,type){

                //destination-out
                ctx.beginPath();
                ctx.fillStyle=color;
                ctx.arc(x,y,radius,startAngle,endAngle,counterclockwise);
                ctx.lineTo(canvas.width/2+25,canvas.height-50);
                ctx.fill();
                ctx.closePath();
            }
            var drawC_yun=function(x, y, radius, startAngle, endAngle, counterclockwise,color,type){

                //destination-out
                ctx.beginPath();
                ctx.fillStyle=color;
                ctx.arc(x,y,radius,startAngle,endAngle,counterclockwise);
                ctx.lineTo(x,y+5);
                ctx.fill();
                ctx.closePath();
            }
            var s1_h=50/Math.tan(Math.PI/6);//大三角形的高度，底边长50，共两个大三角形
            var s2_h=10/Math.tan(Math.PI/6);//小三角形，底边为10， 角度分别是30 60 90
            drawS(canvas.width/2-50,canvas.height-50,canvas.width/2,canvas.height-(50+s1_h),canvas.width/2,canvas.height-50,'darkgray');
            drawS(canvas.width/2+50,canvas.height-50,canvas.width/2,canvas.height-(50+s1_h),canvas.width/2,canvas.height-50,'gray');
            drawC(canvas.width/2+25,canvas.height-50,22,-Math.PI,-Math.PI/2,false,'green');
            drawC(canvas.width/2+25,canvas.height-50,22,0,-Math.PI/2,true,'darkgreen');
            drawS(canvas.width/2-10,canvas.height-50-(s1_h-s2_h),canvas.width/2,canvas.height-50-s1_h,canvas.width/2,canvas.height-50-(s1_h-s2_h),'white');
            drawS(canvas.width/2+10,canvas.height-50-(s1_h-s2_h),canvas.width/2,canvas.height-50-s1_h,canvas.width/2,canvas.height-50-(s1_h-s2_h),'white');

            drawS(canvas.width/2-10,canvas.height-50-(s1_h-s2_h)+1,canvas.width/2-3,canvas.height-50-s1_h+13,canvas.width/2,canvas.height-50-(s1_h-s2_h),'darkgray');
            drawS(canvas.width/2+10,canvas.height-50-(s1_h-s2_h)+1,canvas.width/2+3,canvas.height-50-s1_h+13,canvas.width/2,canvas.height-50-(s1_h-s2_h),'gray');


            //云
            var y_h=canvas.height-50-s1_h+s2_h+10;//云，矩形的h坐标，高10,宽20
            ctx.beginPath();
            ctx.fillStyle='white';
            ctx.fillRect(run_x,y_h,20,10);
            ctx.closePath();
            drawC_yun(run_x,y_h+5,5,Math.PI/2,-Math.PI/2,false,'white');            
            drawC_yun(run_x+20,y_h+5,5,Math.PI,-Math.PI/2,true,'white');
            drawC_yun(run_x+10,y_h,10,0,-Math.PI,true,'white');


            //return true;
}


var flag = true; // 切换条件
var end = 170; // 加到最大值
var start = 150; // 起始值


setInterval(function() {
   if (flag) 
    {
        ++start;
        if (start == end) {
            flag = false;
        }
    }
    else
    {
        --start;
        if (start == 150) {
            flag = true;
        }
    }
begin(start);

},100);



        </script>
    </body>
</html>

另外还有额圆圈百分比进度条


<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="UTF-8">  
        <title>绘制圆环进度条</title>  
    </head>  
    <body>  
        <div>  
            <canvas id="myCanvas"></canvas>  
        </div>  
        <script type="text/javascript">  
            function drawRing(w,h,val){  
                //先创建一个canvas画布对象，设置宽高  
                var c=document.getElementById('myCanvas');  
                var ctx=c.getContext('2d');  
                ctx.canvas.width=w;  
                ctx.canvas.height=h;  
                //圆环有两部分组成，底部灰色完整的环，根据百分比变化的环  
                //先绘制底部完整的环  
                //起始一条路径  
                ctx.beginPath();  
                //设置当前线条的宽度  
                ctx.lineWidth=10;//10px  
                //设置笔触的颜色  
                ctx.strokeStyle='gainsboro';  
                //arc()方法创建弧/曲线（用于创建圆或部分圆）arc(圆心x,圆心y,半径,开始角度,结束角度)  
                ctx.arc(50,50,40,0,2*Math.PI);            
                //绘制已定义的路径  
                ctx.stroke();  

                //绘制根据百分比变动的环  
                ctx.beginPath();  
                ctx.lineWidth=10;  
                ctx.strokeStyle='green';  
                //设置开始处为0点钟方向（-90*Math.PI/180）  
                //x为百分比值（0-100）  
                ctx.arc(50,50,40,-90*Math.PI/180,(val*3.6-90)*Math.PI/180);  
                ctx.stroke();  
                //绘制中间的文字  
                ctx.font='20px Arial';  
                ctx.fillStyle='#747474';  
                ctx.textBaseline='middle';  
                ctx.textAlign='center';  
                ctx.fillText(val+'%',50,50);  
            }  
            var i=0;
            var si=setInterval(function(){
                ++i;
                if(i==100)
                {
                    //停止
                    clearInterval(si);
                }
                drawRing(100,100,i);

            },10);

        </script>  
    </body>  
</html>

letMeAlone_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习canvas

本来这个东西是早就要学得了。但是我对动画不是特别感冒，所以一直没有去学习，这两天有朋友面试，说让他做实现一个gif图的效果，让我想想怎么实现比较好，不过我不懂canvas啊，不知道性能方面怎么样，但肯定是考这个，不然没什么好考的了。于是我动手写了下，代码是比较乱的，参数都是直接复制粘贴，因为我也是一边看文档一边写就随意了。很多数学的东西也忘了，还得查一下，心累。。。，以下是自己写的两个例子，算是初学
复制链接

扫一扫