>

翻角效果,canvas翻角效果

- 编辑:至尊游戏网站 -

翻角效果,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);

今年我们接下去应该画向右的半圆 , 那一年再用贝塞尔曲线绘制 实在有一些不太合适 , 因为从图上来看 , 这里完全部是1/3的圆 , 所以要接受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.begin帕特h(); ctx.font = '14px Arial'; //设置字体大小 字体 ctx.text阿里gn = '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();保存画笔状态 , 在closePath后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

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

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

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

<style>

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

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

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

*{margin:0;padding:0;}

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

</style>

</head>

<body>

<div class="container">

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

</div>

<!-- <script>

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

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

var cw = 100; //分辨率 , 其实直接从dom上获取大概越来越好些

var ch = 100; //分辨率 , 其实直接从dom上获得大概越来越好些

 

 

// 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 //画笔的交汇方式

// 阴影部分

ctx.moveTo(50,0);

ctx.quadraticCurveTo(55,5,55,25);//能够知晓为从(50,0)这几个点划线到(55,25)那一个点,中间会受到(55,5)那个店将直线像磁贴相仿“吸”成曲线

ctx.lineTo(55,40);

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

ctx.lineTo(75,45);

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

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');

ctx.fillStyle = gradient;

ctx.fill();

// 橘黄部分

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();

// 文字绘制

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();

function draw(){

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

window.requestAnimationFrame(function(){

draw();

})

function drawMethod(){

}

}

</script> -->

<script>

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

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

        var cw = 100;

        var ch = 100;

        var percent = 0;

        var points = {

            x1 : 100,

            y1 : 0,

            x2 : 100,

            y2 : 0

        }

        var speed = 1;

        var aSpeed = 0.1;

        ctx.moveTo(0,0);

        ctx.strokeStyle = 'black';

        ctx.strokeWidth= 1;

        ctx.save();

        var deg = Math.PI / 180;

        

        function start(type){

            if(type === 'show'){

                points = {

                    x1 : 100,

                    y1 : 0,

                    x2 : 100,

                    y2 : 0

                }

                aSpeed = .1;

                speed = 1;

            }else{

                points = {

                    x1 : 50,

                    y1 : 0,

                    x2 : 100,

                    y2 : 50

                }

                aSpeed = -.1;

                speed = -1;

            }

            draw(points , type);

        }

        

        function draw(points , type){

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

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

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

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

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

                setTimeout(function(){

                    start('show');

                } , 2000)

                return ;

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

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

                setTimeout(function(){

                    start('hide');

                } , 2000)

                return ;

            }

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

            drawPageCorShow(points , disX , disY);

            drawPageCor(points, disX , disY);

            window.requestAnimationFrame(function(){

                draw(points , type);

            })

        }

        

        function drawPageCorShow(points, disX , disY){

            ctx.save();

            ctx.beginPath();

            //闭合三角形

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

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

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

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

            ctx.closePath();

            ctx.strokeStyle = "#080";

            ctx.stroke();

            

            ctx.fillStyle = '#ff6600';

            ctx.fill();

            //重叠情势

            ctx.globalCompositeOperation = 'source-atop';

            

            ctx.beginPath();

            ctx.font = '14px Arial';

            ctx.textAlign = 'center';

            ctx.translate(78 , 22);

            ctx.rotate(45 * deg);

            ctx.fillStyle = '#fff';

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

            ctx.closePath();

            ctx.restore();

            

        }

        

        function drawPageCor(points, disX , disY){

            ctx.save();

            ctx.beginPath();

            //移動到地点 左上

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

            //画第二个曲线

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

            //直线向下

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

            //半圆向右

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

            // 直线向右

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

            //曲线向右

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

            //闭合图形

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

            

            ctx.closePath();

            

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

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

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

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

            

            ctx.fillStyle = gradient;

            ctx.fill();

            ctx.restore();

            //更新速度地方

            points.x1 -= speed;

            points.y2 += speed;

            speed += aSpeed;

        }

        start('show');

</script>

</body>

</html>

 

右上角必要从无的情形撕开一个符号,且有动画进程,上海教室是完成的功效图,不是gif。

对那个翻角效果的困难在于未有翻动的时候露出的是dom下边包车型大巴剧情,完毕角度来讲纯dom

  • css动画的解决方案并从未相出三个好的心计跋山涉水的近义词于是捡起了绵绵事先学的入门级其他canvas跋山涉水的近义词

下边说一下得以完结思路。

动画拆分

  • 将此动画分解成两片段,大器晚成部分是翻页出现的黄绿三角区域,另三个是发泄的橘色展示内容

  • 对于橘色的呈现内容区域绝对好一些,因为是多个法则图形,而浅绛红区域绝对较难

先从基础canvas使用方法提及

  1. <div class="container">

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

  3. </div>

 

布局如上,这里要说一点踩过的坑是,canvas必定要安装上width 与 height,此处并不是为css中的width与height,而是写在dom上的性质。 因为dom上的width与height标记了canvas的分辨率(个人掌握), 所以此canvas画布分辨率为100*100,而彰显尺寸是足以经过css调整。

js中首先要做的是获取canvas对象

  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上获取可能更好些

ctx这几个油画上下文在此个科目中起到的功能重大,它提供了老大强盛的api,比如用来画线、填充、写文字等,那样看来领悟为画笔会越来越显著一些。

此处效果要求运用的api如下(不做详细分解,可w3c自行查询)爬山涉水

  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 //画笔的重叠模式

大概方法列举的非常不够详尽,见谅。

第一是绘制土红翻出的局地,图形分解为如下几有的(请根据上图脑补)爬山涉水

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

  2. 接下来是竖直向下的竖线 |

  3. 下一场是向右的半圆 ╰

  4. 再然后是向右的横线

  5. 随之依旧向右下的半弧 ╮

  6. 说起底是将线连接会源点

于是乎第一步 大家要先将画笔移动到起先地方爬山涉水

  1. ctx.moveTo(50,0);

然后

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

于是乎第四个向右下的半弧完毕,此时canvas上未有其他绘制内容,因为尚未曾实践过绘制方法举例stroke或fill。

接下去直线向下就是简约的位移跋山涉水的近义词

  1. ctx.lineTo(55 , 40);

其有时候我们接下去应该画向右的拱形,这年再用贝塞尔曲线绘制实在有一些不太方便,因为从图上来看,这里完全部都以三分之二的圆,所以要选择canvas提供的画圆的api。

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

上述画圆的代码意为跋山涉水的近义词以(60,40)点为圆心,5为半径,逆时针从180度绘制到90度,180度正是圆心的等级次序向左 达到点(55,40),与上一步连接上,然后又因为荧屏向下为正,90度在圆心正下方,所以绘制出此半圆。

于是依据近似的步子,水平向右爬山涉水

  1. ctx.lineTo(75 , 45);

接下来再次利用贝塞尔曲线用第一步的笔触画出向右下的弧跋山涉水的近义词

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

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

最终链接源点,闭合美术区域跋山涉水的近义词

  1. ctx.lineTo(50 , 0);

以此时候大青区域的翻页就画完了,然后此时起头填写颜色爬山涉水

  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');

小编们透过上述代码创制贰个从( 50 , 50 )点到(75 , 75)点的线性渐变,颜色从 #ccc 到 #111 到 #000,创立泪腺炎效果。

下一场填充跋山涉水的近义词

  1. ctx.fillStyle = gradient;

  2. ctx.fill();

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

从那之后,笔者要说一点自身理解的canvas的点染"套路"。

对此上述教程中,有一步我们利用了三个词叫做闭合,闭合的定义在canvas中是真是存在的,对于fill方法来讲,填充的间距是有多个空间尺寸才可以的,譬如大家描绘的这么些灰黄的三角,参加大家最后未有将终点与起源相连接,同样canvas会活动帮大家链接最终一笔美术的职位到起源,强制行程闭合空间,而这么大家想再多画多少个新的关闭空间就劳动了,所以canvas提供了之类api 新建闭合路线爬山涉水

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

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

 

于是对于大家接下去要绘制右上角橘色区域来说,大家在绘制乌紫区域早前率先要做的是跋山涉水的近义词

 

  1. ctx.beginPath();

  2. ...

下一场在fill以前我们相应 爬山涉水

  1. ctx.closePath();

相当于说beginPath到closePath之间标志着大家和好的二个总体的描绘阶段。

那么接下去绘制右上角的橘色区域就大致非常多了爬山涉水

  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();

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

文字绘制

接下去绘制"new",实际上是选用canvas轻松的公文绘制,代码如下跋山涉水的近义词

  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();

对此上述代码中,文字的相关api是属于未有难度的,只是设置而已,需求知道的风流倜傥部分在于translate和rotate。

那多个方法中,translate的意趣为移动canvas画布的( 0 , 0 )点到 (78,22),然后旋转45度,再将文字渲染在原点,实际正是(78,22)这些点上,此时大家对canvas的画笔做出了要命大的更换。

举个例子大家改进了旋转角度以至画布圆点,这种操作只怕只在大家需求绘制偏斜的new的时候需求,早先时期可能就不须求运用了。

幸亏canvas的画笔是存在"状态"的,通过 ctx.save();能够保留当前画笔的状态,通过ctx.restore();能够过来到上次画笔保存的景况。

于是乎笔者个人领悟到,在支付canvas动画时,叁个较好的习贯便是,在beginPath以前先ctx.save();保存画笔状态,在closePath后 ctx.restore();还原早先的画笔状态,那样大家的每贰个制图阶段对于画笔的退换都将是不会有震慑的(个人经历)。

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

 

代码中那有些是指 我们绘制的文字new与橘色三角形区域的重叠关系,此措施取值很多,此处不做过多介绍,source-atop值能够使重叠区域保留,新绘制的从头到尾的经过在重叠区域以外的风姿罗曼蒂克部分未有,以此到达new在中间的作用。

到此地大家就开荒好了翻角效果的一心体现的情景,那么如何让这几个区域动起来吧?

这里要求接纳h5提供的用于刷帧的函数 requestAnimationFrame

此方法可粗略领悟为16阿秒的反应计时器,不过厉害的是足以再相继情况中活动相称到可高达的对峙顺遂的帧率,实际而不是反应计时器哈。

咱俩要求在这里个轮回实施的函数中,将上述的绘图内容重复绘制,比方 跋山涉水的近义词

  1. function draw(){

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

  3. window.requestAnimationFrame(function(){

  4. draw();

  5. })

  6. }

  7. function drawMethod(){

  8. //...

  9. }

这么我们就足以高达刷帧的作用了,于是接着大家要做的正是决定绘制时各类数值的参数。

比如大家是以(50,0)为源点,(100,50)为终点那样的多个运动点为绘制标志的,假如大家将多个点展张开客栈储,并且每一次实施drawMethod的时候更新点的职位,然后清空canvas,再绘制新的点 那么就足以达到canvas动起来的指标了。

本文由门户名站发布,转载请注明来源:翻角效果,canvas翻角效果