澳门新萄京官方网站-www.8455.com-澳门新萄京赌场网址

澳门新萄京官方网站:CSS3入门体系,canvas纯绘制

2019-08-24 作者:澳门新萄京赌场网址   |   浏览(92)

简言之的 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);

以此时候我们接下去应该画向右的半圆 , 今年再用贝塞尔曲线绘制 实在有一点点不太合适 , 因为从图上来看 , 这里完全部都以三分之二的圆 , 所以要使用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中画图一样也是依据须求,不断的去设置当前利用的颜色和线条类型。
安装当前使用的水彩   别的密封的图纸都以有大致部分和填充部分构成。设置当前的颜料也是分两部分设置:

Web大前端时期之:HTML5 CSS3入门连串:

<html lang="en">

澳门新萄京官方网站 3

  • 安装填充色:context.fillStyle = color
  • 安装轮廓色:context.strokeStyle = color

作者们先看看画布的魅力:

<head>

    为了餍足急需不可能写运算纯手写,认为真的很浪费时间,独有和煦踩过的坑,才不想看到人家也被坑。小编很懒,也想过弄个工具,近期先放代码吧,方便须要的人copy。

  参数color能够是表示CSS颜色值的字符串,渐变对象或然图案对象。暗许情况下,线条和填充颜色都是普鲁士蓝(CSS颜色值#000000)。
颜色的字符串表示   上面都以不容置疑的值:

澳门新萄京官方网站 4

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

澳门新萄京官方网站 5

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

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

澳门新萄京官方网站 6假若您要给每一个图形上分化的颜色,你必要重新安装 fillStyle或strokeStyle 的值,就像大家描绘时索要不断换不一致颜色的颜料一样。
安装发光度 1.装置全局折射率:context.globalAlpha = transparency value。
  那性情格影响到 canvas 里全体图形的折射率,有效的值范围是 0.0 (完全透明)到 1.0(完全不透明),暗中认可是 1.0。例子如下所示:

澳门新萄京官方网站 7

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

澳门新萄京官方网站 8

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

    提示:三遍贝塞尔曲线须求五个点。前三个点是用于一遍贝塞尔计算中的调控点,第八个点是曲线的截至   点。曲线的始发点是近些日子路径中最后一个点。假设路线海市蜃楼,那么请使用 beginPath() 和 moveTo() 方     法来定义开端点。

2.安装单个图形的折射率

澳门新萄京官方网站 9

<style>

 

  非常粗大略,把rgba格式的字符串赋给fillStyle大概strokeStyle就足以了。
制造渐变色   canvas中大家也足以用线性或许径向的渐变来填充或描边。创立渐变色要因此下边多少个步骤:
1.创建渐变对象:

澳门新萄京官方网站 10

.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的圆。

澳门新萄京官方网站 11

.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 表示颜色会见世在正中间;如若第1个色标的该参数值不是0.0,则渐变会私下认可感觉从起源到第贰个色标之间都是石黄。

canvas暗中同意是宽300px,高150px;

*{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;}

 

事举个例子下所示:

1.概念一个id

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

<canvas id="canvasOne" width="300" height="300"></canvas>

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

2.获取canvas对象

<body>

 

2.pattern赋给fillStyle或strokeStyle属性。

var canvasObj = document.getElementById('canvasOne');

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

3.通过getContext获取上下文

<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依旧不匡助的)
  主倘诺设置一下黑影效果的相关属性值:

var context = canvasObj.getContext("2d");

</div>

 

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

这几天帮忙2d制图

<!-- <script>

  1. 五角星

shadowOffsetX和shadowOffsetY用来设定阴影在X和Y轴的延长距离,它们是不受转换矩阵所影响的。负值表示阴影会往上或左延伸,正值则表示会往下或右延伸,他们暗许都是0。
shadowBlur用于设定阴影的模糊程度,其数值并不跟像素数量挂钩,也不受调换矩阵的熏陶,默感觉0。
shadowColor用于设定阴影效果的延长,值可以是明媒正娶的CSS颜色值,暗许是全透明的白灰。

4.透过javascript进行绘图

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

context.fillStyle = "red";

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。

context.fillRect(125, 125, 50, 50);

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

 澳门新萄京官方网站 12

在x坐标为125,y坐标为125的地方绘制贰个长为50宽为50的圆锥形

 

    </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() //保存上下文状态 (比方画笔尺寸 颜色 旋转角度)

澳门新萄京官方网站 13

二、绘制简单矩形   矩形是独一无二的为主图形,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 是矩形的宽和高。

绘制300*300画布的对角线

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

  除了这种格局,还是能利用绘图路线的措施绘制矩形,那个参看路线绘图部分。

beginPath()

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

绘制矩形的例证如下:

起来绘制

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

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

moveTo

//    ctx.quadraticCurveTo() //上下文(画笔)按贝塞尔曲线移动(老妪能解为可控的曲线就能够)

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

直线起源

//    ctx.arc() //画圆

三、路径绘图

lineTo

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

  cavas只提供了绘图矩形的API,别的的图片都以靠路线绘制。

直线终点

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

绘制四个图纸首要的进程如下:
1.起动路线
措施:使用context.beginPath()运转路线绘图。
  在内部存款和储蓄器里,路径是以一组子路线(直线,弧线等)的款型积攒的,它们一齐构成多个图形。每一次调用 beginPath,子路线组都会被重新恢复设置,然后能够绘制新的图样。
2.平移画笔到源点
措施:使用moveTo(x, y)移动画笔。
  尽管非常多图案的时候,用不到那些方式。大家也不可能用这几个方法来画什么,可是你可以把它想象成是把笔谈起,并从二个点运动到另一个点的进度。当您绘制不挂钩的路子的时候,你就能够有那一个动作了。
当 canvas 最早化只怕调用 beginPath 的时候,起先坐标设置正是原点(0,0)。不常候,我们须求moveTo方法将早先坐标移至另外地点,用于绘制不总是的门道。
3.内部存款和储蓄器中绘制线段
画直线:lineTo(x, y)
  该措施接受终极的坐标(x,y)作为参数。初步坐标取决于前一路线,前一路线的极端即日前路径的起点,初始坐标平常也得以经过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是第2个的。
  使用贰遍方和一回方的贝塞尔曲线是分外有挑衅的,因为缺少直观性。理论上一经有耐心,再繁杂的图样都足以绘制出来的。

stroke()

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

澳门新萄京官方网站 14

绘图直线

//     ctx.fill() //对闭合区域开展填空

 

<canvas id="canvasOne" width="300" height="300"></canvas>

//     ctx.globalCompositeOperation //画笔的重合形式

 

<script type="text/javascript">

// 阴影部分

 

var canvasObj = document.getElementById('canvasOne');

ctx.moveTo(50,0);

 

var context = canvasObj.getContext("2d");

ctx.quadraticCurveTo(55,5,55,25);//能够驾驭为从(50,0)那几个点划线到(55,25)那几个点,中间会蒙受(55,5)那个店将直线像磁贴同样“吸”成曲线

 

//context.strokeStyle = "#ff6a00";

ctx.lineTo(55,40);

 

context.beginPath();

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

 

context.moveTo;

ctx.lineTo(75,45);

绘图矩形路线:context.rect(x, y, width, height)
  当rect方法被调用时,moveTo方法会自动被调用,参数为(0,0),于是早先坐标又大张旗鼓成开头原点了。
4.关闭路径
主意:使用context.closePath()关闭路线。

context.lineTo;

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

  该格局它会尝试用直线连接当前端点与伊始端点来关闭路线,但借使图形已经停业也许独有三个点,它会怎样都不做,这一步在有些意况并不是必得的,举个例子利用fill()绘制实际图形的时候,就无需先调用close帕特h。
5.制图路线到canvas
画图片边框:context.stroke()
填充实心图形:context.fill()

context.stroke();

ctx.lineTo(50,0);

末尾这一步是调用 stroke或 fill方法,那时,图形才是实在的绘图到 canvas 上去。

context.moveTo;

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

澳门新萄京官方网站 15调用stroke在此以前必须要先调用关闭路线方法closePath。而调用fill在此之前不须求调用closePath关闭路线,调用fill时路线会自动关闭。

context.lineTo;

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

三个犬牙相错的事举个例子下:

context.stroke();

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

</script>

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

在画布中间绘制叁个100*50的矩形

ctx.fill();

结果如下:

绘制

// 橘黄部分

澳门新萄京官方网站 16

strokeStyle

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

 

strokeRect(x,y,w,h)

ctx.moveTo(50,0);

实用参谋: 合法参照他事他说加以考察文书档案以及API详细说明:

填充

ctx.lineTo(100,50);

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

fillStyle

ctx.lineTo(100,0);

 

fillRect

ctx.lineTo(50,0);


<canvas color: blue; font-family: 新宋体; font-size: 13pt;">anvasOne" width="300" height="300"></canvas>

ctx.close帕特h();//闭合路线

<script type="text/javascript">

ctx.fillStyle = '#ff6600';

var canvasObj = document.getElementById('canvasOne');

ctx.fill();

var context = canvasObj.getContext;

// 文字绘制

context.strokeStyle = 'rgb(100%,0%,100%)';

var deg = Math.PI/180;

context.strokeRect(100, 125, 100, 50);

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

</script>

ctx.beginPath();

绘图圆形

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

绘制300*300画布的内切圆

ctx.textAlign = 'center';//字体对齐格局

beginPath()

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

始于绘制路线

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

arc(x, y, r, s, e, b)

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

x,y 坐标本次是表示圆心

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

r 代表半径

ctx.closePath();

s 代表起先弧度

function draw(){

e 代表甘休弧度

drawMethod();//绘制三角等剧情

b 代表是或不是逆时针方向画图

window.requestAnimationFrame(function(){

暗中认可顺时针

draw();

closePath()

})

终止绘制路线

function drawMethod(){

扩张案例

澳门新萄京官方网站,}

fill()

}

填充

</script> -->

<canvas color: blue; font-family: 新宋体; font-size: 13pt;">ne" width="300" height="300"></canvas>

<script>

<script type="text/javascript">

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

var canvasObj = document.getElementById('canvasOne');

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

var context = canvasObj.getContext;

        var cw = 100;

context.fillStyle = 'rgb';

        var ch = 100;

context.beginPath();//初步绘制路线

        var percent = 0;

context.arc(150, 150, 150, 0, Math.PI * 2,true);//注意:x,y 坐标这一次是意味着圆心

        var points = {

context.close帕特h();//结束绘制路线

            x1 : 100,

context.fill();//填充

            y1 : 0,

</script>

            x2 : 100,

绘制弧线

            y2 : 0

context.closePath();

        }

渠道不闭合的时候会活动画一条直线

        var speed = 1;

<canvas width="300" height="300"></canvas>

        var aSpeed = 0.1;

<canvas id="canvasTwo" width="300" height="300"></canvas>

        ctx.moveTo(0,0);

<canvas id="canvasThree" width="300" height="300"></canvas>

        ctx.strokeStyle = 'black';

<script type="text/javascript">

        ctx.strokeWidth= 1;

//第三个画布

        ctx.save();

var canvasObj = document.getElementById('canvasOne');

        var deg = Math.PI / 180;

var context = canvasObj.getContext;

        

for (var i = 0; i <= 15; i ) {

        function start(type){

context.strokeStyle= 'rgb';

            if(type === 'show'){

context.begin帕特h();//起初绘制路线

                points = {

context.arc(0, 150, i * 10, 0, Math.PI * 1.5);//注意:x,y 坐标此番是代表圆心

                    x1 : 100,

//context.closePath();//截至绘制路径

                    y1 : 0,

context.stroke();//填充

                    x2 : 100,

}

                    y2 : 0

//第4个画布

                }

var canvasObj2 = document.getElementById('canvasTwo');

                aSpeed = .1;

var context2 = canvasObj2.getContext;

                speed = 1;

for (var i = 0; i <= 30; i ) {

            }else{

context2.strokeStyle= 'rgb';

                points = {

context2.beginPath();//开首绘制路线

                    x1 : 50,

context2.arc(0, 0, i * 10, 0, Math.PI * 1.5);//注意:x,y 坐标此番是象征圆心

                    y1 : 0,

//context2.closePath();//截止绘制路线

                    x2 : 100,

context2.stroke();//填充

                    y2 : 50

}

                }

//第1个画布-搞怪来袭

                aSpeed = -.1;

var canvasObj3 = document.getElementById('canvasThree');

                speed = -1;

var context3 = canvasObj3.getContext;

            }

for (var i = 0; i <= 30; i ) {

            draw(points , type);

context3.strokeStyle= 'rgb';

        }

context3.beginPath();//初叶绘制路径

        

context3.arc(0, 150, i * 10, 1, 3);//注意:x,y 坐标此次是代表圆心

        function draw(points , type){

context3.closePath();//截止绘制路线,路线不闭合的事态下会自动补上一个直线,所以就搞怪了

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

context3.stroke();//填充

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

}

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

</script>

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

制图三角形

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

绘图三角形

                setTimeout(function(){

<canvas width="200" height="200"></canvas>

                    start('show');

<script type="text/javascript">

                } , 2000)

var c = document.getElementById("myCanvas");

                return ;

var context = c.getContext;

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

context.strokeStyle = "red";

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

context.beginPath();

                setTimeout(function(){

context.moveTo;

                    start('hide');

context.lineTo;

                } , 2000)

context.lineTo;

                return ;

context.closePath();

            }

context.stroke();

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

</script>

            drawPageCorShow(points , disX , disY);

常用本事

            drawPageCor(points, disX , disY);

透 明 度

            window.requestAnimationFrame(function(){

rgba

                draw(points , type);

a代表光滑度,取值范围在 0~1

            })

清 除 画 布

        }

context.clearRect

        

案例

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

context.save();

            ctx.closePath();

恢复

            ctx.strokeStyle = "#080";

context.restore()

            ctx.stroke();

活动坐标空间

            

context.translate;

            ctx.fillStyle = '#ff6600';

x轴方向右移60,y轴方向下移50

            ctx.fill();

for (var i = 1; i < 10; i ) {

            //重叠方式

context.save();//保存一下状态

            ctx.globalCompositeOperation = 'source-atop';

context.translate(60 * i, 50);//x轴方向右移60*i,y轴方向下移50

            

//画伞的最上端

            ctx.beginPath();

* context.fillStyle = 'rgb(' i 25 ',' 0 ',' 255

            ctx.font = '14px Arial';

  • ')'; **

    context.beginPath();

    context.arc(0, 0, 30, 0, Math.PI, true);//在源点地方顺时针画叁个半圆

            ctx.textAlign = 'center';

context.closePath();

            ctx.translate(78 , 22);

context.fill();

            ctx.rotate(45 * deg);

//画伞的平底

            ctx.fillStyle = '#fff';

context.strokeStyle = "red";

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

context.strokeRect(-0.2, 0, 0.4, 30);

            ctx.closePath();

//画伞的根部

            ctx.restore();

context.beginPath();

            

context.arc(-5, 30, 5, 0, Math.PI);//圆心左移多少个单位,圆的左侧点就在根部了

        }

context.stroke();

        

context.restore();//苏醒一下动静(不然老是都活动坐标原点,就变全日女散花了)

        function drawPageCor(points, disX , disY){

}

            ctx.save();

for (var i = 1; i < 10; i ) {

            ctx.beginPath();

//x轴方向右移60 i,y轴方向下移50

            //移動到地点 左上

**context.translate(60

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

  • i, 50);**

    //画伞的顶端

    context.fillStyle = 'rgb(' 255 ',' i * 25 ',' 0 ')';

    context.beginPath();

    context.arc(0, 0, 30, 0, Math.PI, true);//在源点地方顺时针画一个半圆

    context.closePath();

    context.fill();

            //画第多少个曲线

//画伞的平底

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

context.strokeStyle = "red";

            //直线向下

context.strokeRect(-0.2, 0, 0.4, 30);

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

//画伞的根部

            //半圆向右

context.beginPath();

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

context.arc(-5, 30, 5, 0, Math.PI);//圆心左移八个单位,圆的左侧点就在根部了

            // 直线向右

context.stroke();

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

}

            //曲线向右

旋转坐标空间

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

rotate

            //闭合图形

angle 代表旋转角度

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

弧度为单位

            

在坐标原点顺时针方向旋转

            ctx.closePath();

<canvas width="600" height="600"></canvas>

            

<script type="text/javascript">

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

var canvasObj = document.getElementById('canvasOne');

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

var context = canvasObj.getContext;

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

context.translate;

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

//画伞

            

function drawUmbrella {

            ctx.fillStyle = gradient;

//画伞的顶上部分

            ctx.fill();

context.fillStyle = 'rgb(' i * 25 ',' 0 ',' 255 ')';

            ctx.restore();

context.beginPath();

            //更新速度地方

context.arc(0, 0, 30, 0, Math.PI, true);//在起源地点顺时针画叁个半圆

            points.x1 -= speed;

context.closePath();

            points.y2 = speed;

context.fill();

            speed = aSpeed;

//画伞的平底

        }

context.strokeStyle = "red";

        start('show');

context.strokeRect(-0.2, 0, 0.4, 30);

</script>

//画伞的根部

</body>

context.beginPath();

</html>

context.arc(-5, 30, 5, 0, Math.PI);//圆心左移多个单位,圆的左侧点就在根部了

 

context.stroke();

右上角须求从无的情景撕开二个标识,且有动画进度,上海体育场合是促成的作用图,不是gif。

}

对那个翻角效果的难关在于未有翻动的时候暴露的是dom上边包车型客车开始和结果,达成角度来说纯dom

function draw() {

  • css动画的技术方案并未相出二个好的战略: 于是捡起了遥远从前学的入门级其余canvas:

for (var i = 1; i <= 10; i ) {

上边说一下贯彻思路。

context.save();//保存一下动静

动画拆分

context.rotate(Math.PI * (0.2 * i));//2Pi 弧度是三个圆

  • 将此动画分解成两某些,一部分是翻页出现的雪白三角区域,另四个是发泄的橘色呈现内容

  • 对此橘色的展现内容区域相对好有的,因为是二个平整图形,而雪白区域相对较难

context.translate;//越小越紧密

先从基础canvas使用方法说到

drawUmbrella;//画伞

  1. <div class="container">

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

  3. </div>

context.restore();//恢复生机一下景观

 

}

布局如上,这里要说一点踩过的坑是,canvas一定要设置上width 与 height,此处并不是为css中的width与height,而是写在dom上的习性。 因为dom上的width与height标记了canvas的分辨率(个人知道), 所以此canvas画布分辨率为100*100,而显得尺寸是足以由此css调整。

}

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

window.onload = function () {

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

draw();

ctx那些摄影上下文在这几个科目中起到的法力入眼,它提供了要命强劲的api,举个例子用来画线、填充、写文字等,那样看来驾驭为画笔会进一步刚烈一些。

}

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

</script>

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

缩 放 图 形

兴许方法列举的相当不够详尽,见谅。

context.scale

先是是绘制蓝紫翻出的局部,图形分解为如下几部分(请遵照上图脑补):

扩大1.1倍

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

  2. 下一场是竖直向下的竖线 |

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

  4. 再然后是向右的横线

  5. 接着照旧向右下的半弧 ╮

  6. 最终是将线连接会起源

rgba

于是乎第一步 大家要先将画笔移动到胚胎地点:

a代表折射率,取值范围在 0~1

  1. ctx.moveTo(50,0);

<canvas width="600" height="600"></canvas>

然后

<script type="text/javascript">

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

var canvasObj = document.getElementById('canvasOne');

于是乎第叁个向右下的半弧达成,此时canvas上尚未任何绘制内容,因为还并没有施行过绘制方法比方stroke或fill。

var context = canvasObj.getContext('2d');

接下去直线向下正是轻便的移位:

context.translate(300, 300);

  1. ctx.lineTo(55 , 40);

for (var i = 1; i < 50; i ) {

那年我们接下去应该画向右的弧形,那一年再用贝塞尔曲线绘制实在有一些不太方便,因为从图上来看,这里完全部是52%的圆,所以要选用canvas提供的画圆的api。

context.rotate(Math.PI / 9);//旋转

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

context.scale;//扩大1.1倍

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

context.translate;//平移

于是依照同样的步骤,水平向右:

* context.fillStyle = 'rgba(' i 5 ',' 0 ',' 200 ','

  1. ctx.lineTo(75 , 45);
  • 0.5 ')'; **

    context.beginPath();

    context.arc(0, 0, 1, 0, Math.PI * 2, true);

    context.closePath();

    context.fill();

    }

</script>

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

矩 阵 变 化

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

骨子里像 translate,scale,rotate都是破例的矩阵调换

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

transform(m11,m12,m21,m22,dx,dy)

最终链接起源,闭合版画区域:

轮换当前的转移矩阵(transform() 允许你缩放、旋转、移动并倾斜当前的条件)

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

m11

于是乎翻页效果的八分之四不怕完事了。

水平倾斜绘图

由来,笔者要说一点本人精通的canvas的点染"套路"。

m12

对此上述教程中,有一步大家利用了三个词叫做闭合,闭合的概念在canvas中是真是存在的,对于fill方法来讲,填充的距离是有三个空间尺寸才得以的,比方大家描绘的这么些深黑的三角形,插足我们最后未有将终点与源点相连接,同样canvas会自行帮大家链接最终一笔水墨画的职位到起源,强制行程闭合空间,而这么大家想再多画多少个新的关闭空间就劳动了,所以canvas提供了之类api 新建闭合路线:

垂直倾斜绘图

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

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

m21

 

笔直缩放绘图

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

m22

 

水平位移绘图

  1. ctx.beginPath();

  2. ...

dx

接下来在fill在此之前大家理应 :

垂直运动绘图

  1. ctx.closePath();

dy

相当于说beginPath到closePath之间标志着大家温馨的二个完好的点染阶段。

setTransform(m11,m12,m21,m22,dx,dy)

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

重新初始化并创制新的改换矩阵

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

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

小案例

文字绘制

<canvas width="600" height="600"></canvas>

接下去绘制"new",实际上是运用canvas轻便的文件绘制,代码如下:

<script type="text/javascript">

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

var canvasObj = document.getElementById('canvasOne');

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

var context = canvasObj.getContext('2d');

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

context.translate(200, 20);

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

for (var i = 1; i < 90; i ) {

幸好canvas的画笔是存在"状态"的,通过 ctx.save();能够保存当前画笔的景色,通过ctx.restore();能够还原到上次画笔保存的图景。

context.save();

于是乎小编个人精通到,在支付canvas动画时,三个较好的习贯正是,在beginPath在此之前先ctx.save();保存画笔状态,在closePath后 ctx.restore();重振旗鼓在此之前的画笔状态,那样大家的每三个制图阶段对于画笔的修改都将是不会有震慑的(个人经验)。

//参数:水平缩放绘图,水平倾斜绘图,垂直倾斜绘图,垂直缩放绘图,水平位移绘图,垂直运动绘图

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

context.transform(0.95, 0, 0, 0.95, 30, 30);

 

context.rotate(Math.PI / 12);//旋转角度

代码中那有个别是指 大家绘制的文字new与橘色三角形区域的重叠关系,此情势取值非常多,此处不做过多介绍,source-atop值能够使重叠区域保留,新绘制的从头到尾的经过在重叠区域以外的有个别未有,以此到达new在当中的成效。

context.beginPath();

到此地大家就付出好了翻角效果的一心体现的情况,那么如何让那些区域动起来呢?

context.fillStyle = "rgba(255,0,0,0.5)";

此间须求运用h5提供的用来刷帧的函数 requestAnimationFrame

context.arc(0, 0, 50, 0, Math.PI * 2, true);

此措施可概括明了为16微秒的反应计时器,不过厉害的是能够再相继碰到中自动相配到可完成的相持顺遂的帧率,实际并不是坚持计时器哈。

context.closePath();

我们必要在这些轮回施行的函数中,将上述的绘图内容重复绘制,举例 :

context.fill();

  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动起来的指标了。

context.setTransform(1, 0, 0, 1, 10, 10);

//查证一下是否变动过来了

context.fillStyle = "blue";

context.fillRect(0, 0, 50, 50);

context.fill();

</script>

扩 展 样 式

线形属性

lineWidth

设置线条粗细默感觉1,为正数

<canvas width="300" height="300"></canvas>

<script type="text/javascript">

var canvasObj = document.getElementById('canvasOne');

var context = canvasObj.getContext('2d');

for (var i = 1; i < 12; i ) {

context.strokeStyle = 'rgb';

context.lineWidth = i;

context.beginPath();

context.moveTo(i * 20, 0);

context.lineTo(i * 20, 300);

//context.closePath();

context.stroke();

}

</script>

lineCap

安装端点样式

butt

平头

默认

round

圆头

square

方头

<canvas width="300" height="300"></canvas>

<script type="text/javascript">

var canvasObj = document.getElementById('canvasOne');

var context = canvasObj.getContext;

//定义数组

var lineCap = ['butt', 'round', 'square'];

// 绘制参考线。

context.strokeStyle = 'red';

context.beginPath();

context.moveTo(10,10);

context.lineTo;

context.moveTo(150,10);

context.lineTo(150,150);

context.stroke();

// 绘制直线段。

context.strokeStyle = 'blue';

for (var i = 0; i < lineCap.length; i ) {

context.lineWidth = 20;

context.lineCap = lineCap[i];

context.beginPath();

context.moveTo(10, 30 i * 50);

context.lineTo(150, 30 i * 50);

context.stroke();

}

</script>

lineJoin

安装连接处样式

round

bevel

斜面

miter

默认

<canvas width="500" height="200"></canvas>

<script type="text/javascript">

var canvasObj = document.getElementById('canvasOne');

var context = canvasObj.getContext;

var lineJoin = ['round', 'bevel', 'miter'];

context.strokeStyle = 'rgb(0,0,0)';

for (var i = 0; i < lineJoin.length; i ) {

context.lineWidth = 25;

context.lineJoin = lineJoin[i];

context.beginPath();

context.moveTo(10 i * 150, 30);

context.lineTo(100 i * 150, 30);

context.lineTo(100 i * 150, 100);

context.stroke();

}

</script>

miterLimit

安装或重返最大斜接长度

前提

lineJoin使用私下认可属性

<canvas width="1600" height="300"></canvas>

<script type="text/javascript">

var context = document.getElementById('canvasOne').getContext;

for (var i = 1; i < 10; i ) {

context.strokeStyle = 'blue';

context.lineWidth = 10;

context.lineJoin = 'miter';

context.miterLimit = i * 10;

context.beginPath();

context.moveTo(10, i * 30);

context.lineTo(100, i * 30);

context.lineTo(10, 33 * i);

context.stroke();

}

</script>

渐 变 系 列

线形渐变

createLinearGradient(x0, y0, x1, y1)

请使用该对象作为 strokeStyle 或 fillStyle 属性的值

x0,y0

渐变源点

x1,y1

渐变终端

addColorStop(position, color);

诚如都以安装几个色标

position

色相偏移值

取值 0~1

color

颜色

永不一定从0开头,1扫尾

<canvas width="300" height="300"></canvas>

<script type="text/javascript">

var context = document.getElementById('canvasOne').getContext;

var lingrad = context.createLinearGradient(0, 0, 0, 200);

lingrad.addColorStop(0, '#ff0000');

lingrad.addColorStop(1 / 7, '#ff9900');

lingrad.addColorStop(2 / 7, '#ffff00');

lingrad.addColorStop(3 / 7, '#00ff00');

lingrad.addColorStop(4 / 7, '#00ffff');

lingrad.addColorStop(5 / 7, '#0000ff');

lingrad.addColorStop(6 / 7, '#ff00ff');

lingrad.addColorStop(1, '#ff0000');

context.fillStyle = lingrad;

context.fillRect(10, 10, 200, 200);

</script>

var c = document.getElementById('myCanvas');

var ctx = c.getContext;

var grd = ctx.createLinearGradient(0, 0, 170, 0);

grd.addColorStop(0.1, 'rgb(255,255,255)');

grd.addColorStop(0.5, 'rgb');

grd.addColorStop(0.9, 'rgb;

ctx.fillStyle = grd;

ctx.fillRect(20, 20, 150, 100);

通往渐变

createRadialGradient(x1,y1,r1,x2,y2,r2)

以为原点,r1为半径的圆

认为原点,r2为半径的圆

addColorStop(position, color);

诚如都是设置四个色标

position

色相偏移值

取值 0~1

color

颜色

不用必然从0最初,1了事

<canvas width="300" height="240"></canvas>

<script language="javascript">

var ctx = document.getElementById('myCanvas').getContext;

var radgrad = ctx.createRadialGradient(55, 55, 20, 100, 100, 90);

radgrad.addColorStop(0, 'rgb(255,255,0)');

radgrad.addColorStop(0.75, 'rgb(255,0,0)');

radgrad.addColorStop(1, 'rgb(255,255,255)');

ctx.fillStyle = radgrad;

ctx.fillRect(10, 10, 200, 200);

</script>

创 建 阴 影

参数

shadowOffsetX

shadowOffsetX 属性设置或回到形状与阴影的水准距离

shadowOffsetX=0 提示阴影位于形状的正下方。

shadowOffsetX=20 提醒阴影位于形状 left 地方右边手的 20 像素处。

shadowOffsetX=-20 指示阴影位于形状 left 地方左侧包车型地铁 20 像素处。

shadowOffsetY

shadowOffsetY 属性设置或回到形状与阴影的垂直距离。

shadowOffsetY=0 提醒阴影位于形状的正下方。

shadowOffsetY=20 提醒阴影位于形状 top 地方下方的 20 像素处。

shadowOffsetY=-20 提示阴影位于形状 top 地方上方的 20 像素处。

shadowBlur

shadowBlur 属性设置或回到阴影的混淆级数。

shadowColor

shadowColor 属性设置或回到用于阴影的颜料

<canvas width="600" height="600"></canvas>

<script type="text/javascript">

var canvasObj = document.getElementById('canvasOne');

var context = canvasObj.getContext;

//设置前画个图

context.fillStyle = '#0094ff';

context.fillRect(410, 310, 50, 50);

//设置阴影

context.shadowOffsetX = 3;

context.shadowOffsetY = 3;

context.shadowBlur = 1;

context.shadowColor = '#808080';

//画矩形

context.fillRect(200, 200, 200, 100);

//绘图

var img = new Image();

img.src = '/images/1.jpg';

img.onload = function () {

context.fillStyle = context.createPattern(img, 'no-repeat');

context.fillRect(0, 0, 600, 600);

}

</script>

绘制文字

制图填充文字

fillText(str,x,y,[mw])

澳门新萄京官方网站:CSS3入门体系,canvas纯绘制雨伞。 str

文字内容

x,y

起源坐标

mw

最大开间

可选参数

绘图像和文字字轮廓

strokeText(str,x,y,[mw])

str

文字内容

x,y

源点坐标

mw

最小幅面

可选参数

度量文字宽度

measureText

context.measureText.width

文字宽度

str

文字内容

文字类别属性

context.font

语法

context.font="italic small-caps bold 12px arial";

font-style

规定字体样式。大概的值:

normal

italic

斜体字

oblique

倾斜

font-variant

显著字体变体。大概的值:

normal

small-caps

大写

font-weight

鲜明字体的粗细。大概的值:

normal

bold

bolder

lighter

100

font-family

分明字类别列。

font-size / line-height

分明字号和行高,以像素计。

icon

应用用于标志Logo的书体。

menu

运用用于菜单中的字体(下拉列表和菜单列表)。

caption

选用标题控件的字体(比如开关、下拉列表等)。

status-bar

利用用于窗口状态栏中的字体。

message-box

运用用于对话框中的字体。

small-caption

动用用于标志Mini控件的字体。

案例

<canvas width="500" height="300"></canvas>

<script type="text/javascript">

var canvasObj = document.getElementById('canvasOne');

var context = canvasObj.getContext;

var str = '';

context.fillStyle = 'rgba(255,0,0,0.9)';

context.strokeStyle = 'rgba(255,0,0,0.9)';

context.font = '30px 微软雅黑';

context.strokeText(str, 100, 40);

console.log(context.measureText.width);

context.fillText(str, 100, 80);

console.log(context.measureText(str).width);

context.font = 'bold 30px 微软雅黑';

context.strokeText(str, 100, 150);

console.log(context.measureText.width);

context.fillText(str, 100, 180);

console.log(context.measureText.width);

</script>

图像体系

1.图像来源

路子图片

直接对 src 赋值

var img=new Image();

img.src='xxx';

页面图片

发源页面,假使已知id则可通过

document.images 集合

document.getElementsByTagName

document.getElementsById

其他canvas元素

document.getElementsByTagName

document.getElementsById

2.drawImage绘图

context.drawImage

在画布上平昔图像

img 规定要接纳的图像、画布或录像。

x 在画布上停放图像的 x 坐标地点。

y 在画布上放置图像的 y 坐标地方。澳门新萄京官方网站:CSS3入门体系,canvas纯绘制雨伞。

//获取路线图片

document.getElementById.onclick = function () {

clearCanvas;

var img1 = new Image();

img1.src = '/images/1.jpg';

context.drawImage(img1, 150, 150);

}

context.drawImage(img,x,y,w,h)

在画布上固定图像,并规定图像的升幅和可观

img 规定要运用的图像、画布或录像。

x 在画布上放置图像的 x 坐标地点。

y 在画布上停放图像的 y 坐标地点。

w 要动用的图像的上涨的幅度。

h 要使用的图像的莫斯科大学。

//获取页面图片

document.getElementById.onclick = function () {

clearCanvas;

var img2 = document.getElementById;

context.drawImage(img2, 150, 150, 200, 200);

}

context.drawImage(img,sx,sy,sw,sh,x,y,w,h)

细分图像,并在画布上平素被细分的局地

img 规定要选用的图像、画布或摄像。

sx 开始剪切的 x 坐标地方。

sy 伊始剪切的 y 坐标地点。

sw 被细分图像的肥瘦。

sh 被分开图像的万丈。

x 在画布上放置图像的 x 坐标地点。

y 在画布上停放图像的 y 坐标地点。

w 要使用的图像的幅度。

h 要采用的图像的惊人。

//从Canvas获取

document.getElementById.onclick = function () {

clearCanvas;

var img3 = document.getElementById('canvasTwo');

context.drawImage(img3, 150, 150, 300, 250, 50, 50, 400, 300);

}

扩展

createPattern(image,type)

image

规定要动用的图纸、画布或摄像成分

var img=new Image();

type

是或不是重发

repeat|repeat-x|repeat-y|no-repeat

<canvas width="600" height="600"></canvas>

<script type="text/javascript">

var canvasObj = document.getElementById('canvasOne');

var context = canvasObj.getContext;

var img = new Image();

img.src = '/images/1.jpg';

img.onload = function () {

context.fillStyle = context.createPattern(img, 'repeat');

context.fillRect(0, 0, 600, 600);

}

</script>

注意:

context.fillRect(100, 0, 600, 600);

那边的fillRect。x,y既指的是坐标原点,也指的是图片原点

扩张部分

绘图贝塞尔曲线

壹回方贝塞尔曲线

quadraticCurveTo(cp1x,cp1y,x,y)

cp1x,cp1y是调整点坐标

x,y是极端坐标

<canvas style="border:1px solid;" width="300" height="200"></canvas>

<script type="text/javascript">

var c=document.getElementById("myCanvas");

var context=c.getContext;

// 上面开头绘制一次方贝塞尔曲线。

context.strokeStyle="dark";

context.beginPath();

context.moveTo;

context.quadraticCurveTo(75,50,300,200);

context.stroke();

context.globalCompositeOperation="source-over";

// 上面绘制的直线用于表示下边曲线的调整点和调节线,调控点坐标即两直线的交点(75,50)。

context.strokeStyle="#ff00ff";

context.beginPath();

context.moveTo;

context.lineTo;

context.moveTo;

context.lineTo;

context.stroke();

</script>

贰回方贝塞尔曲线

bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)

cp1x,cp1y是调节点坐标

cp2x,cp2y是第贰个调整点坐标

x,y是极端坐标

<canvas width="300" height="200"></canvas>

<script type="text/javascript">

var c=document.getElementById("myCanvas");

var context=c.getContext;

// 下边初始绘制一回方贝塞尔曲线。

context.strokeStyle="dark";

context.beginPath();

context.moveTo;

context.bezierCurveTo(25,50,75,50,300,200);

context.stroke();

context.globalCompositeOperation="source-over";

// 上面绘制的直线用于表示上边曲线的调控点和调整线,调整点坐标为(25,50)和(75,50)。

context.strokeStyle="#ff00ff";

context.beginPath();

context.moveTo;

context.lineTo(0,200);

context.moveTo(75,50);

context.lineTo(300,200);

context.stroke();

</script>

整合裁切

组合

globalCompositeOperation

设置或回到怎么样将多个源图像绘制到对象的图像上

裁切

clip()

从原始画布中剪切放肆形状和尺寸

案例

从画布中剪切 200*120 像素的矩形区域。然后,绘制米色矩形。唯有被划分区域内的铁灰矩形部分是可知的

<p>不使用 clip():</p>

<canvas width="300" height="150" style="border:1px solid #d3d3d3;"></canvas>

<script>

var c = document.getElementById("myCanvas");

var ctx = c.getContext;

ctx.rect(50, 20, 200, 120);

ctx.stroke();

ctx.fillStyle = "green";

ctx.fillRect(0, 0, 150, 100);

</script>

<br />

<p>使用 clip():</p>

<canvas width="300" height="150" style="border:1px solid #d3d3d3;"></canvas>

<script>

var c = document.getElementById("myCanvas2");

var ctx = c.getContext;

// Clip a rectangular area

ctx.rect(50, 20, 200, 120);

ctx.stroke();

ctx.clip();

// Draw red rectangle after clip()

ctx.fillStyle = "green";

ctx.fillRect(0, 0, 150, 100);

</script>

案例2

<canvas style="border:1px solid;" width="300" height="300"></canvas>

<script type="text/javascript">

function draw() {

var ctx = document.getElementById('myCanvas').getContext;

// 绘制背景。

ctx.fillStyle = "black";

ctx.fillRect(0, 0, 300, 300);

ctx.fill();

// 绘制圆形。

ctx.beginPath();

ctx.arc(150, 150, 130, 0, Math.PI * 2, true);

// 裁切路线。

ctx.clip();

ctx.translate(200, 20);

for (var i = 1; i < 90; i ) {

ctx.save();

ctx.transform(0.95, 0, 0, 0.95, 30, 30);

ctx.rotate(Math.PI / 12);

ctx.beginPath();

ctx.fillStyle = "red";

ctx.globalAlpha = "0.4";

ctx.arc(0, 0, 50, 0, Math.PI * 2, true);

ctx.closePath();

ctx.fill();

}

}

window.onload = function () {

draw();

}

</script>

澳门新萄京官方网站 17

本文由澳门新萄京官方网站发布于澳门新萄京赌场网址,转载请注明出处:澳门新萄京官方网站:CSS3入门体系,canvas纯绘制

关键词: