您的位置:新葡亰496net > 新葡亰官网 > 新葡亰496net:办法裁剪区域图像,canvas基本绘图

新葡亰496net:办法裁剪区域图像,canvas基本绘图

发布时间:2019-07-05 08:42编辑:新葡亰官网浏览(152)

    用HTML5 Canvas画一张笑脸

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

    本文由 伯乐在线 - cucr 翻译,JustinWu 校稿。未经许可,禁止转载!
    英文出处:code.tutsplus.com。欢迎加入翻译组。

    新葡亰496net 1

    今天,你将学习一项称为Canvas(画布)的web技术,以及它和文档对象模型(通常被称为DOM)的关联。这项技术非常强大,因为它使web开发人员能够通过使用JavaScript访问和修改HTML元素。

    现在你可能想知道为什么我们需要大刀阔斧地使用JavaScript。简而言之,HTML和JavaScript是相互依存的,一些HTML组件,如canvas元素,并不能脱离JavaScript单独使用。毕竟,如果我们不能在上面绘图,那canvas能派什么用处呢?

    为了更好地理解这个概念,我们一起通过一个示例项目来尝试画一个简单的笑脸。让我们开始吧。

    利用HTML5中的Canvas绘制一张笑脸的教程,html5canvas

    这篇文章主要介绍了利用HTML5中的Canvas绘制一张笑脸的教程,使用Canvas进行绘图是HTML5中的基本功能,需要的朋友可以参考下

    新葡亰496net 2今天,你将学习一项称为Canvas(画布)的web技术,以及它和文档对象模型(通常被称为DOM)的关联。这项技术非常强大,因为它使web开发人员能够通过使用JavaScript访问和修改HTML元素。

    现在你可能想知道为什么我们需要大刀阔斧地使用JavaScript。简而言之,HTML和JavaScript是相互依存的,一些HTML组件,如canvas元素,并不能脱离JavaScript单独使用。毕竟,如果我们不能在上面绘图,那canvas能派什么用处呢?

    为了更好地理解这个概念,我们一起通过一个示例项目来尝试画一个简单的笑脸。让我们开始吧。
    开始

    首先创建一个新目录来保存你的项目文件,然后打开你最喜欢的文本编辑器或web开发工具。一旦你这样做了,你应该创建一个空的index.html和一个空的script.js,之后我们将继续编辑。

    新葡亰496net 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>  

    运行结果:
    新葡亰496net 4

    混合使用save()和restore()方法,我们可以限定画画区域。首先我们可以使用rect()方法包围一个我们希望画画的区域,然后使用clip()方法把该区域裁剪下来。

    这样以后我们不管在context中做了什么操作,只有限定的部分显示出来。也就是说clip()的作用是限定要显示的区域。当我们不希望继续限定区域了,可以使用restore()方法跳出来,继续操作原来的context。
    再来看这样一个裁剪:
    新葡亰496net 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();   

    效果如下:

    新葡亰496net 6

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

    新葡亰496net 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.   

    效果如下:

    新葡亰496net 8

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

    新葡亰496net 9

    曲线的开始点是当前路径中最后一个点。如果路径不存在,那么请使用 beginPath() 和 moveTo() 方法来定义开始点。

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

    新葡亰496net 10

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持帮客之家。

    canvas基本绘图之绘制曲线,html5canvas canvas/canvas 是HTML5中新增的标签,用于绘制图形,实际上,这个标签和其他的标签一样,其特殊之处...

    开始

    首先创建一个新目录来保存你的项目文件,然后打开你最喜欢的文本编辑器或web开发工具。一旦你这样做了,你应该创建一个空的index.html和一个空的script.js,之后我们将继续编辑。

    新葡亰496net 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文件的路径。

      画出来的结果是:
    新葡亰496net 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 *新葡亰496net:办法裁剪区域图像,canvas基本绘图之绘制曲线。 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.     //用循环绘制10个圆形
    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 评论

    新葡亰496net 13

    关于作者:cucr

    新葡亰496net 14

    新浪微博:@hop_ping 个人主页 · 我的文章 · 17

    新葡亰496net 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.  }
    画出来的结果是:

     新葡亰496net 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])
    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. }
    画出来的结果是:

     新葡亰496net 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.  
    画出来的结果是:

     新葡亰496net 18

    摘自 平行线的凝聚

    Canvas有所了解,但是感觉这里面数学知识太忘记了,虽然以前数学竞赛出身,但是好多年不用...

    本文由新葡亰496net发布于新葡亰官网,转载请注明出处:新葡亰496net:办法裁剪区域图像,canvas基本绘图

    关键词:

上一篇:时刻流互连网之以后

下一篇:没有了