使用HTML5中的Canvas绘制一张笑脸的科目,canvas基本绘图之绘制曲线

用HTML5 Canvas画一张笑脸

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

本文由 伯乐在线 –
cucr使用HTML5中的Canvas绘制一张笑脸的科目,canvas基本绘图之绘制曲线。
翻译,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基本绘图之绘制曲线,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文件的路线。

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

祝贺

干的正确性。你已经达成了本课程,你做了一个很棒的笑颜,同时学习了越多关于Canvas、HTML、JavaScript,和文档对象模型的文化。如果你有别的问题,请留言。

点击那里查看程序的运行境况.

赞 2 收藏 2
评论

至于小编:cucr

亚洲必赢官网 12

新浪天涯论坛:@hop_ping
个人主页 ·
我的篇章 ·
17

亚洲必赢官网 13

网站地图xml地图