简单的 canvas 翻角效果

作者:分分快三计划

总结的 canvas 翻角效果

2017/12/07 · HTML5 · Canvas

初稿出处: 敖爽   

由于工作须求 , 供给写二个翻角效果;图片 1

demo链接

右上角要求从无的事态撕开几个标识 , 且有动画进程 , 上海体育场合是兑现的功效图 , 不是gif

对那一个翻角效果的难题在于未有翻动的时候流露的是dom上面包车型大巴内容 , 达成角度来讲 纯dom css动画的应用方案并不曾相出三个好的对策 ; 于是捡起了好久事先学的入门等第的canvas;

下边说一下贯彻思路:

  1. 动画拆分 :
    将此动画分解成两局地 , 一部分是翻页出现的月光蓝三角区域 , 另一个是发泄的橘色展现内容
    对于橘色的突显内容区域绝对好有的 , 因为是多少个条条框框图形 , 而浅青区域相对较难;

先从基础canvas使用情势聊到 :

<div class="container"> <canvas class="myCanvas" width="100" height="100"></canvas> </div>

1
2
3
<div class="container">
    <canvas class="myCanvas" width="100" height="100"></canvas>
</div>

布局如上 , 这里要说一点踩过的坑是 , canvas必需求设置上width 与 height , 此处并非为css中的width与height;而是写在dom上的属性 ; 因为dom上的width与height标记了canvas的分辨率(个人知道); 所以此canvas画布分辨率为100*100 , 而呈现尺寸是足以因此css调整;

js中第一要做的是得到canvas对象 ,

var canvas = document.querySelector('.myCanvas'); //获取canvas对应dom var ctx = canvas.getContext('2d'); //此方法对比基础 , 意为获得canvas美术2d内容的工具(上下文) var cw = 100; //分辨率 , 其实直接从dom上获取或者越来越好些 var ch = 100; //分辨率 , 其实直接从dom上取得只怕更加好些

1
2
3
4
var canvas = document.querySelector('.myCanvas'); //获取canvas对应dom
var ctx = canvas.getContext('2d'); //此方法较为基础 , 意为获取canvas绘画2d内容的工具(上下文)
var cw = 100; //分辨率 , 其实直接从dom上获取可能更好些
var ch = 100; //分辨率 , 其实直接从dom上获取可能更好些

ctx这么些摄影上下文在这么些课程中起到的功用着重 ; 它提供了那么些庞大的api , 举个例子用于画线 , 填充 , 写文字等 , 那样看来精通为画笔会特别断定一些;

此地效果须要使用的api如下 ( 不做详细分解 , 可w3c自行查询 );

ctx.save() //保存上下文状态 (比方画笔尺寸 颜色 旋转角度) ctx.restore() //再次回到上次保存的上下文状态 ctx.moveTo(x,y) //上下文移动到具体地方ctx.lineTo(x,y) //上下文以划线的款式活动到某地方 ctx.stroke() // 画线动作 ctx.quadraticCurveTo() //上下文(画笔)按贝塞尔曲线移动(老妪能解为可控的曲线就能够) ctx.arc() //画圆 ctx.beginPath() //开启新的画笔路线 ctx.closePath() //关闭当前画笔路线 ctx.createLinearGradient() //创制canvas渐变对象 ctx.fill() //对闭合区域举行填充 ctx.globalCompositeOperation //画笔的重合形式

1
2
3
4
5
6
7
8
9
10
11
12
ctx.save() //保存上下文状态 (比如画笔尺寸 颜色 旋转角度)
ctx.restore() //返回上次保存的上下文状态
ctx.moveTo(x,y) //上下文移动到具体位置
ctx.lineTo(x,y) //上下文以划线的形式移动到某位置
ctx.stroke() // 画线动作
ctx.quadraticCurveTo() //上下文(画笔)按贝塞尔曲线移动(简单理解为可控的曲线即可)
ctx.arc() //画圆
ctx.beginPath() //开启新的画笔路径
ctx.closePath() //关闭当前画笔路径
ctx.createLinearGradient() //创建canvas渐变对象
ctx.fill() //对闭合区域进行填充
ctx.globalCompositeOperation //画笔的重叠模式

或许方法列举的缺乏详尽 , 见谅.

先是是绘制栗褐翻出的片段 , 图形分解为如下几有的(请依据上海教室脑补)

  1. 左上角向右下的半弧 ╮
  2. 然后是竖直向下的竖线 |
  3. 接下来是向右的半圆 ╰
  4. 再然后是向右的横线
  5. 进而仍旧向右下的半弧 ╮
  6. 终极是将线连接会起源

于是第一步 大家要先将画笔移动到 起先地方

ctx.moveTo(50,0);

1
ctx.moveTo(50,0);

然后

ctx.quadraticCurveTo(55 , 5 , 55 , 25); // 能够知晓为从(50,0)那一个点划线到(55,25)这些点 , 中间会遭到(55,5)那些点将直线想磁铁同样"吸"成曲线;

1
ctx.quadraticCurveTo(55 , 5 , 55 , 25); // 可以理解为从(50,0)这个点划线到(55,25)这个点 , 中间会受到(55,5)这个点将直线想磁铁一样"吸"成曲线;

于是第一个向右下的半弧达成 , 此时canvas上未曾别的绘制内容 , 因为还不曾实施过绘制方法比如stroke或fill,

接下去直线向下便是大致的移动

ctx.lineTo(55 , 40);

1
ctx.lineTo(55 , 40);

以此时候大家接下去应该画向右的半圆 , 那一年再用贝塞尔曲线绘制 实在有个别不太合适 , 因为从图上来看 , 这里完全部都以55%的圆 , 所以要选用canvas提供的画圆的api

ctx.arc(60 , 40 , 5 , Math.PI , Math.PI / 2 , true);

1
ctx.arc(60 , 40 , 5 , Math.PI , Math.PI / 2 , true);

上述画圆的代码意为 : 以(60,40)点为圆心 , 5为半径 , 逆时针从 180度绘制到90度 , 180度正是圆心的水平向左 达到点(55,40) , 与上一步连接上 , 然后又因为显示器向下为正 , 90度在圆心正下方 , 所以绘制出此半圆

于是乎遵照同等的手续 水平向右

ctx.lineTo(75 , 45);

1
ctx.lineTo(75 , 45);

接下来再度利用贝塞尔曲线用第一步的笔触画出向右下的弧;

ctx.quadraticCurveTo( 95 , 45 , 100 , 50 );

1
ctx.quadraticCurveTo( 95 , 45 , 100 , 50 );

同理 上述贝塞尔曲线能够通晓为一条从( 75 , 45 ) 到 ( 100 , 50 )的线被 ( 95 , 45 )”吸”成曲线

最后链接起源 , 闭合美术区域

ctx.lineTo(50 , 0);

1
ctx.lineTo(50 , 0);

以此时候黄褐区域的翻页就画完了 , 然后此时开班填写颜色 ;

var gradient = ctx.createLinearGradient(50 , 50 , 75 , 75); gradient.addColorStop(0 , '#ccc'); gradient.addColorStop(0.7 , '#111'); gradient.addColorStop(1 , '#000');

1
2
3
4
var gradient = ctx.createLinearGradient(50 , 50 , 75 , 75);
gradient.addColorStop(0 , '#ccc');
gradient.addColorStop(0.7 , '#111');
gradient.addColorStop(1 , '#000');

咱俩由此上述代码创立一个 从( 50 , 50 )点到(75 , 75)点的线性渐变 , 颜色从 #ccc 到 #111 到 #000 ; 创造白内障效果;
下一场填充:

ctx.fillStyle = gradient; ctx.fill();

1
2
ctx.fillStyle = gradient;
ctx.fill();

于是乎翻页效果的四分之二哪怕完毕了。

至此 , 作者要说一点笔者精晓的canvas的作画”套路”;

对于上述教程中 , 有一步大家采纳了三个词叫做 闭合 , 闭合的定义在canvas中是当成存在的 , 对于fill方法来说填充的间隔是有三个上空尺寸才足以的 , 比方我们描绘的这一个玛瑙红的三角形 , 参预大家最后未有将终点与起源相接接 , 一样canvas会自行帮我们链接最终一笔水墨画的岗位到起源 , 强制行程闭合空间 , 而那样我们想再多画多少个新的密封空间就劳动了 , 所以canvas提供了如下api 新建闭合路线:

ctx.beginPath(); //新建路线 ctx.closePath(); //闭合路径

1
2
ctx.beginPath(); //新建路径
ctx.closePath(); //闭合路径

进而对于大家接下去要绘制右上角橘色区域来说 , 我们在绘制石绿区域以前率先要做的是

ctx.beginPath(); ...

1
2
ctx.beginPath();
...

然后在fill以前 大家应当

ctx.closePath();

1
ctx.closePath();

也正是说beginPath 到 closePath之间标记着我们和好的三个一体化的作画阶段.

那么接下去绘制右上角的橘色区域就归纳相当多了:

ctx.beginPath(); ctx.moveTo(50,0); ctx.lineTo(100,50); ctx.lineTo(100,0); ctx.lineTo(50,0); ctx.closePath(); ctx.fillStyle = '#ff6600'; ctx.fill();

1
2
3
4
5
6
7
8
ctx.beginPath();
ctx.moveTo(50,0);
ctx.lineTo(100,50);
ctx.lineTo(100,0);
ctx.lineTo(50,0);
ctx.closePath();
ctx.fillStyle = '#ff6600';
ctx.fill();

于是右上角的橘色区域我们就绘制实现了;

文字绘制

接下去绘制”new” , 实际上是使用canvas简单的文件绘制 , 代码如下:

var deg = Math.PI / 180; ctx.globalCompositeOperation = 'source-atop'; //canvas层叠格局 ctx.beginPath(); ctx.font = '14px Arial'; //设置字体大小 字体 ctx.textAlign = 'center'; // 字体对齐格局ctx.translate(78 , 22); // 移动canvas画布圆点 ctx.rotate(45 * deg); // 旋转画布 ctx.fillStyle = '#fff'; // 设置文字颜色 ctx.fillText('NEW' , 0 , 0); //文字绘制动作 ctx.closePath();

1
2
3
4
5
6
7
8
9
10
var deg = Math.PI / 180;
ctx.globalCompositeOperation = 'source-atop'; //canvas层叠模式
ctx.beginPath();
ctx.font = '14px Arial'; //设置字体大小 字体
ctx.textAlign = 'center'; // 字体对齐方式
ctx.translate(78 , 22);  // 移动canvas画布圆点
ctx.rotate(45 * deg);    // 旋转画布
ctx.fillStyle = '#fff';  // 设置文字颜色
ctx.fillText('NEW' , 0 , 0); //文字绘制动作
ctx.closePath();

对此上述代码中 , 文字的相关api是属于未有难度的 , 只是设置而已 , 须求通晓的部分在于 translate和rotate,

这三个点子中 translate的情致为移动canvas画布的( 0 , 0 )点到 (78,22),然后旋转45度, 再将文字渲染在原点 , 实际正是 ( 78 , 22 ) 那么些点上, 此时大家对canvas的画笔做出了极其大的改变

诸如大家修改了旋转角度以及画布圆点 , 这种操作大概只在大家须要绘制倾斜的new 的时候供给 , 早先时期大概就无需使用了 ,

幸亏canvas的画笔是存在”状态”的, 通过ctx.save();能够保留当前画笔的动静 , 通过ctx.restore();能够还原到上次画笔保存的状态.

于是小编个人精晓到 , 在付出canvas动画时 , 二个较好的习于旧贯正是 , 在beginPath在此之前先ctx.save();保存画笔状态 , 在close帕特h后ctx.restore();苏醒在此之前的画笔状态 , 这样我们的每一个绘制阶段对于画笔的修改都将是不会有影响的.( 个人经验 )

ctx.globalCompositeOperation = 'source-atop'; //canvas层叠格局

1
ctx.globalCompositeOperation = 'source-atop'; //canvas层叠模式

代码中那某个是指 我们绘制的文字new 与 橘色三角形区域的重合关系 , 此方法取值非常多 , 此处不做过多介绍 , source-atop值能够使重叠区域保留 , 新绘制的内容在重叠区域以外的某些消失 , 以此达到new在个中的功用

到此地大家就付出好了翻角效果的一心展示的图景 , 那么怎么样让那些区域动起来呢?

那边供给选用h5提供的用于刷帧的函数 requestAnimationFrame ;

此方法可粗略精通为 16微秒的沙漏 , 但是立下志愿的是足以再逐个意况中活动相称到可高达的相对顺遂的帧率 , 实际并非定时器哈~

咱俩要求在这些轮回施行的函数中 , 将上述的绘图内容重复绘制 , 比如 :

function draw(){ drawMethod(); //绘制三角等情节window.requestAnimationFrame(function(){ draw(); }) } function drawMethod(){ //... }

1
2
3
4
5
6
7
8
9
function draw(){
    drawMethod(); //绘制三角等内容
    window.requestAnimationFrame(function(){
        draw();
    })
}
function drawMethod(){
    //...
}

与此相类似大家就可以直达刷帧的功能了 , 于是随即大家要做的正是决定绘制时种种数值的参数.

比如说我们是以 (50,0)为起点 , ( 100 , 50 )为终端这样的八个运动点为绘制标志的 , 如若我们将多少个点实行仓库储存 , 何况每一趟试行drawMethod的时候更新点的岗位 , 然后清空canvas ,再绘制新的点 那么就足以达到规定的标准canvas动起来的目标了;

实效链接在那边

在上头的demo链接中 , 本身定义了一个速度与加快度的关联 , 比方每回绘制二次canvas后 , 将积攒的点坐标进行充实叁个speed值 , 然后speed值也大增 , 那样speed对应的概念正是速度 , 而speed的扩大值对应的正是加速度. 所以就显现了一种加快移动的气象;

以上内容相对个人掌握内容 , 若果有哪儿知道错了 迎接各位大大指导 , 另demo链接失效可私信.

1 赞 1 收藏 评论

图片 2

        var percent = 0;

<script type="text/javascript">
    
        function draw(id) {
                var canvas=document.getElementById(id);
                if(canvas==null)
                return false;
                var ctx=canvas.getContext('2d');
                ctx.beginPath();
                
                // 小雨点
                ctx.moveTo(47,32);
                ctx.bezierCurveTo(40,42,38,56,46,60);
                ctx.bezierCurveTo(64,52,50,40,47,32);
                
                // 大雨点
                ctx.moveTo(78,32);
                ctx.bezierCurveTo(70,44,62,66,78,70);
                ctx.bezierCurveTo(104,60,80,40,78,32);
                
                // 伞身
                ctx.moveTo(44,118);
                ctx.bezierCurveTo(48,114,50,90,72,76);
                ctx.bezierCurveTo(82,82,104,70,102,54);
                ctx.bezierCurveTo(138,26,222,76,224,118);
                ctx.lineTo(146,118);
                ctx.lineTo(146,200);
                
                ctx.bezierCurveTo(147,212,162,216,162,192);
                ctx.bezierCurveTo(168,188,172,186,178,192);
                ctx.bezierCurveTo(180,200,182,218,162,231);
                ctx.bezierCurveTo(154,240,116,226,122,200);
                
                ctx.lineTo(122,118);
                ctx.lineTo(44,118);
                var gradient=ctx.createRadialGradient(0,0,0,0,0,150);
                gradient.addColorStop(0,"rgba(244,28,285,0.1)");
                gradient.addColorStop(1,"rgba(255,255,255,1)");
                
                ctx.strokeStyle = "red"; //设置或回到用于笔触的颜色、渐变
                ctx.stroke();
                
                ctx.fillStyle=gradient;
                ctx.fill();
        }
    </script>

            ctx.moveTo(points.x1,points.y1);

☆ canvas画布节点(仅供仿照效法)

            ctx.fill();

证实:英特网有尖端算法的绘图,很灵巧也很便利,倘若不是特命全权大使情形,千万别用自己的方法,请上网右转看别人的案例,哈哈。

.myCanvas{width:100px;height:100px;border:0px solid #000;display: inline-block;}

  1. 桃心
  1. ctx.save() //保存上下文状态 (比如画笔尺寸 颜色 旋转角度)

  2. ctx.restore() //返回上次保存的上下文状态

  3. ctx.moveTo(x,y) //上下文移动到具体位置

  4. ctx.lineTo(x,y) //上下文以划线的形式移动到某位置

  5. ctx.stroke() // 画线动作

  6. ctx.quadraticCurveTo() //上下文(画笔)按贝塞尔曲线移动(简单理解为可控的曲线即可)

  7. ctx.arc() //画圆

  8. ctx.beginPath() //开启新的画笔路径

  9. ctx.closePath() //关闭当前画笔路径

  10. ctx.createLinearGradient() //创建canvas渐变对象

  11. ctx.fill() //对闭合区域进行填充

  12. ctx.globalCompositeOperation //画笔的重叠模式

图片 3

下一场在fill从前大家应该 :

<canvas id="myCanvas" width="264" height="264" style="border:red 1px solid;position:absolute;top:0;left:0"></canvas>

        }

  1. 雨伞

                aSpeed = -.1;

 

gradient.addColorStop(0.7,'#111');

    </script>

//    ctx.closePath() //关闭当前画笔路线

    <canvas> H5标签,只是图形容器,您必得采纳脚本来绘制图形。

            ctx.closePath();

    lineTo() 方法 增多一个新点,然后创制从该点到画布中最终钦定点的线条

对此上述教程中,有一步大家利用了一个词叫做闭合,闭合的概念在canvas中是真是存在的,对于fill方法来讲,填充的间距是有一个上空尺寸才方可的,举例大家描绘的这么些灰湖绿的三角形,出席我们最后未有将终点与起源相连接,同样canvas会自行帮大家链接最后一笔油画的任务到起源,强制行程闭合空间,而那样大家想再多画多少个新的关闭空间就麻烦了,所以canvas提供了之类api 新建闭合路线:

    为了满足要求不可能写运算纯手写,感觉的确很浪费时间,只有和煦踩过的坑,才不想看看外人也被坑。作者很懒,也想过弄个工具,最近先放代码吧,方便须求的人copy。

ctx.lineTo(75,45);

个体公众号(ZEROFC_DEV),关于web开拓的,迎接关怀O(∩_∩)O~

<title>canvas翻角效果</title>

  1. 五角星

            ctx.textAlign = 'center';

由于网络海人民广播广播台湾大学都是用成千上万算法和逻辑使用canvas实行绘图,但不常也无从消除部分小众要求

var gradient = ctx.createLinearGradient(50,50,75,75);

<script type="text/javascript">
    
        function draw(id) {
                var canvas=document.getElementById(id);
                if(canvas==null)
                return false;
                var ctx=canvas.getContext('2d');
                ctx.beginPath();
                ctx.moveTo(65,50);
                ctx.lineTo(156,70);
                ctx.lineTo(190,38);
                ctx.bezierCurveTo(222,10,250,40,230,70);
                ctx.lineTo(195,106);
                ctx.lineTo(218,204);
                ctx.lineTo(186,228);
                ctx.lineTo(150,146);
                ctx.lineTo(110,186);
                ctx.bezierCurveTo(118,200,126,220,98,234);
                ctx.lineTo(30,162);
                ctx.bezierCurveTo(30,134,70,140,78,152);
                ctx.lineTo(118,114);
                ctx.lineTo(40,78);
                ctx.lineTo(65,50);
                /*ctx.bezierCurveTo(75,37,70,25,50,25);
                ctx.bezierCurveTo(20,25,22,62.5,22,55);
                ctx.bezierCurveTo(20,80,40,102,75,120);
                ctx.bezierCurveTo(110,102,130,80,128,55);
                ctx.bezierCurveTo(128,55,130,25,100,25);
                ctx.bezierCurveTo(85,25,75,37,75,40);*/
                
                var gradient=ctx.createRadialGradient(0,0,0,0,0,150);
                gradient.addColorStop(0,"rgba(244,28,285,0.1)");
                gradient.addColorStop(1,"rgba(255,255,255,1)");
                
                ctx.strokeStyle = "red"; //设置或重返用于笔触的水彩、渐变
                ctx.stroke();
                
                ctx.fillStyle=gradient;
                ctx.fill();
        }
    </script>

            var gradient = ctx.createLinearGradient(points.x1 , points.y2 , points.x1 (disX/2) , points.y1 disY/2);

 

那正是说接下去绘制右上角的橘色区域就大致非常多了:

 

// 橘黄部分

    bezierCurveTo() 方法  通过采用表示二次贝塞尔曲线的钦赐调节点,向当前路径增加贰个点

        var points = {

<script>
        //function init() {
        
            var canvas = document.getElementById('stars');
            var ctx = canvas.getContext('2d');
            ctx.fillStyle = "#827839";
            //ctx.shadowColor = "#000000";
            ctx.shadowOffsetX = 1;
            ctx.shadowOffsetY = 12;
            ctx.shadowBlur = 18;
            
            
            // 伊始一条新路线
            ctx.beginPath();
            /*ctx.moveTo(15,150)   30   -8
            ctx.lineTo(100,140);        // 2
            ctx.lineTo(170,80);            // 3
            ctx.lineTo(230,140);        // 4
            ctx.lineTo(315,150);        // 5
            ctx.lineTo(230,200);        // 6
            ctx.lineTo(300,263);        // 7
            ctx.lineTo(170,220);        // 8
            ctx.lineTo(30,263);            // 9
            ctx.lineTo(100,200);        // 10
            
            //ctx.lineTo(15,150);    // 结束
            ctx.closePath();
            ctx.fill();*/
           
            ctx.moveTo(45,142);        // 起点
            ctx.lineTo(129,126);        // 2
            ctx.lineTo(172,40);            // 3
            ctx.lineTo(215,126);        // 4
            ctx.lineTo(299,142);        // 5
            ctx.lineTo(240,203);        // 6
            ctx.lineTo(252,288);        // 7
            ctx.lineTo(172,252);        // 8
            ctx.lineTo(92,288);            // 9
            ctx.lineTo(105,203);        // 10
            
            //ctx.lineTo(15,150);    // 结束
            ctx.closePath();
            ctx.fill();
        //}
        
        //window.addEventListener("load",init.false);
    </script>

</head>

 

        var speed = 1;

  1. 飞机
  1. ctx.globalCompositeOperation = 'source-atop'; //canvas层叠模式

 

<script>

 

                return ;

<script type="text/javascript">
        function draw(id) {
                var canvas=document.getElementById(id);
                if(canvas==null)
                return false;
                var ctx=canvas.getContext('2d');
                ctx.beginPath();
                ctx.moveTo(75,40);
                ctx.bezierCurveTo(75,37,70,25,50,25);
                ctx.bezierCurveTo(20,25,22,62.5,22,55);
                ctx.bezierCurveTo(20,80,40,102,75,120);
                ctx.bezierCurveTo(110,102,130,80,128,55);
                ctx.bezierCurveTo(128,55,130,25,100,25);
                ctx.bezierCurveTo(85,25,75,37,75,40);
                var gradient=ctx.createRadialGradient(0,0,0,0,0,150);
                gradient.addColorStop(0,"rgba(244,28,285,0.5)");
                gradient.addColorStop(1,"rgba(255,255,255,1)");
                ctx.fillStyle=gradient;
                ctx.fill();
        }

  1. var deg = Math.PI / 180;

  2. ctx.globalCompositeOperation = 'source-atop'; //canvas层叠模式

  3. ctx.beginPath();

  4. ctx.font = '14px Arial'; //设置字体大小 字体

  5. ctx.textAlign = 'center'; // 字体对齐方式

  6. ctx.translate(78 , 22);  // 移动canvas画布圆点

  7. ctx.rotate(45 * deg);    // 旋转画布

  8. ctx.fillStyle = '#fff';  // 设置文字颜色

  9. ctx.fillText('NEW' , 0 , 0); //文字绘制动作

  10. ctx.closePath();

图片 4

//    ctx.beginPath() //开启新的画笔路线

    提示:一次贝塞尔曲线要求八个点。前四个点是用以一遍贝塞尔总结中的调整点,第多个点是曲线的扫尾    点。曲线的伊始点是当下路径中最后贰个点。如若路线不设有,那么请使用 beginPath() 和 moveTo() 方     法来定义开首点。

            ctx.fill();

var ch = 100; //分辨率 , 其实直接从dom上取得恐怕越来越好些

            ctx.fillStyle = '#ff6600';

        

.container:before{content:"";position:absolute;left:50px;top:0;width:1px;height:102px;background:#fff;}

            

            ctx.clearRect(0,0,cw,ch);

 

            ctx.restore();

            ctx.save();

            ctx.strokeStyle = "#080";

</style>

//    ctx.quadraticCurveTo() //上下文(画笔)按贝塞尔曲线移动(轻易掌握为可控的曲线就可以)

            ctx.beginPath();

</script>

var canvas = document.querySelector('.myCanvas'); //获取canvas对应dom

举个例子咱们修改了旋转角度以及画布圆点,这种操作恐怕只在大家需求绘制倾斜的new的时候须要,中期可能就无需选择了。

            //更新速度地点

                    x1 : 100,

        function start(type){

            draw(points , type);

            ctx.lineTo(points.x1,points.y1);

            //曲线向右

//              console.log('改打开动画了');

// 文字绘制

            //直线向下

上边说一下贯彻思路。

  1. ctx.lineTo(75 , 45);

            ctx.rotate(45 * deg);

//    ctx.stroke() // 画线动作

然后

            if(disY < 0 && type == 'hide'){

        var ctx = canvas.getContext('2d');

也便是说beginPath到close帕特h之间标记着大家协和的二个完好无缺的美术阶段。

<!-- <script>

//    ctx.arc() //画圆

                    start('show');

</body>

            }

                    y2 : 0

  1. ctx.arc(60 , 40 , 5 , Math.PI , Math.PI / 2 , true);

                draw(points , type);

        function drawPageCorShow(points, disX , disY){

            var disY = Math.floor(points.y2 - points.y1);

            ctx.arc(points.x1 disX/5,points.y2 - (disY/5),disY/10,deg*180 , deg*90,true);

// 阴影部分

ctx.lineTo(100,0);

var cw = 100; //分辨率 , 其实直接从dom上收获也许越来越好些

draw();

        }

接下去绘制"new",实际上是利用canvas简单的文书绘制,代码如下:

            })

ctx.fillStyle = '#fff';//设置字体颜色

ctx.globalCompositeOperation = 'source-atop';//canvas层叠方式

对那些翻角效果的难点在于未有翻动的时候流露的是dom下边包车型大巴剧情,达成角度来讲纯dom

            //半圆向右

<style>

            ctx.stroke();

于是乎根据一样的步骤,水平向右:

 

                speed = 1;

</div>

        var aSpeed = 0.1;

ctx.fillStyle = gradient;

  1. ctx.quadraticCurveTo( 95 , 45 , 100 , 50 );

        function drawPageCor(points, disX , disY){

</script> -->

  • 将此动画分解成两有些,一部分是翻页出现的米黄三角区域,另三个是发自的橘色展示内容

  • 对于橘色的展现内容区域相对好一些,因为是贰个平整图形,而朱红区域相对较难

  1. ctx.lineTo(55 , 40);

        }

最后链接源点,闭合油画区域:

ctx.quadraticCurveTo(95,45,100,50);

ctx.font = '14px Arial';//设置字体大小 字体

            //闭合三角形

  1. <div class="container">

  2. <canvas class="myCanvas" width="100" height="100"></canvas>

  3. </div>

//     ctx.createLinearGradient() //成立canvas渐变对象

function drawMethod(){

ctx.fill();

                speed = -1;

        

            ctx.restore();

            ctx.quadraticCurveTo(points.x1 (disX/10),points.y1 disY/10 ,(points.x1 disX/10),points.y1 disY/2);

<meta name="viewport" content="width=device-width, initial-scale=1.0">

ctx.fillText('NEW',0,0);//文字绘制动作

// ctx.save() //保存上下文状态 (比方画笔尺寸 颜色 旋转角度)

            ctx.globalCompositeOperation = 'source-atop';

<body>

ctx.beginPath();//新建路线

                } , 2000)

右上角需求从无的景况撕开贰个符号,且有动画进程,上海教室是兑现的效率图,不是gif。

            x1 : 100,

ctx.moveTo(50,0);

            gradient.addColorStop(0 , '#ccc');

js中率先要做的是获得canvas对象

 

            ctx.save();

            ctx.moveTo(points.x1 , points.y1);

                    start('hide');

                aSpeed = .1;

        start('show');

幸亏canvas的画笔是存在"状态"的,通过 ctx.save();能够保留当前画笔的气象,通过ctx.restore();可以苏醒到上次画笔保存的景色。

想必方法列举的非常不足详尽,见谅。

        ctx.moveTo(0,0);

ctx.lineTo(55,40);

            ctx.lineTo(points.x2 - disX/2 , points.y2 - (disY / 10))

            

        function draw(points , type){

<html lang="en">

        }

于是第一个向右下的半弧完毕,此时canvas上一贯不任何绘制内容,因为还未有实行过绘制方法举个例子stroke或fill。

首先是绘制青白翻出的一部分,图形分解为如下几部分(请依据上海体育场地脑补):

            

            ctx.closePath();

                } , 2000)

            points.x1 -= speed;

            ctx.translate(78 , 22);

  1. function draw(){

  2. drawMethod(); //绘制三角等内容

  3. window.requestAnimationFrame(function(){

  4. draw();

  5. })

  6. }

  7. function drawMethod(){

  8. //...

  9. }

//     ctx.globalCompositeOperation //画笔的重叠情势

                points = {

<canvas class="myCanvas" width="100" height="100"></canvas>

            gradient.addColorStop(1 , '#000');

        var deg = Math.PI / 180;

gradient.addColorStop(0,'#ccc');

                }

        ctx.strokeWidth= 1;

  1. var gradient = ctx.createLinearGradient(50 , 50 , 75 , 75);

  2. gradient.addColorStop(0 , '#ccc');

  3. gradient.addColorStop(0.7 , '#111');

  4. gradient.addColorStop(1 , '#000');

                    x1 : 50,

}

            drawPageCor(points, disX , disY);

于是乎翻页效果的二分之一正是完毕了。

  • css动画的应用方案并不曾相出二个好的预谋: 于是捡起了遥远事先学的入门级其他canvas:
  1. ctx.quadraticCurveTo(55 , 5 , 55 , 25); // 可以理解为从(50,0)这个点划线到(55,25)这个点,中间会受到(55,5)这个点将直线想磁铁一样"吸"成曲线

            ctx.fillStyle = '#fff';

            x2 : 100,

            // 直线向右

ctx那么些水墨画上下文在这么些课程中起到的机能首要,它提供了特别强劲的api,举个例子用来画线、填充、写文字等,那样看来驾驭为画笔会特别明显一些。

  1. 左上角向右下的半弧 ╮

  2. 然后是竖直向下的竖线 |

  3. 接下来是向右的半圆 ╰

  4. 再然后是向右的横线

  5. 进而仍然向右下的半弧 ╮

  6. 最后是将线连接会源点

  1. ctx.lineTo(50 , 0);

                points = {

</html>

        var cw = 100;

                    x2 : 100,

var ctx = canvas.getContext('2d'); //此方法比较基础 , 意为获取canvas美术2d内容的工具(上下文)

            y1 : 0,

        

  1. ctx.moveTo(50,0);

ctx.fillStyle = '#ff6600';

ctx.lineTo(50,0);

//              console.log('改收起动画了');

//     ctx.fill() //对闭合区域拓宽填空

ctx.lineTo(50,0);

//    ctx.restore() //重返上次保存的上下文状态

ctx.arc(60,40,5,Math.PI,Math.PI/2,true);

            //画第一个曲线

然后重新行使贝塞尔曲线用第一步的思路画出向右下的弧:

 

  1. ctx.fillStyle = gradient;

  2. ctx.fill();

于是乎作者个人精晓到,在开拓canvas动画时,三个较好的习于旧贯正是,在beginPath在此以前先ctx.save();保存画笔状态,在closePath后 ctx.restore();光复在此之前的画笔状态,那样我们的每多少个制图阶段对于画笔的改变都将是不会有震慑的(个人经历)。

            //移動到地点 左上

代码中这一部分是指 我们绘制的文字new与橘色三角形区域的重叠关系,此办法取值很多,此处不做过多介绍,source-atop值能够使重叠区域保留,新绘制的内容在重叠区域以外的局地未有,以此到达new在内部的效果与利益。

        ctx.save();

            }else{

ctx.lineTo(100,50);

            var disX = Math.floor(points.x2 - points.x1);

                return ;

                }

            window.requestAnimationFrame(function(){

            gradient.addColorStop(0.7 , '#111');

<head>

                setTimeout(function(){

var deg = Math.PI/180;

由来,小编要说一点自个儿明白的canvas的描绘"套路"。

  1. ctx.beginPath();

  2. ctx.moveTo(50,0);

  3. ctx.lineTo(100,50);

  4. ctx.lineTo(100,0);

  5. ctx.lineTo(50,0);

  6. ctx.closePath();

  7. ctx.fillStyle = '#ff6600';

  8. ctx.fill();

进而对于大家接下去要绘制右上角橘色区域来讲,大家在绘制紫铜色区域此前率先要做的是:

        

            

 

  1. ctx.beginPath();

  2. ...

            //闭合图形

            

于是乎第一步 我们要先将画笔移动到胚胎地方:

我们须要在这几个轮回试行的函数中,将上述的绘图内容重复绘制,比如 :

  1. var canvas = document.querySelector('.myCanvas'); //获取canvas对应dom

  2. var ctx = canvas.getContext('2d'); //此方法较为基础 , 意为获取canvas绘画2d内容的工具(上下文)

  3. var cw = 100; //分辨率 , 其实直接从dom上获取可能更好些

  4. var ch = 100; //分辨率 , 其实直接从dom上获取可能更好些

*{margin:0;padding:0;}

<meta http-equiv="X-UA-Compatible" content="ie=edge">

                ctx.clearRect(0,0,cw,ch);

ctx.rotate(45*deg);//旋转画布

})

            drawPageCorShow(points , disX , disY);

.container:after{content:"";position:absolute;left:0px;top:50px;width:102px;height:1px;background:#fff;}

其不常候石绿区域的翻页就画完了,然后此时最早填写颜色:

此间效果须求运用的api如下(不做详细分解,可w3c自行查询):

以此时候我们接下去应该画向右的圆弧,那个时候再用贝塞尔曲线绘制实在有一些不太适宜,因为从图上来看,这里完全都以57%的圆,所以要使用canvas提供的画圆的api。

.container{background: #abcdef;display: inline-block;font-size:0;position:relative;}

  1. ctx.beginPath(); //新建路径

  2. ctx.closePath(); //闭合路径

                    y1 : 0,

var canvas = document.querySelector('.myCanvas');

ctx.closePath();

与此相类似我们就能够完结刷帧的功效了,于是接着大家要做的正是调节绘制时各样数值的参数。

            ctx.beginPath();

function draw(){

        }

ctx.fill();

ctx.closePath();//闭合路线

            ctx.beginPath();

同理,上述贝塞尔曲线能够明白为一条从( 75 , 45 ) 到 ( 100 , 50 )的线被 ( 95 , 45 )"吸"成曲线。

上述画圆的代码意为:以(60,40)点为圆心,5为半径,逆时针从180度绘制到90度,180度便是圆心的品位向左 达到点(55,40),与上一步连接上,然后又因为荧屏向下为正,90度在圆心正下方,所以绘制出此半圆。

                setTimeout(function(){

那七个方法中,translate的情趣为运动canvas画布的( 0 , 0 )点到 (78,22),然后旋转45度,再将文字渲染在原点,实际就是(78,22)这么些点上,此时我们对canvas的画笔做出了丰富大的改变。

接下去直线向下就是粗略的运动:

            }

<div class="container">

            ctx.lineTo(points.x2 , points.y2);

ctx.moveTo(50,0);

  1. ctx.closePath();

例如大家是以(50,0)为源点,(100,50)为终点那样的多个移动点为绘制标志的,借使大家将三个点举行仓库储存,况且每一遍试行drawMethod的时候更新点的地方,然后清空canvas,再绘制新的点 那么就可以达到canvas动起来的指标了。

            ctx.quadraticCurveTo(points.x2 -disX/10,points.y2 - (disY/10) ,points.x2,points.y2 );

                    y1 : 0,

 

<!DOCTYPE html>

            ctx.lineTo(points.x2 , points.y1);

接下来填充:

动画片拆分

到此地大家就开采好了翻角效果的一心体现的情事,那么怎么着让那个区域动起来吧?

ctx.beginPath();

        var ch = 100;

布局如上,这里要说一点踩过的坑是,canvas必供给安装上width 与 height,此处并不是为css中的width与height,而是写在dom上的特性。 因为dom上的width与height标志了canvas的分辨率(个人通晓), 所以此canvas画布分辨率为100*100,而显示尺寸是可以通过css调节。

对此上述代码中,文字的相关api是属于尚未难度的,只是设置而已,需求精晓的有的在于translate和rotate。

//    ctx.moveTo(x,y) //上下文移动到具体地方

            speed = aSpeed;

drawMethod();//绘制三角等内容

先从基础canvas使用办法聊起

                    x2 : 100,

此地须求使用h5提供的用来刷帧的函数 requestAnimationFrame

            

window.requestAnimationFrame(function(){

            ctx.lineTo(points.x1 disX / 10 , points.y2 - (disY/5));

//    ctx.lineTo(x,y) //上下文以划线的方式活动到某地方

            //重叠形式

ctx.text阿里gn = 'center';//字体对齐形式

            ctx.fillStyle = gradient;

            y2 : 0

gradient.addColorStop(1,'#000');

ctx.quadraticCurveTo(55,5,55,25);//能够精通为从(50,0)那么些点划线到(55,25)那一个点,中间会遭逢(55,5)那几个店将直线像磁贴同样“吸”成曲线

}

        ctx.strokeStyle = 'black';

ctx.translate(78,22);//移动canvas画布圆点

                    y2 : 50

            if(type === 'show'){

            ctx.font = '14px Arial';

此措施可粗略明了为16阿秒的反应计时器,可是厉害的是足以再相继境况中自动相称到可达到的对立顺遂的帧率,实际并不是定时器哈。

 

            points.y2 = speed;

于是右上角的橘色区域大家就绘制完结了。

            ctx.lineTo(points.x1 , points.y1);

文字绘制

            ctx.fillText('NEW' , 0 , 0);

            }else if(disY > 50 && type == 'show'){

            ctx.closePath();

大家经过上述代码成立三个从( 50 , 50 )点到(75 , 75)点的线性渐变,颜色从 #ccc 到 #111 到 #000,创设高光效果。

<meta charset="UTF-8">

本文由分分快三计划发布,转载请注明来源

关键词: 分分快三计划 JS JavaScript HTML5 canvas