在画布内使用路径,这里面每一个js文件都是一个

作者: 前端  发布:2019-10-10

用HTML5 Canvas画一张笑颜

2015/02/24 · HTML5 · 2 评论 · Canvas, HTML5

本文由 伯乐在线 - cucr 翻译,JustinWu 校稿。未经许可,禁绝转发!
丹麦语出处:code.tutsplus.com。迎接参与翻译组。

图片 1

前几天,你将学习一项称为Canvas(画布)的web技艺,乃至它和文书档案对象模型(平时被喻为DOM)的涉嫌。那项技能特别强大,因为它使web开辟职员可以透过运用JavaScript访问和改动HTML成分。

现行反革命你或然想理解为什么大家必要大马金刀地接纳JavaScript。简单来说,HTML和JavaScript是相互依存的,一些HTML组件,如canvas成分,并不可能脱离JavaScript单独行使。终归,就算大家无法在地点绘制,那canvas能派什么用处呢?

为了越来越好地精晓那个概念,我们一起通过八个示范项目来品尝画贰个简易的笑脸。让我们开端吧。

使用HTML5中的Canvas绘制一张笑颜的科目,html5canvas

那篇小说重要介绍了使用HTML5中的Canvas绘制一张笑貌的科目,使用Canvas举办绘图是HTML5中的基本成效,要求的仇人能够参照下

图片 2明天,你将学习一项称为Canvas(画布)的web才具,以至它和文书档案对象模型(日常被誉为DOM)的关系。那项手艺十分有力,因为它使web开垦人士能够通过选取JavaScript访谈和退换HTML成分。

前日您只怕想通晓干什么我们要求雷霆万钧地动用JavaScript。简单来说,HTML和JavaScript是相互依存的,一些HTML组件,如canvas成分,并无法脱离JavaScript单独采纳。究竟,若是咱们不可能在上边绘制,那canvas能派什么用处吧?

为了越来越好地领悟这么些定义,大家联合通过二个演示项目来尝试画贰个差非常的少的笑容。让我们最早吧。
开始

率先创制叁个新目录来保存你的门类文件,然后展开你最欣赏的公文编辑器或web开拓工具。一旦您那样做了,你应当创设四个空的index.html和三个空的script.js,之后大家将接二连三编辑。

图片 3
接下去,大家来修改index.html文件,那不会提到繁多东西,因为我们项目标大部代码将用JavaScript编写。大家须要在HTML中做的是创造贰个canvas元素和引用script.js,这一定干脆俐落:  

XML/HTML Code复制内容到剪贴板

  1. <!DOCTYPE html><body>  
  2.     
  3.    <canvas id='canvas' width='640' height='480'></canvas>  
  4.    <script type='text/javascript' src='script.js'></script>  
  5.     
  6. </body></html>  
  7.   

如此那般解释,作者利用一组标志< html >和< body>,这样,大家得以因而body为文书档案加多更加多的因素。抓住这么些机遇,笔者成功了一个id属性为canvas的640*480的canvas元素。

以此本性只是简短地为要素加上二个字符串,指标是为着独一识别,稍后大家将应用那特性格,在JavaScript文件中固定我们的canvas成分。接下来,我们再利用<script>标志援用JavaScript文件,它内定JavaScript的言语类型和script.js文件的门路。
操作DOM

如其名目“文书档案对象模型”,大家供给通过使用另一种语言,调用接口访谈HTML文书档案,在那地,大家选取的语言是JavaScript。为此,大家供给在贮存文书档案对象上的布阵四个轻易易行援用。那么些目的直接对应于大家的< html >标识,类似的,它是任何项指标基本功,因为我们能够透过它来博取成分,实行变化。  

XML/HTML Code复制内容到剪贴板

  1. var canvas = document.getElementById('canvas');   
  2.   

还记得大家什么样利用id =“canvas”来定义贰个canvas成分吗?以往大家应用document.getElementById方法,从HTML文书档案获取那一个成分,我们简要地传递相称所需成分id的字符串。以往大家早已赢得了那个因素,接下去就能够用其举办写生职业了。

为了利用canvas实行美术,大家不能够不操作它的上下文。令人惊喜的是,八个canvas不满含别的绘图的法子或性质,可是它的上下文对象有大家要求的全部办法。叁个上下文定义如下所示:

XML/HTML Code复制内容到剪贴板

  1. var context = canvas.getContext('2d');   
  2.   

每叁个canvas有多少个差别的上下文,依据程序的目标,只须要贰个二维的上下文就足足了,它将收获大家要求创设笑颜的具备绘图方法。

在大家开端从前,笔者无法不告知您,上下文存款和储蓄了二种颜色属性,二个用来画笔(stroke),三个用来填充(fill)。对于我们的笑容,须要安装填充为深青莲,画笔为普鲁士蓝。  

XML/HTML Code复制内容到剪贴板

  1. context.fillStyle = 'yellow';   
  2. context.strokeStyle = 'black';   
  3.   

安装完上下文所需的颜色后,我们必需为脸画八个圆。不幸的是,上下文中未有圆的预订义方法,因而大家要求利用所谓的渠道(path)。路线只是一多级的无休止的直线和曲线,路线在绘图完成后关门。  

XML/HTML Code复制内容到剪贴板

  1. context.beginPath();   
  2. context.arc(320, 240, 200, 0, 2 * Math.PI);   
  3. context.fill();   
  4. context.stroke();   
  5. context.closePath();   
  6.   

那般表明,大家选取上下文起始七个新的路子。接下来,大家在点(320、240)上开创四个半径为200像素的圆弧。最后多个参数钦命创设圆弧的开始和最终角度,所以我们传递0和2 *Math.PI,来创立一个全体的圆。最后,大家利用上下文基于大家早已设置的颜料进行填空并画出路径。

就算关闭路线不是本子的意义所必须的,但大家仍旧须求关闭路线,那样就足以初始绘制笑颜中新的眼眸和嘴。眼睛能够通过同样的措施成功,每一种眼睛须要不大的半径和不相同的岗位。但首先大家亟须记住设置填充颜色为北京蓝。  

XML/HTML Code复制内容到剪贴板

  1. context.fillStyle = 'white';   
  2.     
  3. context.beginPath();   
  4. context.arc(270, 175, 30, 0, 2 * Math.PI);   
  5. context.fill();   
  6. context.stroke();   
  7. context.closePath();   
  8.     
  9. context.beginPath();   
  10. context.arc(370, 175, 30, 0, 2 * Math.PI);   
  11. context.fill();   
  12. context.stroke();   
  13. context.closePath();   
  14.   

如上是有关眼睛的兼具代码。今后嘴巴很相似,但这一次我们不会填满圆弧,大家的角度将配置为多个半圆。要水到渠成这点,我们供给安装发轫角度为零和告竣角度为-1 * Math.PI。请记住,不要遗忘将画笔的颜色设置为铅色。  

XML/HTML Code复制内容到剪贴板

  1. context.fillStyle = 'red';   
  2.     
  3. context.beginPath();   
  4. context.arc(320, 240, 150, 0, -1 * Math.PI);   
  5. context.fill()   
  6. context.stroke();   
  7. context.closePath();   

祝贺

干的正确。你早就成功了本学科,你做了二个很棒的一言一行,同期学习了越来越多关于Canvas、HTML、JavaScript,和文书档案对象模型的知识。尽管您有此外难题,请留言。

那篇文章主要介绍了应用HTML5中的Canvas绘制一张笑貌的课程,使用Canvas举办绘图是HTML5中的基...

动用HTML5 Canvas API中的clip()方法裁剪区域图像,html5canvas

利用Canvas绘制图像的时候,大家日常会想要只保留图像的一有的,那是大家能够运用canvas API再带的图像裁剪成效来促成这一设法。
Canvas API的图像裁剪成效是指,在画布内接纳路线,只绘制该路径内所富含区域的图像,不会只路线外的图像。那有一些像Flash中的图层遮罩。

使用图形上下文的不带参数的clip()方法来兑现Canvas的图像裁剪功效。该措施应用路线来对Canvas话不设置四个裁剪区域。由此,必须先创制好路子。创立完整后,调用clip()方法来设置裁剪区域。
亟需专一的是裁剪是对画布举办的,裁切后的画布无法回复到原来的大小,也正是说画布是越切越小的,要想保障最终如故能在canvas最早定义的大大小小下绘图要求静心save()和restore()。画布是先裁切完了再实行绘图。并不一定非若是图片,路线也得以放进去~

先来拜谒一个简短的Demo。

JavaScript Code复制内容到剪贴板

  1. <!DOCTYPE html>   
  2. <html lang="zh">   
  3. <head>   
  4.     <meta charset="UTF-8">   
  5.     <title>裁剪区域</title>   
  6.     <style>   
  7.         body { background: url("./images/bg3.jpg") repeat; }  
  8.         #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }   
  9.     </style>   
  10. </head>   
  11. <body>   
  12. <div id="canvas-warp">   
  13.     <canvas id="canvas">   
  14.         你的浏览器还是不帮助Canvas?!飞速换四个啊!!   
  15.     </canvas>   
  16. </div>   
  17.   
  18. <script>   
  19.     window.onload = function(){   
  20.         var canvas = document.getElementById("canvas");   
  21.         canvas.width = 800;   
  22.         canvas.height = 600;   
  23.         var context = canvas.getContext("2d");   
  24.         context.fillStyle = "#FFF";   
  25.         context.fillRect(0,0,800,600);   
  26.   
  27.         //在显示屏上制图一个大方块   
  28.         context.fillStyle = "black";   
  29.         context.fillRect(10,10,200,200);   
  30.         context.save();   
  31.         context.beginPath();   
  32.   
  33.         //裁剪画布从(0,0)点至(50,50)的四方形   
  34.         context.rect(0,0,50,50);   
  35.         context.clip();   
  36.   
  37.         //红色圆   
  38.         context.beginPath();   
  39.         context.strokeStyle = "red";   
  40.         context.lineWidth = 5;   
  41.         context.arc(100,100,100,0,Math.PI * 2,false);   
  42.         //整圆   
  43.         context.stroke();   
  44.         context.closePath();   
  45.   
  46.         context.restore();   
  47.   
  48.         //再次裁切整个画布   
  49.         context.beginPath();   
  50.         context.rect(0,0,500,500);   
  51.         context.clip();   
  52.   
  53.         //绘制二个未有裁切的蓝线   
  54.         context.beginPath();   
  55.         context.strokeStyle = "blue";   
  56.         context.lineWidth = 5;   
  57.         context.arc(100,100,50,0,Math.PI * 2,false);   
  58.         //整圆   
  59.         context.stroke();   
  60.         context.closePath();   
  61.     };   
  62. </script>   
  63. </body>   
  64. </html>  

运作结果:
图片 4

错落使用save()和restore()方法,大家能够限制画画区域。首先我们得以选择rect()方法包围一个我们意在画画的区域,然后使用clip()方法把该区域裁剪下来。

那般以往我们无论在context中做了哪些操作,唯有限定的局地显得出来。相当于说clip()的职能是限制要突显的区域。当我们不期待继续限定区域了,能够动用restore()方法跳出来,继续操作原本的context。
再来看那样二个裁剪:
图片 5

JavaScript Code复制内容到剪贴板

  1. function drawScreen() {   
  2.         var x = canvas.width / 2;   
  3.         var y = canvas.height / 2;   
  4.         var radius = 75;   
  5.         var offset = 50;   
  6.   
  7.         //裁剪的区域为 (x, y)为骨干半径为75的圆   
  8.         context.save();   
  9.         context.beginPath();   
  10.         context.arc(x, y, radius, 0, 2 * Math.PI, false);   
  11.         context.clip();   
  12.   
  13.         // 先画三个葱青的圆弧, 超越裁剪的局部不出示   
  14.         context.beginPath();   
  15.         context.arc(x - offset, y - offset, radius, 0, 2 * Math.PI, false);   
  16.         context.fillStyle = 'blue';   
  17.         context.fill();   
  18.   
  19.         // 画二个桃红的拱形, 超越裁剪的一些不展现   
  20.         context.beginPath();   
  21.         context.arc(x + offset, y, radius, 0, 2 * Math.PI, false);   
  22.         context.fillStyle = 'yellow';   
  23.         context.fill();   
  24.   
  25.         // 画八个革命的拱形, 超过裁剪的局地不显得   
  26.         context.beginPath();   
  27.         context.arc(x, y + offset, radius, 0, 2 * Math.PI, false);   
  28.         context.fillStyle = 'red';   
  29.         context.fill();   
  30.   
  31.         /*  
  32.          * restore()方法会重回到context原先的景色,在这里地是clip()此前的图景。  
  33.          * 我们能够移除context.beginPath()方法,试试会产生什么样。  
  34.          */  
  35.         context.restore();   
  36.         context.beginPath();   
  37.         context.arc(x, y, radius, 0, 2 * Math.PI, false);   
  38.         context.lineWidth = 10;   
  39.         context.strokeStyle = 'blue';   
  40.         context.stroke();   
  41.     }  

   
再也重申,常常选取裁剪功用的调用方式是

save();
clip();
restore();
这几个顺序来开展调用。

Canvas API中的clip()方法裁剪区域图像,html5canvas 使用Canvas绘制图像的时候,我们平时会想要只保留图像的一有的,那是大家得以选用...

依据法定例子画了多少个主旨图形,算是对于HTML5 Canvas有所精晓,不过感觉那在这之中数学知识太忘记了,即使在此之前数学竞赛出身,不过不菲年不用了,有所遗忘。
HTML5的canvas成分只是提供了贰个画布,而实质上的绘图专业由javascript来变成。
基本HTML不说了, 相当于搭一个架子,放三个<canvas>元素,然后首部引进一些javascript文件,那之中每八个js文件都以二个绘画的例子.
1. <!DOCTYPE html>
2. <head>
3. <meta charset="UTF-8">
4. <title>HTML5 Canvas DEMO</title>
5. <script type="text/javascript" src="js/drawRect.js"></script>
6. <script type="text/javascript" src="js/drawPath.js"></script>
7. <script type="text/javascript" src="js/drawLine.js"></script>
8. <script type="text/javascript" src="js/drawLinearGradient.js"></script>
9. <script type="text/javascript" src="js/drawTransformShape.js"></script>
10. <script type="text/javascript" src="js/drawAll.js"></script>
11. </head>
12. 
13. <body onload="drawAll('canvas')"></body>
14. <h2>canvas:松开你的梦想</h2>
15. <canvas id="canvas" width="400" height="300"/>
16. <br><br>
事例1:绘制矩形
1. /**
2.  *  This file is confidential by Charles.Wang
3.  *  Copyright belongs to Charles.wang
4.  *  You can make contact with Charles.Wang ([email protected])
5.  */
6.  
7.  //这段js代码用于画三个长方形
8.  //参数是传进来的画布canvas的id,注脚这段代码画在哪个地方
9.  function drawRect(id){
10.     
11.     //猎取canvas对象,约等于咱们js代码要画的canvas对象
12.     var canvas=document.getElementById('canvas');
13.     if (canvas==null)
14.         return false;
15.         
16.     //从canvas猎取图形上下文,这么些图片上下文context封装了不菲描绘艺术,那是叁个置于的html5对象
17.     var context=canvas.getContext('2d');
18.     //设定好当前图形上下文的体裁,夜正是当前应用颜色来绘制图形,另外还应该有一部分别的的样式
19.     context.fillStyle="#0044FF";
20.     //fillXXX用来填充图形的中间,这里fillRect,注解用当下颜色填充图形内部,4个参数分别为起源横坐标/源点纵坐标/宽度/高度
21.     context.fillRect(0,0,400,300);
22.     //颜色值不仅能够用十六进制命名,也可以选拔颜色名
23.     context.fillStyle="red";
24.     context.strokeStyle="blue";
25.     //用于安装图形边框的上升的幅度
26.     context.lineWidth=1;
27.     context.fillRect(50,50,100,100);
28.     //strokeXXX用来汇报图形的边框(stroke),这里strokeRect,申明用来绘制刚才矩形的边框
29.     context.strokeRect(50,50,100,100);
30.  }

开始

第一创设三个新目录来保存你的品种文件,然后张开你最欢欣的文件编辑器或web开拓工具。一旦您如此做了,你应有成立三个空的index.html和二个空的script.js,之后大家将持续编辑。

图片 6

接下去,大家来修改index.html文件,那不会波及众多东西,因为大家项指标大部分代码将用JavaScript编写。我们须要在HTML中做的是创制二个canvas成分和引用script.js,这一定刀切斧砍:

XHTML

<!DOCTYPE html><body> <canvas id='canvas' width='640' height='480'></canvas> <script type='text/javascript' src='script.js'></script> </body></html>

1
2
3
4
5
6
<!DOCTYPE html><body>
 
   <canvas id='canvas' width='640' height='480'></canvas>
   <script type='text/javascript' src='script.js'></script>
 
</body></html>

如此这般解释,作者使用一组标识< html >和< body>,那样,大家得以因此body为文书档案增添更加多的因素。抓住这么些机会,作者成功了一个id属性为canvas的640*480的canvas元素。

以此性情只是简短地为要素加上叁个字符串,目标是为着独一识别,稍后我们将运用那个天性,在JavaScript文件中固定大家的canvas成分。接下来,大家再利用<script>标志援引JavaScript文件,它钦命JavaScript的言语类型和script.js文件的门路。

  画出来的结果是:
图片 7  

操作DOM

如其名目“文书档案对象模型”,我们必要通过利用另一种语言,调用接口访谈HTML文书档案,在那处,大家使用的语言是JavaScript。为此,我们需求在停放文书档案对象上的布署多个简短援引。那一个指标直接对应于大家的< html >标识,类似的,它是总体项指标功底,因为大家得以经过它来获取成分,推行变化。

JavaScript

var canvas = document.getElementById('canvas');

1
var canvas = document.getElementById('canvas');

还记得大家怎么着运用id =“canvas”来定义三个canvas元素吗?以后大家利用document.getElementById方法,从HTML文书档案获取那几个因素,我们大致地传递相配所需成分id的字符串。现在大家已经获取了那个成分,接下去就足以用其进展摄影专业了。

为了接纳canvas进行美术,大家必需操作它的上下文。令人好奇的是,八个canvas不带有别的绘图的方法或性质,可是它的上下文对象有我们须要的具备办法。贰个上下文定义如下所示:

JavaScript

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

1
var context = canvas.getContext('2d');

每三个canvas有多少个分歧的上下文,依据程序的指标,只须要一个二维的上下文就足足了,它将收获咱们要求创制笑貌的具有绘图方法。

在我们初叶从前,小编必需告知您,上下文存储了三种颜色属性,贰个用来画笔(stroke),二个用以填充(fill)。对于我们的笑颜,必要设置填充为香艳,画笔为石绿。

JavaScript

context.fillStyle = 'yellow'; context.strokeStyle = 'black';

1
2
context.fillStyle = 'yellow';
context.strokeStyle = 'black';

安装完上下文所需的颜色后,大家必得为脸画二个圆。不幸的是,上下文中未有圆的预定义方法,因而我们须求利用所谓的门路(path)。路线只是一多级的无休止的直线和曲线,路线在绘图实现后关门。

JavaScript

context.beginPath(); context.arc(320, 240, 200, 0, 2 * Math.PI); context.fill(); context.stroke(); context.closePath();

1
2
3
4
5
context.beginPath();
context.arc(320, 240, 200, 0, 2 * Math.PI);
context.fill();
context.stroke();
context.closePath();

如此那般表明,大家选拔上下文开端贰个新的门道。接下来,大家在点(320、240)上成立三个半径为200像素的弧形。尾数参数钦命创设圆弧的上马和结尾角度,所以我们传递0和2 *Math.PI,来成立一个完好的圆。最终,大家使用上下文基于大家曾经设置的颜色实行填写并画出路线。

纵然关闭路线不是本子的职能所必需的,但大家依然要求关闭路径,这样就足以起来绘制笑颜中新的肉眼和嘴。眼睛能够由此平等的办法产生,每一个眼睛必要比较小的半径和不一致的职位。但第一大家必得牢记设置填充颜色为鲜绿。

JavaScript

context.fillStyle = 'white'; context.beginPath(); context.arc(270, 175, 30, 0, 2 * Math.PI); context.fill(); context.stroke(); context.closePath(); context.beginPath(); context.arc(370, 175, 30, 0, 2 * Math.PI); context.fill(); context.stroke(); context.closePath();

1
2
3
4
5
6
7
8
9
10
11
12
13
context.fillStyle = 'white';
 
context.beginPath();
context.arc(270, 175, 30, 0, 2 * Math.PI);
context.fill();
context.stroke();
context.closePath();
 
context.beginPath();
context.arc(370, 175, 30, 0, 2 * Math.PI);
context.fill();
context.stroke();
context.closePath();

如上是有关眼睛的持有代码。现在嘴巴很平日,但此次大家不会填满圆弧,大家的角度将配置为二个半圆。要变成这点,我们要求设置发轫角度为零和得了角度为-1 * Math.PI。请牢记,不要忘记将画笔的颜色设置为革命。

JavaScript

context.fillStyle = 'red'; context.beginPath(); context.arc(320, 240, 150, 0, -1 * Math.PI); context.fill() context.stroke(); context.closePath();

1
2
3
4
5
6
7
context.fillStyle = 'red';
 
context.beginPath();
context.arc(320, 240, 150, 0, -1 * Math.PI);
context.fill()
context.stroke();
context.closePath();

1. /**
2.  *  This file is confidential by Charles.Wang
3.  *  Copyright belongs to Charles.wang
4.  *  You can make contact with Charles.Wang ([email protected])
5.  */
6.  
7.  function drawPath(id){
8.     
9.     var canvas=document.getElementById(id);
10.     if(canvas == null)
11.         return false;
12.     
13.     //依然先获得canvas对象和上下文对象
14.     var context = canvas.getContext("2d");
15.     //先绘制画布的底图
16.     context.fillStyle="#EEEEEF";
17.     context.fillRect(0,0,400,300);
18.     
19.     //用循环绘制拾个圆圈
20.     var n = 0;
21.     for(var i=0 ;i<10;i++){
22.         //起头创办路线,因为要画圆,圆本质上也是一个路子,这里向canvas说明,笔者要起初画了,那是起源
23.         context.beginPath();
24.         //画八个弧形(arcade),因为圆是一种极其的拱形
25.         //6个参数分别是 起源横坐标,源点纵坐标,圆的半径,开始弧度,截止弧度(2PI恰恰是360度),是还是不是顺时针
26.         context.arc(i*25,i*25,i*10,0,Math.PI*2,true);
27.         //关闭路线
28.         context.closePath();
29.         context.fillStyle="rgba(255,0,0,0.25)";
30.         //填充刚才所画的圆形
31.         context.fill();
32.     }
33.  }
 画出来的结果是:

祝贺

干的不错。你早已到位了本学科,你做了三个很棒的笑容,同一时候学习了愈来愈多关于Canvas、HTML、JavaScript,和文书档案对象模型的学识。借令你有任何难点,请留言。

点击这里查看程序的运营景况.

赞 2 收藏 2 评论

图片 8

关于笔者:cucr

图片 9

博客园今日头条:@hop_ping 个人主页 · 笔者的稿子 · 17

图片 10

 

事例3:绘制直线,並且用直线组合复杂图形
1. /**
2.  *  This file is confidential by Charles.Wang
3.  *  Copyright belongs to Charles.wang
4.  *  You can make contact with Charles.Wang ([email protected])
5.  */
6.  
7.  function drawLine(id){
8.     
9.     var canvas=document.getElementById(id);
10.     if(canvas==null)
11.     return false;
12.     var context = canvas.getContext('2d');
13.     context.fillStyle="#FF00FF";
14.     context.fillRect(0,0,400,300);
15.     
16.     var n=0;
17.     var dx=150;
18.     var dy=150;
19.     var s = 100;
20.     context.beginPath();
21.     context.fillStyle='rgb(100,255,100)';
22.     context.strokeStyle='rgb(0,0,100)';
23.     var x = Math.sin(0);
24.     var y = Math.cos(0);
25.     var dig=Math.PI/15*11;
26.     for(var i = 0;i<30;i++){
27.         var x = Math.sin(i*dig);
28.         var y = Math.cos(i*dig);
29.         //用三角函数总结顶点
30.         context.lineTo(dx+x*s,dy+y*s);
31.     }
32.     context.closePath();
33.     context.fill();
34.     context.stroke();
35.  }
画出来的结果是:

 图片 11

 

事例4:使用线性渐变
1. /**
2.  *  This file is confidential by Charles.Wang
3.  *  Copyright belongs to Charles.wang
4.  *  You can make contact with Charles.Wang ([email protected])
5.  */
6.  
7.  //渐变用于填充,是指填充图形时从某种颜色逐步过渡到其他一种颜色
8.  //线性渐变是指在一个线条之间展开耳濡目染,线段上每一个点随着离开起源的位移值的变迁,其颜色也在变化
9. function drawLinearGradient(id){
10.     
11.     var canvas = document.getElementById(id);
12.     if(canvas==null)
13.     return false;
14.     
15.     //大家照旧先绘制底图,此番,大家的底图也用了渐变
16.     var context = canvas.getContext('2d');
17.     //第二个渐变,用于底图,它调用了createlinearGradient创造了多个渐变
18.     //4个参数分别为起源的横坐标,起源的纵坐标,甘休点的横坐标,甘休点的纵坐标,所以本例正是从(0,0)到(0,300),所以是一个竖直向下的渐变 www.2cto.com
19.     var gradient1=context.createLinearGradient(0,0,0,300);
20.     //addColorStop能够设置渐变的颜色,第壹个参数表示偏移量(0-1)之间,第一个参数表示颜色
21.     //所以,大家定义了从深橙到水晶绿的渐变
22.     gradient1.addColorStop(0,'rgb(255,255,0)');
23.     gradient1.addColorStop(1,'rgb(0,255,255)');
24.     //将上下文对象关系到当下的渐变设定作为填充风格
25.     context.fillStyle=gradient1;
26.     //用大家定义的渐变来绘制底图
27.     context.fillRect(0,0,400,300);
28.     
29.     var n = 0;
30.     //此次大家要画一组圆圈,大家定义三个从(0,0)到(300,0)也正是水平方向从左到右的渐变
31.     var gradient2=context.createLinearGradient(0,0,300,0);
32.     //设置渐变色的原初颜色和终止颜色
33.     gradient2.addColorStop(0,'rgba(0,0,255,0.5');
34.     gradient2.addColorStop(1,'rgba(255,0,0,0.5)');
35.     //用循环画圆,并且用渐变色填充
36.     for(var i=0;i<10;i++){
37.         context.beginPath();
38.         context.fillStyle=gradient2;
39.         context.arc(i*25,i*25,i*10,0,Math.PI*2,true);
40.         context.closePath();
41.         context.fill();
42.     }
43. }
画出来的结果是:

 图片 12

 

事例5:图形基本转移(平移,缩放,旋转)
1. /**
2.  *  This file is confidential by Charles.Wang
3.  *  Copyright belongs to Charles.wang
4.  *  You can make contact with Charles.Wang ([email protected])
5.  */
6.  
7.  
8.  //那一个函数用于演示一些常用的坐标转变
9.  //常见的坐标转换有移动,缩放,旋转
10.  function drawTransformShape(id){
11.     
12.     var canvas = document.getElementById(id);
13.     if(canvas == null) 
14.         return false;
15.     //画底图
16.     var context = canvas.getContext('2d');
17.     context.fillStyle="#FF00FF";
18.     context.fillRect(0,0,400,300);
19.     
20.     //移动坐标轴的原点,因为此地向侧面平移了200,向下活动了50,所以水平方向是居中了
21.     context.translate(200,50);
22.     
23.     //循环能够画一雨后苦笋的五角星
24.     for(var i=0;i<50;i++){
25.         //每回坐标轴的原点往右下各移动25像素
26.         context.translate(25,25);
27.         //並且每便实行缩放到0.95倍
28.         context.scale(0.95,0.95);
29.         //然后把那些图形实行旋转,每趟转动+18度(也等于顺时针)
30.         context.rotate(Math.PI/10);
31.         //然后在这段日子岗位画三个五角星
32.         create5star(context);
33.         //况且填充作前五角星
34.         context.fill();
35.     }
36.     
37.  }
38.  
39.  
40.  //这么些函数用于绘制三个五角星
41.  function create5star(context){
42.     var n = 0;
43.     var dx = 100;
44.     var dy = 0 ;
45.     var s = 50;
46.     //创设路线
47.     context.beginPath();
48.     context.fillStyle="rgba(255,0,0,0.5)";
49.     var x = Math.sin(0);
50.     var y= Math.cos(0);
51.     var dig = Math.PI/5 *4;
52.     //画五角星的五条边
53.     for(var i = 0;i<5;i++){
54.         var x = Math.sin(i*dig);
55.         var y = Math.cos(i*dig);
56.         context.lineTo(dx+x*s,dy+y*s);
57.     }
58.     context.closePath();
59.  }
60.  
61.  
画出来的结果是:

 图片 13

摘自 平行线的密集

Canvas有所理解,不过以为这里面数学知识太忘记了,即使从前数学竞赛出身,然则过多年不用...

本文由9159.com发布于前端,转载请注明出处:在画布内使用路径,这里面每一个js文件都是一个

关键词:

上一篇:没有了
下一篇:没有了