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

canvas基本绘图之绘制曲线,Canvas画一张笑脸

2019-06-29 作者:澳门新萄京赌场网址   |   浏览(186)

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

HTML5 canvas基本绘图之绘制曲线,html5canvas

<canvas></canvas>是HTML5中新添的价签,用于绘制图形,实际上,这么些标签和任何的标签同样,其卓绝之处在于该标签能够收获多个CanvasRenderingContext2D对象,大家得以由此JavaScript脚本来调整该对象开展绘图。

<canvas></canvas>只是二个绘制图形的器皿,除了id、class、style等属性外,还应该有height和width属性。在<canvas>>成分上绘制首要有三步:

1.取得<canvas>成分对应的DOM对象,那是叁个Canvas对象;
2.调用Canvas对象的getContext()方法,获得贰个CanvasRenderingContext2D对象;
3.调用CanvasRenderingContext2D对象开始展览绘图。

制图曲线

跟绘制曲线的有多个函数,分别是:

•context.arc(x,y,r,sAngle,eAngle,counterclockwise);用来创建弧/曲线(用于创设圆或部分圆)。接收的参数含义:
| 参数 | 含义 |
| :————- |:————-|
| x | 圆的主干的 x 坐标 |
|y|圆的基本的 y 坐标|
|r|圆的半径|
|sAngle|初步角,以弧度计(弧的圆形的三点钟职责是 0 度)|
|eAngle|截止角,以弧度计|
|counterclockwise|可选。规定相应逆时针依然顺时针绘图。False = 顺时针,true = 逆时针|

下边是多少个arc()函数的多少个示范: 

JavaScript Code复制内容到剪贴板

  1. var canvas = document.getElementById("canvas");   
  2. var context = canvas.getContext("2d");   
  3.   
  4. context.strokeStyle = "#F22D0D";   
  5. context.lineWidth = "2";   
  6. //绘制圆   
  7. context.beginPath();   
  8. context.arc(100,100,40,0,2*Math.PI);   
  9. context.stroke();   
  10.   
  11. //绘制半圆   
  12. context.beginPath();   
  13. context.arc(200,100,40,0,Math.PI);   
  14. context.stroke();   
  15.   
  16. //绘制半圆,逆时针   
  17. context.beginPath();   
  18. context.arc(300,100,40,0,Math.PI,true);   
  19. context.stroke();   
  20.   
  21. //绘制封闭半圆   
  22. context.beginPath();   
  23. context.arc(400,100,40,0,Math.PI);   
  24. context.closePath();   
  25. context.stroke();   

成效如下:

澳门新萄京官方网站 6

•context.arcTo(x1,y1,x2,y2,r); 在画布上成立介于八个切线之间的弧/曲线。接收的参数含义:

澳门新萄京官方网站 7

这里需求专注的是arcTo函数绘制的曲线的开头点须求经过moveTo()函数来安装,上边采纳arcTo函数绘制四个圆角矩形: 

JavaScript Code复制内容到剪贴板

  1. function createRoundRect(context , x1 , y1 , width , height , radius)   
  2.     {   
  3.         // 移动到左上角   
  4.         context.moveTo(x1   radius , y1);   
  5.         // 增加一条连接到右上角的线条   
  6.         context.lineTo(x1   width - radius, y1);   
  7.         // 增加一段圆弧   
  8.         context.arcTo(x1   width , y1, x1   width, y1   radius, radius);   
  9.         // 增添一条连接到右下角的线条   
  10.         context.lineTo(x1   width, y1   height - radius);   
  11.         // 增添一段圆弧   
  12.         context.arcTo(x1   width, y1   height , x1   width - radius, y1   height , radius);   
  13.         // 增加一条连接到左下角的线条   
  14.         context.lineTo(x1   radius, y1   height);    
  15.         // 增加一段圆弧   
  16.         context.arcTo(x1, y1   height , x1 , y1   height - radius , radius);   
  17.         // 增多一条连接到左上角的线条   
  18.         context.lineTo(x1 , y1   radius);   
  19.         // 增添一段圆弧   
  20.         context.arcTo(x1 , y1 , x1   radius , y1 , radius);   
  21.         context.closePath();   
  22.     }   
  23.     // 获取canvas元素对应的DOM对象   
  24.     var canvas = document.getElementById('mc');   
  25.     // 获取在canvas上制图的CanvasRenderingContext2D对象   
  26.     var context = canvas.getContext('2d');   
  27.     context.lineWidth = 3;   
  28.     context.strokeStyle = "#F9230B";   
  29.     createRoundRect(context , 30 , 30 , 400 , 200 , 50);   
  30.     context.stroke();   
  31.   

效率如下:

澳门新萄京官方网站 8

•context.quadraticCurveTo(cpx,cpy,x,y);绘图一回贝塞曲线,参数含义如下:

澳门新萄京官方网站 9

曲线的起来点是现阶段路径中最终一个点。若是路线不存在,那么请使用 beginPath() 和 moveTo() 方法来定义伊始点。

 •context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y); 绘制一遍贝塞尔曲线,参数如下:

澳门新萄京官方网站 10

如上便是本文的全体内容,希望对大家的求学抱有协助,也期待我们多多帮忙帮客之家。

canvas基本绘图之绘制曲线,html5canvas canvas/canvas 是HTML5中新扩张的价签,用于绘制图形,实际上,这些标签和别的的标签一样,其优秀之处...

开始

首先创设几个新目录来保存你的花色文件,然后展开你最喜爱的文件编辑器或web开拓工具。一旦您这么做了,你应有创造三个空的index.html和一个空的script.js,之后我们将持续编辑。

澳门新萄京官方网站 11

接下去,大家来修改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文件的路子。

  画出来的结果是:
澳门新萄京官方网站 12  

操作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.     //用循环绘制11个圆形
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 评论

澳门新萄京官方网站 13

至于小编:cucr

澳门新萄京官方网站 14

腾讯网今日头条:@hop_ping 个人主页 · 小编的稿子 · 17

澳门新萄京官方网站 15

 

事例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.  }
画出来的结果是:

 澳门新萄京官方网站 16

 

事例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]canvas基本绘图之绘制曲线,Canvas画一张笑脸。)
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. }
画出来的结果是:

 澳门新萄京官方网站 17

 

事例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.  
画出来的结果是:

 澳门新萄京官方网站 18

摘自 平行线的密集

Canvas有所了然,然则以为这里面数学知识太忘记了,固然从前数学比赛出身,可是众多年不用...

本文由澳门新萄京官方网站发布于澳门新萄京赌场网址,转载请注明出处:canvas基本绘图之绘制曲线,Canvas画一张笑脸

关键词: