金沙棋牌官方平台

当前位置:金沙棋牌 > 金沙棋牌官方平台 > 翻角效果,Canvas绘制图形

翻角效果,Canvas绘制图形

来源:http://www.logblo.com 作者:金沙棋牌 时间:2019-11-09 19:47

简单易行的 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 , 比方用于画线 , 填充 , 写文字等 , 那样看来精通为画笔会特别鲜Bellamy(Bellamy卡塔 尔(英语:State of Qatar)(Aptamil卡塔尔些;

那边效果需求动用的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);

当时大家接下去应该画向右的半圆 , 那时再用贝塞尔曲线绘制 实在有一点不太合适 , 因为从图上来看 , 这里完全是59%的圆 , 所以要动用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();保存画笔状态 , 在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>

出于英特网广大都以用非常多算法和逻辑使用canvas举行绘图,但一时也无从减轻部分小众须求

  canvas只支持意气风发种为主造型——矩形,全体别的形状都是透过叁个或多少个路子组合而成,以至是骨干的矩形也得以通过路线组合成。
风流倜傥、设置画笔属性   杜撰大家生存中画图的旗帜,我们首先是筛选合适的颜料和笔,相仿的道理,在canvas中画图相像也是基于须求,不断的去设置当前利用的颜料和线条类型。
安装当前使用的颜色   其余密封的图片都以有差十分少部分和填充部分构成。设置当前的水彩也是分两部分装置:

<html lang="en">

金沙棋牌官方平台 3

  • 安装填充色:context.fillStyle = color
  • 安装概况色:context.strokeStyle = color

<head>

    为了满意必要不可能写运算纯手写,以为的确很浪费时间,独有协调踩过的坑,才不想见见人家也被坑。小编很懒,也想过弄个工具,这段日子先放代码吧,方便必要的人copy。

  参数color能够是代表CSS颜色值的字符串,渐变对象恐怕图案对象。暗中认可景况下,线条和填充颜色都以深橄榄黄(CSS颜色值#000000)。
水彩的字符串表示   上面都是无庸置疑的值:

金沙棋牌官方平台,<meta charset="UTF-8">

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

// 那个 fillStyle 的值均为 '灰湖绿'  
ctx.fillStyle = "orange";  
ctx.fillStyle = "#FFA500";  
ctx.fillStyle = "rgb(255,165,0)";  
ctx.fillStyle = "rgba(255,165,0,1)";  

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

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

金沙棋牌官方平台 4借使您要给各样图形上差别的颜色,你要求重新安装 fillStyle或strokeStyle 的值,就如我们描绘时索要持续换分裂颜色的颜料相近。
安装折射率 1.设置全局折射率:context.globalAlpha = transparency value。
  这一个特性影响到 canvas 里全数图形的光滑度,有效的值范围是 0.0 (完全透明卡塔 尔(阿拉伯语:قطر‎到 1.0(完全不透明卡塔 尔(英语:State of Qatar),暗中认可是 1.0。例子如下所示:

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

    bezierCurveTo() 方法  通过利用表示三次贝塞尔曲线的钦赐调整点,向当前路径加多三个点

function draw2() {  
  var ctx = document.getElementById('lesson01').getContext('2d');  
  // draw background  
  ctx.fillStyle = '#FD0';  
  ctx.fillRect(0,0,75,75);  
  ctx.fillStyle = '#6C0';  
  ctx.fillRect(75,0,75,75);  
  ctx.fillStyle = '#09F';  
  ctx.fillRect(0,75,75,75);  
  ctx.fillStyle = '#F30';  
  ctx.fillRect(75,75,75,75);  
  ctx.fillStyle = '#FFF';  
  
  // set transparency value  
  ctx.globalAlpha = 0.2;  
  
  // Draw semi transparent circles  
  for (var i=0;i<7;i++){  
      ctx.beginPath();  
      ctx.arc(75,75,10+10*i,0,Math.PI*2,true);  
      ctx.fill();  
  }  
}  

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

    提示:一次贝塞尔曲线需求八个点。前多少个点是用以一回贝塞尔总括中的调节点,第3个点是曲线的扫尾    点。曲线的上马点是眼下路径中最终五个点。如若路线不设有,那么请使用 beginPath() 和 moveTo() 方     法来定义初叶点。

2.设置单个图形的折射率

<style>

 

  很粗大略,把rgba格式的字符串赋给fillStyle恐怕strokeStyle就足以了。
创设渐变色   canvas中大家也足以用线性也许径向的渐变来填充或描边。创制渐变色要通过上面多少个步骤:
1.创造渐变对象:

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

证实:互连网有高等算法的绘图,很利索也很有益于,假使不是特命全权大使情状,千万别用自个儿的不二诀窍,请上网右转看外人的案例,哈哈。

  • 线性渐变:context.createLinearGradient(x1,y1,x2,y2)
    主意选择4个参数,表示渐变的源点(x1,y1) 与终极(x2,y2)。
  • 通往渐变:context.createRadialGradient(x1,y1,r1,x2,y2,r2)
    情势接收6个参数,前八个概念贰个以(x1,y1)为原点,半径为r1的圆,后八个参数则定义另三个以(x2,y2)为原点,半径为r2的圆。

.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;}

☆ canvas画布节点(仅供参照他事他说加以考查)

2.给渐变对象上色:
  上色:gradientObject.addColorStop(position, color)
  方法接纳2个参数,position 参数必需是叁个 0.0 与 1.0 之间的数值,表示渐变中颜色所在的相对地方。举个例子,0.5 表示颜色会并发在正中间;假设第二个色标的该参数值不是0.0,则渐变会暗许以为从起源到第二个色标之间都以木色。

*{margin:0;padding:0;}

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

  color 参数必需是四个卓有功效的 CSS 颜色值(如 #FFF, rgba(0,0,0,1),等等)。
  能够依靠需求增加放肆七个色标(color stops卡塔尔国,也正是说渐变的色彩数目是随意的。不过要潜心保持色标定义顺序和它能够的意气风发黄金时代风流倜傥致,特别是当色标的岗位重叠的时候。
3.把渐变对象赋给图形的fillStyle或strokeStyle属性。

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

 

事举个例子下所示:

</style>

  1. 雨伞

function draw() {  
  var ctx = document.getElementById('lesson01').getContext('2d');  
  
  // Create gradients  
  var radgrad = ctx.createRadialGradient(45,45,10,52,50,30);  
  radgrad.addColorStop(0, '#A7D30C');  
  radgrad.addColorStop(0.9, '#019F62');  
  radgrad.addColorStop(1, 'rgba(1,159,98,0)');  
    
  var radgrad2 = ctx.createRadialGradient(105,105,20,112,120,50);  
  radgrad2.addColorStop(0, '#FF5F98');  
  radgrad2.addColorStop(0.75, '#FF0188');  
  radgrad2.addColorStop(1, 'rgba(255,1,136,0)');  
  
  var radgrad3 = ctx.createRadialGradient(95,15,15,102,20,40);  
  radgrad3.addColorStop(0, '#00C9FF');  
  radgrad3.addColorStop(0.8, '#00B5E2');  
  radgrad3.addColorStop(1, 'rgba(0,201,255,0)');  
  
  var radgrad4 = ctx.createRadialGradient(0,150,50,0,140,90);  
  radgrad4.addColorStop(0, '#F4F201');  
  radgrad4.addColorStop(0.8, '#E4C700');  
  radgrad4.addColorStop(1, 'rgba(228,199,0,0)');  
    
  // draw shapes  
  ctx.fillStyle = radgrad4;  
  ctx.fillRect(0,0,150,150);  
  ctx.fillStyle = radgrad3;  
  ctx.fillRect(0,0,150,150);  
  ctx.fillStyle = radgrad2;  
  ctx.fillRect(0,0,150,150);  
  ctx.fillStyle = radgrad;  
  ctx.fillRect(0,0,150,150);  
}  

</head>

<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>

创立图案填充效果 简单两步即化解。
1.创设图案pattern:context.createPattern(image,type)
  该方法接纳八个参数。Image 能够是二个 Image 对象的援引,恐怕另三个canvas 对象。Type 必须是下面的字符串值之风流洒脱:repeat,repeat-x,repeat-y 和 no-repeat。

<body>

 

2.pattern赋给fillStyle或strokeStyle属性。

<div class="container">

  1. 飞机

function draw() {  
  var ctx = document.getElementById('lesson01').getContext('2d');  
  
  // create new image object to use as pattern  
  var img = new Image();  
  img.src = 'Penguins.jpg';  
  img.onload = function(){  
  
    // create pattern  
    var ptrn = ctx.createPattern(img,'repeat');  
    ctx.fillStyle = ptrn;  
    ctx.fillRect(0,0,150,150);  
  
  }  

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

<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>

创办阴影效果(近来谷歌(Google卡塔尔国 Chrome 16.0.912.75依然不帮忙的)
  首假诺安装一下阴影效果的有关属性值:

</div>

 

context.shadowOffsetX = float
context.shadowOffsetY = float
context.shadowBlur = float
context.shadowColor = color

<!-- <script>

  1. 五角星

shadowOffsetX和shadowOffsetY用来设定阴影在X和Y轴的延伸距离,它们是不受转换矩阵所影响的。负值表示阴影会往上或左延伸,正值则意味着会往下或右延伸,他们私下认可都以0。
shadowBlur用于设定阴影的歪曲程度,其数值并不跟像素数量挂钩,也不受转变矩阵的影响,默认为0。
shadowColor用于设定阴影效果的延伸,值能够是正式的CSS颜色值,暗中认可是全透明的蓝色。

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

<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>

function draw3() {  
  var ctx = document.getElementById('lesson01').getContext('2d');  
  
  ctx.shadowOffsetX = 3;  
  ctx.shadowOffsetY = 3;  
  ctx.shadowBlur = 3;  
  ctx.shadowColor = "rgba(100, 100, 0, 0.5)";  
   
  ctx.font = "20px Times New Roman";  
  ctx.fillStyle = "Black";  
  ctx.fillText("Sample String", 5, 30);  
}  

var ctx = canvas.getContext('2d'); //此方法相比底蕴 , 意为得到canvas油画2d内容的工具(上下文)

 

设置画笔的门类 画笔粗细:context.lineWidth = value
  那性格子设置当前绘线的粗细。属性值必需为正数。暗中认可值是1.0。

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

  1. 桃心

  线宽是指给定路线的中央到两边的粗细。换句话说便是在渠道的两侧各绘制线宽的一半。因为画布的坐标并不和像素直接对应,当需求得到精确的品位或垂直线的时候要极其注意。
端点样式:context.lineCap = type
  属性 lineCap 的指决定了线段端点彰显的表率。它可以为下边包车型地铁二种的里边之风度翩翩:butt,round 和 square。暗中认可是 butt。各个设置完的效应如下图lineCap部分从左到右所示。
连接点样式:context.lineJoin = type
  lineJoin 的属性值决定了图片中两线段连接处所出示的指南。它能够是这三种之风度翩翩:round, bevel 和 miter。默许是 miter。各类设置完的成效如下图lineJoin部分从上到下所示。
斜面连接约束:context.miterLimit = value
  当使用miter效果时,线段的外场边缘会延伸交汇于一些上。线段直接夹角非常大的,交点不会太远,但当夹角降低时,交点间隔会呈指数级增大。那个时候能够用miterLimit属性设定外延交点与连接点的最大间隔,假如交点间距超过此值,连接效果会成为了 bevel。

var ch = 100; //分辨率 , 其实直接从dom上拿到只怕越来越好些

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

 金沙棋牌官方平台 5

 

    </script>

事举例下:

 

村办大伙儿号(ZEROFC_DEV),关于web开采的,招待关注O(∩_∩)O~

function draw6() {  
  var ctx = document.getElementById('lesson01').getContext('2d');  
  var lineCap = ['butt','round','square'];  
  
  // Draw guides  
  ctx.strokeStyle = '#09f';  
  ctx.beginPath();  
  ctx.moveTo(10,10);  
  ctx.lineTo(140,10);  
  ctx.moveTo(10,140);  
  ctx.lineTo(140,140);  
  ctx.stroke();  
  
  // Draw lines  
  ctx.strokeStyle = 'black';  
  for (var i=0;i<lineCap.length;i++){  
    ctx.lineWidth = 15;  
    ctx.lineCap = lineCap[i];  
    ctx.beginPath();  
    ctx.moveTo(25+i*50,10);  
    ctx.lineTo(25+i*50,140);  
    ctx.stroke();  
  }  
}  
function draw() {  
  var ctx = document.getElementById('lesson01').getContext('2d');  
  var lineJoin = ['round','bevel','miter'];  
  ctx.lineWidth = 10;  
  for (var i=0;i<lineJoin.length;i++){  
    ctx.lineJoin = lineJoin[i];  
    ctx.beginPath();  
    ctx.moveTo(-5,5+i*40);  
    ctx.lineTo(35,45+i*40);  
    ctx.lineTo(75,5+i*40);  
    ctx.lineTo(115,45+i*40);  
    ctx.lineTo(155,5+i*40);  
    ctx.stroke();  
  }  
}  

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

金沙棋牌官方平台 6

二、绘制轻松矩形   矩形是独步一时的主干图形,canvas提供了第一手的API帮助。

//    ctx.restore() //再次来到上次保存的上下文状态

  • context.fillRect(x,y,width,height) : 绘制带填充色的矩形。
  • context.strokeRect(x,y,width,height) : 绘制矩形外框。
  • context.clearRect(x,y,width,height) : 清空钦命的矩形区域,并安装该区域是透明的(Transparent)。
    它们都选取两个参数, x 和 y 钦定矩形左上角(相对于原点)的岗位,width 和 height 是矩形的宽和高。

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

  除了这种办法,还足以应用绘图路径的秘籍绘制矩形,那些参看路线绘图部分。

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

绘图矩形的例子如下:

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

function draw(){
  var canvas = document.getElementById('tutorial');
  if (canvas.getContext){
    var ctx = canvas.getContext('2d');

//    ctx.quadraticCurveTo() //上下文(画笔)按贝塞尔曲线移动(简单了然为可控的曲线就能够)

    ctx.fillRect(25,25,100,100);
    ctx.clearRect(45,45,60,60);
    ctx.strokeRect(50,50,50,50);
  }
}

//    ctx.arc() //画圆

三、路线绘图

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

  cavas只提供了绘图矩形的API,其余的图纸都以靠路线绘制。

//    ctx.close帕特h() //关闭当前画笔路径

制图二个图形首要的历程如下:
1.开发银行路径
艺术:使用context.beginPath()运转路径绘图。
  在内部存款和储蓄器里,路线是以意气风发组子路线(直线,弧线等卡塔 尔(阿拉伯语:قطر‎的款式储存的,它们一齐组成三个图纸。每回调用 beginPath,子路线组都会被重新初始化,然后能够绘制新的图形。
2.平移画笔到源点
形式:使用moveTo(x, y)移动漫笔。
  就算超多图案的时候,用不到那么些点子。大家也无法用那些主意来画什么,可是你能够把它想象成是把笔聊起,并从贰个点运动到另三个点的长河。当您绘制不联系的必由之路的时候,你就可以有这些动作了。
当 canvas 开首化大概调用 beginPath 的时候,起首坐标设置正是原点(0,0)。不常候,大家供给moveTo方法将胚胎坐标移至其余地点,用于绘制不接二连三的路径。
3.内部存款和储蓄器中绘制线段
画直线:lineTo(x, y)
  该格局接收终极的坐标(x,y卡塔 尔(英语:State of Qatar)作为参数。初步坐标决议于前一路线,前一路线的尖峰即眼下路径的起源,发轫坐标经常也得以由此moveTo方法来设置。
画圆弧:arc(x, y, radius, startAngle, endAngle, anticlockwise)
  大家用 arc 方法来绘制弧线或圆,方法选取三个参数:x,y 是圆心坐标,radius 是半径,startAngle 和 endAngle 分别是起末弧度(以 x 轴为规范卡塔尔国,anticlockwise 为 true 表示逆时针,反之顺时针。
注意:arc 方法里用到的角度是以弧度为单位并非度。度和弧度直接的转变能够用那个表明式:var radians = (Math.PI/180)*degrees;
画三次贝塞尔曲线:quadraticCurveTo(cp1x, cp1y, x, y)
画一遍贝塞尔曲线:bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
  贝塞尔曲线 ,它能够是一次和二遍方的款型,经常用于绘制复杂而有规律的形态。它们都有八个起源多少个极限(下图中的蓝点卡塔尔,但一回方贝塞尔曲线唯有二个(青白卡塔 尔(阿拉伯语:قطر‎调控点点卡塔尔而三回方贝塞尔曲线有四个。
  参数x和y是终极坐标,cp1x和 cp1y是首先个调控点的坐标,cp2x和cp2y是第一个的。
  使用贰遍方和二遍方的贝塞尔曲线是风流倜傥对意气风发有挑衅的,因为缺乏直观性。理论上风流倜傥经有意志力,再冗杂的图纸都得以绘制出来的。

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

金沙棋牌官方平台 7

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

制图矩形路线:context.rect(x, y, width, height)
  当rect方法被调用时,moveTo方法会自动被调用,参数为(0,0),于是开端坐标又重作冯妇成起首原点了。
4.关门路径
艺术:使用context.closePath()关闭路线。

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

  该措施它会尝试用直线连接当前端点与早先端点来关闭路线,但如若图形已经停业大概独有一个点,它会怎么都不做,这一步在一些景况而不是必需的,比如动用fill()绘制实际图形的时候,就不需求先调用closePath。
5.绘制路线到canvas
画图纸边框:context.stroke()
填充实心图形:context.fill()

ctx.lineTo(50,0);

最终这一步是调用 stroke或 fill方法,这个时候,图形才是实在的绘图到 canvas 上去。

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

金沙棋牌官方平台 8调用stroke在此以前务要求先调用关闭路线方法closePath。而调用fill从前没有必要调用closePath关闭路线,调用fill时路径会自动关闭。

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

贰个繁缛的例证如下:

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

function draw() {
  var ctx = document.getElementById('lesson01').getContext('2d');
  roundedRect(ctx,12,12,150,150,15);
  roundedRect(ctx,19,19,150,150,9);
  roundedRect(ctx,53,53,49,33,10);
  roundedRect(ctx,53,119,49,16,6);
  roundedRect(ctx,135,53,49,33,10);
  roundedRect(ctx,135,119,25,49,10);

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

  ctx.beginPath();
  ctx.arc(37,37,13,Math.PI/7,-Math.PI/7,false); //chiensexu  ???true??,??
  ctx.lineTo(31,37);
  ctx.fill();
  for(i=0;i<8;i++){
    ctx.fillRect(51+i*16,35,4,4);
  }
  for(i=0;i<6;i++){
    ctx.fillRect(115,51+i*16,4,4);
  }
  for(i=0;i<8;i++){
    ctx.fillRect(51+i*16,99,4,4);
  }
  ctx.beginPath();
  ctx.moveTo(83,116);
  ctx.lineTo(83,102);
  ctx.bezierCurveTo(83,94,89,88,97,88);
  ctx.bezierCurveTo(105,88,111,94,111,102);
  ctx.lineTo(111,116);
  ctx.lineTo(106.333,111.333);
  ctx.lineTo(101.666,116);
  ctx.lineTo(97,111.333);
  ctx.lineTo(92.333,116);
  ctx.lineTo(87.666,111.333);
  ctx.lineTo(83,116);
  ctx.fill();
  ctx.fillStyle = "white";
  ctx.beginPath();
  ctx.moveTo(91,96);
  ctx.bezierCurveTo(88,96,87,99,87,101);
  ctx.bezierCurveTo(87,103,88,106,91,106);
  ctx.bezierCurveTo(94,106,95,103,95,101);
  ctx.bezierCurveTo(95,99,94,96,91,96);
  ctx.moveTo(103,96);
  ctx.bezierCurveTo(100,96,99,99,99,101);
  ctx.bezierCurveTo(99,103,100,106,103,106);
  ctx.bezierCurveTo(106,106,107,103,107,101);
  ctx.bezierCurveTo(107,99,106,96,103,96);
  ctx.fill();
  ctx.fillStyle = "black";
  ctx.beginPath();
  ctx.arc(101,102,2,0,Math.PI*2,true);
  ctx.fill();
  ctx.beginPath();
  ctx.arc(89,102,2,0,Math.PI*2,true);
  ctx.fill();
}

ctx.fillStyle = gradient;

function roundedRect(ctx,x,y,width,height,radius){
  ctx.beginPath();
  ctx.moveTo(x,y+radius);
  ctx.lineTo(x,y+height-radius);
  ctx.quadraticCurveTo(x,y+height,x+radius,y+height);
  ctx.lineTo(x+width-radius,y+height);
  ctx.quadraticCurveTo(x+width,y+height,x+width,y+height-radius);
  ctx.lineTo(x+width,y+radius);
  ctx.quadraticCurveTo(x+width,y,x+width-radius,y);
  ctx.lineTo(x+radius,y);
  ctx.quadraticCurveTo(x,y,x,y+radius);
  ctx.stroke();
}

ctx.fill();

结果如下:

// 橘黄部分

金沙棋牌官方平台 9

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

 

ctx.moveTo(50,0);

实用参谋: 合法参照他事他说加以侦查文书档案以致API详细表达:

ctx.lineTo(100,50);

work/multipage/the-canvas-element.html
权威开垦入门:

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自行查询卡塔 尔(英语:State of Qatar):

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

这时候大家接下去应该画向右的弧形,此时再用贝塞尔曲线绘制实在有一点不太对劲,因为从图上来看,这里完全部是60%的圆,所以要选用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绘制图形

关键词:

上一篇:没有了

下一篇:没有了