澳门新萄京:Canvas来绘制三角形和矩形等多边形
分类:澳门新萄京最大平台

HTML5 Canvas绘制文本及图片的基础教程,

制图像和文字本

在HTML5中,大家还是可以在Canvas「画布」上绘制大家所需的文书文字,其中所关联到的CanvasRenderingContext2D对象的机要质量和措施如下:

属性或方法 基本描述
font 设置绘制文字所使用的字体,例如20px 宋体,默认值为10px sans-serif。该属性的用法与css font属性一致,例如italic bold 14px/30px Arial,宋体
fillStyle 用于设置画笔填充路径内部的颜色、渐变和模式。该属性的值可以是一个表示CSS颜色值的字符串。如果你的绘制需求比较复杂,该属性的值还可以是一个CanvasGradient对象或者CanvasPattern对象
strokeStyle 用于设置画笔绘制路径的颜色、渐变和模式。该属性的值可以是一个表示CSS颜色值的字符串。如果你的绘制需求比较复杂,该属性的值还可以是一个CanvasGradient对象或者CanvasPattern对象
fillText(string text, int x, int y[, int maxWidth]) 从指定坐标点位置开始绘制填充的文本文字。参数maxWidth是可选的,如果文本内容宽度超过该参数设置,则会自动按比例缩小字体以适应宽度。与本方法对应的样式设置属性为fillStyle
strokeText(string text, int x, int y[, int maxWidth]) 从指定坐标点位置开始绘制非填充的文本文字(文字内部是空心的)。参数maxWidth是可选的,如果文本内容宽度超过该参数设置,则会自动按比例缩小字体以适应宽度。该方法与fillText()用法一致,不过strokeText()绘制的文字内部是非填充(空心)的,fillText()绘制的文字是内部填充(实心)的。与本方法对应的样式设置属性为strokeStyle

从下边包车型客车API描述音信中我们可以摸清,在Canvas中得以应用二种办法来绘制文本文字:一种是采用fillText() fillStyle来绘制填充(实心)的文字;一种是使用strokeText() strokeStyle绘制非填充(空心)的文字。

下边,我们先来拜望怎样使用canvas绘制实心文字,具体html代码如下:

JavaScript Code复制内容到剪贴板

  1. <!DOCTYPE html>   
  2. <html>   
  3. <head>   
  4. <meta charset="UTF-8">   
  5. <title>HTML5 Canvas绘制文本文字入门示例</title>   
  6. </head>   
  7. <body>   
  8.   
  9. <!-- 增多canvas标签,并加上莲灰边框以便于在页面上查看 -->   
  10. <canvas id="myCanvas" width="400px" height="300px" style="border: 1px solid red;">   
  11. 你的浏览器不帮忙canvas标签。   
  12. </canvas>   
  13.   
  14. <script type="text/javascript">   
  15. //获取Canvas对象(画布)   
  16. var canvas = document.getElementById("myCanvas");   
  17. //轻易地检查测验当前浏览器是或不是援救Canvas对象,以防在局地不帮衬html5的浏览器中唤醒语法错误   
  18. if(canvas.getContext){     
  19.     //获取相应的CanvasRenderingContext2D对象(画笔)   
  20.     var ctx = canvas.getContext("2d");   
  21.        
  22.     //设置字体样式   
  23.     ctx.font = "30px Courier New";   
  24.     //设置字体填充颜色   
  25.     ctx.fillStyle = "blue";   
  26.     //从坐标点(50,50)早先绘制文字   
  27.     ctx.fillText("CodePlayer 汉语测量检验", 50, 50);   
  28. }   
  29. </script>   
  30. </body>   
  31. </html>  

对应的显得效果如下:
澳门新萄京 1

紧接着,大家使任何条件条件均保持不改变,再一次行使strokeText() strokeStyle方式来绘制上述示范中的文字,对应的JavaScript代码如下:

JavaScript Code复制内容到剪贴板

  1. <script type="text/javascript">   
  2. //获取Canvas对象(画布)   
  3. var canvas = document.getElementById("myCanvas");   
  4. //轻巧地检查测验当前浏览器是或不是支持Canvas对象,防止在有个别不辅助html5的浏览器中提醒语法错误   
  5. if(canvas.getContext){     
  6.     //获取相应的CanvasRenderingContext2D对象(画笔)   
  7.     var ctx = canvas.getContext("2d");   
  8.        
  9.     //设置字体样式   
  10.     ctx.font = "30px Courier New";   
  11.     //设置字体颜色   
  12.     ctx.strokeStyle = "blue";   
  13.     //从坐标点(50,50)开首绘制文字   
  14.     ctx.strokeText("CodePlayer 中文测验", 50, 50);   
  15. }   
  16. </script>  

笔者们再一次使用浏览器访谈页面,将会看出如下展现效果(效果图片中的"CodePlayer"字样其实也是空心的,只是出于字体十分的小导致两边看起来重叠在了同步):
澳门新萄京 2

制图图片 在html5中,除了运用canvas绘制矢量图形之外,大家还是能够在canvas「画布」上制图现成的图像文件。

先是,咱们来拜访使用canvas绘制图像文件需求用到CanvasRenderingContext2D对象的如何重大性能和措施:

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

  1. drawImage(mixed image, int x, int y)  

以canvas上点名的坐标点初始,依照图像的原始尺寸大小绘制整个图像。这里的image可以是Image对象,也足以是Canvas对象(下同)。

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

  1. drawImage(mixed image, int x, int y, int width, int height)  

以canvas上钦赐的坐标点早先,以钦点的轻重(width和height)绘制整个图像,图像将依照钦赐的尺寸自动实行对应的缩放。
drawImage(mixed image, int imageX, int imageY, int imageWidth, int imageHeight, int canvasX, int canvasY, int canvasWidth, int canvasHeight)
将钦定图像的有些图像(以(imageX, imageY)为左上角、宽度为imageWidth、高度为imageHeight的矩形部分)绘制到canvas中以(canvasX,canvasY)为左上角坐标、宽度为canvasWidth、中度为canvasHeight的矩形区域中
科学,你从未看错。要在canvas中绘制图像,大家得以采取一个名字为drawImage()的办法,可是该方法具备三种分化的变体,种种方法变体允许抽取的参数不唯有数量差别,连参数的意义也不尽同样。

在此间,大家对上述四个变体分别比方表达。

率先,大家应用drawImage()的第贰个变体在canvas上制图Google的logo图片(原始尺寸为550 x 190)。

JavaScript Code复制内容到剪贴板

  1. <!DOCTYPE html>   
  2. <html>   
  3. <head>   
  4. <meta charset="UTF-8">   
  5. <title>HTML5 Canvas绘制图像入门示例</title>   
  6. </head>   
  7. <body>   
  8.   
  9. <!-- 增多canvas标签,并累加深青色边框以便于在页面上查看 -->   
  10. <canvas id="myCanvas" width="400px" height="300px" style="border: 1px solid red;">   
  11. 你的浏览器不帮忙canvas标签。   
  12. </canvas>   
  13.   
  14. <script type="text/javascript">   
  15. //获取Canvas对象(画布)   
  16. var canvas = document.getElementById("myCanvas");   
  17. //轻巧地检验当前浏览器是或不是辅助Canvas对象,避防在部分不援助html5的浏览器中升迁语法错误   
  18. if(canvas.getContext){     
  19.     //获取相应的CanvasRenderingContext2D对象(画笔)   
  20.     var ctx = canvas.getContext("2d");   
  21.        
  22.     //成立新的图样对象   
  23.     var img = new Image();   
  24.     //内定图片的U途乐L   
  25.     img.src = "";   
  26.     //浏览器加载图片完成后再绘制图片   
  27.     img.onload = function(){   
  28.         //以Canvas画布上的坐标(10,10)为起先点,绘制图像   
  29.         ctx.drawImage(img, 10, 10);                
  30.     };   
  31. }   
  32. </script>   
  33. </body>   
  34. </html>  

相应的来得效果如下:
澳门新萄京 3

出于谷歌的图标图像过大,超越了canvas的尺寸范围,因而只能展现出图像的一有个别。此时,我们运用第二个变体将谷歌(Google)的logo图像降低到内定的上升的幅度和惊人,并绘制到canvas中。

JavaScript Code复制内容到剪贴板

  1. <script type="text/javascript">   
  2. //获取Canvas对象(画布)   
  3. var canvas = document.getElementById("myCanvas");   
  4. //简单地检验当前浏览器是还是不是帮忙Canvas对象,以防在部分不协助html5的浏览器中晋升语法错误   
  5. if(canvas.getContext){     
  6.     //获取相应的CanvasRenderingContext2D对象(画笔)   
  7.     var ctx = canvas.getContext("2d");   
  8.        
  9.     //成立新的图纸对象   
  10.     var img = new Image();   
  11.     //钦点图片的U瑞鹰L   
  12.     img.src = "";   
  13.     //浏览器加载图片完成后再绘制图片   
  14.     img.onload = function(){   
  15.         //以Canvas画布上的坐标(10,10)为先导点,绘制图像   
  16.         //图像的幅度和可观分别缩放到350px和100px   
  17.         ctx.drawImage(img, 10, 10, 350, 100);                
  18.     };   
  19. }   
  20. </script>  

大家将谷歌的logo图像实行缩放后,此时就能够在canvas中看到整个图像了:
澳门新萄京 4

末段,大家利用第八个点子变体将Googlelogo中的"Goo"部分图像绘制到canvas中("Goo"部分的图像大小能够使用Photoshop等工具度量得出,这里一向动成本量后的结果)。

JavaScript Code复制内容到剪贴板

  1. <script type="text/javascript">   
  2. //获取Canvas对象(画布)   
  3. var canvas = document.getElementById("myCanvas");   
  4. //轻便地检查评定当前浏览器是不是支持Canvas对象,防止在部分不补助html5的浏览器中升迁语法错误   
  5. if(canvas.getContext){     
  6.     //获取相应的CanvasRenderingContext2D对象(画笔)   
  7.     var ctx = canvas.getContext("2d");   
  8.        
  9.     //创制新的图纸对象   
  10.     var img = new Image();   
  11.     //钦赐图片的UHighlanderL   
  12.     img.src = "";   
  13.     //浏览器加载图片完结后再绘制图片   
  14.     img.onload = function(){   
  15.         /*  
  16.          * 将图像左边的"Goo"部分(即以坐标(0,0)为左上角坐标、宽度为332px、高度为190px的部分图像)  
  17.          * 绘制到canvas中以坐标(10,10)为左上角、宽度为332px、中度为190px的矩形区域  
  18.          *  
  19.          * canvas绘制图像的对象区域的大幅和中度与截取的有个别图像尺寸保持一致,  
  20.          * 就意味着不实行缩放,以原始尺寸截取部分图像  
  21.          */           
  22.         ctx.drawImage(img, 0, 0, 332, 190, 10, 10, 332, 190);                
  23.     };   
  24. }   
  25. </script>  

那时,咱们就足以看看canvas中显得的"Goo"局地图像了:
澳门新萄京 5

Canvas绘制文本及图片的基础教程, 绘制文本 在HTML5中,大家仍是能够在Canvas「画布」上制图大家所需的文书文字,当中所波及到的Canva...

依据HTML5 Canvas来绘制三角形和矩形等多边形的点子,html5canvas

运用HTML5 Canvas绘制多边形所需的CanvasRenderingContext2D对象的关键质量和艺术(有「()」者为艺术)如下:

属性或方法 基本描述
strokeStyle 用于设置画笔绘制路径的颜色、渐变和模式。该属性的值可以是一个表示css颜色值的字符串。如果你的绘制需求比较复杂,该属性的值还可以是一个CanvasGradient对象或者CanvasPattern对象
globalAlpha 定义绘制内容的透明度,取值在0.0(完全透明)和1.0(完全不透明)之间,默认值为1.0。
lineWidth 定义绘制线条的宽度。默认值是1.0,并且这个属性必须大于0.0。较宽的线条在路径上居中,每边各有线条宽的一半。
lineCap 指定线条两端的线帽如何绘制。合法的值是 butt、round和square。默认值是"butt"。
beginPath() 开始一个新的绘制路径。每次绘制新的路径之前记得调用该方法。
moveTo(int x, int y) 定义一个新的绘制路径的起点坐标
lineTo(int x, int y) 定义一个绘制路径的中间点坐标
stroke(int x, int y) 沿着绘制路径的坐标点顺序绘制直线
closePath() 如果当前的绘制路径是打开的,则闭合该绘制路径。

制图三角形

JavaScript Code复制内容到剪贴板

  1. <!DOCTYPE html>   
  2. <html>   
  3. <head>   
  4. <meta charset="UTF-8">   
  5. <title>HTML5 Canvas绘制三角形入门示例</title>   
  6. </head>   
  7. <body>   
  8.   
  9. <!-- 增添canvas标签,并累加粉红色边框以便于在页面上查看 -->   
  10. <canvas id="myCanvas" width="400px" height="300px" style="border: 1px solid red;">   
  11. 你的浏览器不扶助canvas标签。   
  12. </canvas>   
  13.   
  14.   
  15. <script type="text/javascript">   
  16. //获取Canvas对象(画布)   
  17. var canvas = document.getElementById("myCanvas");   
  18. //轻易地检查测量试验当前浏览器是或不是协理Canvas对象,避防在局地不帮忙html5的浏览器中提拔语法错误   
  19. if(canvas.getContext){     
  20.     //获取相应的CanvasRenderingContext2D对象(画笔)   
  21.     var ctx = canvas.getContext("2d");     
  22.        
  23.     //开始三个新的绘图路线   
  24.     ctx.beginPath();   
  25.     //设置线条颜色为钴紫   
  26.     ctx.strokeStyle = "blue";   
  27.     //设置路线起源坐标   
  28.     ctx.moveTo(20, 50);   
  29.     //绘制直线线段到坐标点(60, 50)   
  30.     ctx.lineTo(20, 100);   
  31.     //绘制直线线段到坐标点(60, 90)   
  32.     ctx.lineTo(70, 100);       
  33.     //先关闭绘制路线。注意,此时将会动用直线连接当前端点和初阶端点。   
  34.     ctx.closePath();   
  35.     //最终,遵照绘制路线画出直线   
  36.     ctx.stroke();   
  37. }   
  38. </script>   
  39. </body>   
  40. </html>     

对应的显得效果如下:
澳门新萄京 6

绘图矩形 所以将Canvas绘制矩形单独建议来,是因为Canvas的画笔工具——CanvasRenderingContext2D对象为绘制矩形提供了专项使用的点子。

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

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="UTF-8">  
  5. <title>HTML5 Canvas绘制矩形入门示例</title>  
  6. </head>  
  7. <body>  
  8.   
  9. <!-- 增添canvas标签,并累加深黑边框以便于在页面上查看 -->  
  10. <canvas id="myCanvas" width="400px" height="300px" style="border: 1px solid red;">  
  11. 你的浏览器不扶助canvas标签。   
  12. </canvas>  
  13.   
  14. <script type="text/javascript">  
  15. //获取Canvas对象(画布)   
  16. var canvas = document.getElementById("myCanvas");   
  17. //简单地检查实验当前浏览器是还是不是协助Canvas对象,防止在局地不援救html5的浏览器中晋升语法错误   
  18. if(canvas.getContext){     
  19.     //获取相应的CanvasRenderingContext2D对象(画笔)   
  20.     var ctx = canvas.getContext("2d");     
  21.        
  22.     //伊始叁个新的绘图路线   
  23.     ctx.beginPath();   
  24.     //设置线条颜色为玉中蓝   
  25.     ctx.strokeStyle = "blue";   
  26.     //以canvas中的坐标点(10,10)作为绘制开头点,绘制贰个幅度为80px、高度为50px的矩形   
  27.     ctx.rect(10, 10, 80, 50);   
  28.     //依据钦定的不二秘技绘制直线   
  29.     ctx.stroke();   
  30.     //关闭绘制路线   
  31.     ctx.closePath();   
  32. }   
  33. </script>  
  34. </body>  
  35. </html>  

对应的矩形效果展现如下:
澳门新萄京 7

Canvas来绘制三角形和矩形等多边形的不二秘技,html5canvas 使用HTML5 Canvas绘制多边形所需的CanvasRenderingContext2D对象的要紧品质和格局(有「...

用HTML5 Canvas API中的clearRect()方法完成橡皮擦成效,html5clearrect

在切实世界中,大家选拔画笔在画板上开始展览摄影;在html5 canvas中,大家一样能够行使canvas的画笔——CanvasRenderingContext2D对象在canvas上拓展雕塑。路人皆知,大家的画笔一般都会与橡皮擦配套使用,以便于勘误美术进程中的错误并再度描画。在html5 canvas中,CanvasRenderingContext2D对象也同样给我们提供了二个得以永久重复使用的橡皮擦——clearRect()方法。

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

  1. clearRect(x, y, width, height)  

CanvasRenderingContext2D对象的clearRect()方法用于破除canvas内以钦命坐标点(x,y)为左上角、宽度为width、中度为height的矩形区域中的全数图形像素。

上面,我们来看四个实际上的事例。大家先绘制一个半径为50px的实心圆,然后利用橡皮擦clearRect()对中间的有的区域张开擦除。绘制圆形的原始html5代码如下:

JavaScript Code复制内容到剪贴板

  1. <!DOCTYPE html>   
  2. <html>   
  3. <head>   
  4. <meta charset="UTF-8">   
  5. <title>使用HTML5 clearRect()擦除钦点的矩形区域的入门示例</title>   
  6. </head>   
  7. <body>   
  8.   
  9. <!-- 增添canvas标签,并累加粉红边框以便于在页面上查看 -->   
  10. <canvas id="myCanvas" width="400px" height="300px" style="border: 1px solid red;">   
  11. 你的浏览器不援救canvas标签。   
  12. </canvas>   
  13.   
  14. <script type="text/javascript">   
  15. //获取Canvas对象(画布)   
  16. var canvas = document.getElementById("myCanvas");   
  17. //轻便地质量评定当前浏览器是不是支持Canvas对象,防止在有个别不援救html5的浏览器中晋升语法错误   
  18. if(canvas.getContext){     
  19.     //获取相应的CanvasRenderingContext2D对象(画笔)   
  20.     var ctx = canvas.getContext("2d");   
  21.        
  22.     //绘制二个以坐标点(100,10)为圆心、半径为50px的圈子   
  23.     ctx.arc(100, 100, 50, 0, Math.PI * 2, false);   
  24.        
  25.     //绘制并填充圆形内部   
  26.     ctx.fill();      
  27. }   
  28. </script>   
  29. </body>   
  30. </html>  

相应的来得效果如下:
澳门新萄京 8

今天,大家运用clearRect()方法对真诚圆中以圆心(100,100)为主干,周围各10px的矩形区域部分进行擦除。

JavaScript Code复制内容到剪贴板

  1. <script type="text/javascript">   
  2. //获取Canvas对象(画布)   
  3. var canvas = document.getElementById("myCanvas");   
  4. //轻巧地检查测量试验当前浏览器是不是帮衬Canvas对象,避防在部分不援助html5的浏览器中提拔语法错误   
  5. if(canvas.getContext){     
  6.     //获取相应的CanvasRenderingContext2D对象(画笔)   
  7.     var ctx = canvas.getContext("2d");   
  8.        
  9.     //绘制贰个以坐标点(100,10)为圆心、半径为50px的圈子   
  10.     ctx.arc(100, 100, 50, 0, Math.PI * 2, false);   
  11.        
  12.     //绘制并填充圆形内部   
  13.     ctx.fill();   
  14.        
  15.     //擦除矩形区域内的图片   
  16.     ctx.clearRect(90, 90, 20, 20);   
  17. }   
  18. </script>  

相应的显得效果如下(是否有一点点像二个铜钱?)。
澳门新萄京 9

页面上大家能够擦除一片页面上的区域,让其出示出背景图片。
上面包车型大巴例子中大家擦除了矩形中的空白让其出示页面背景:

JavaScript Code复制内容到剪贴板

  1. <!DOCTYPE html>   
  2. <html lang="zh">   
  3. <head>   
  4.     <meta charset="UTF-8">   
  5.     <title>clearRect()</title>   
  6.     <style>   
  7.         body { background: url("./images/bg2.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.clearRect(0,0,canvas.width,canvas.height);   
  29.   
  30.     };   
  31. </script>   
  32. </body>   
  33. </html>  

澳门新萄京 10

Canvas API中的clearRect()方法完成橡皮擦功用,html5clearrect 在切切实实世界中,大家选取画笔在画板上实行美术;在html5 canvas中,大家一样可...

经过HTML5 Canvas API绘制弧线和圆形的课程,html5canvas

在html5中,CanvasRenderingContext2D对象也提供了特地用来绘制圆形或弧线的措施,请参见以下属性和措施介绍:

JavaScript Code复制内容到剪贴板

  1. arc(x, y, radius, startRad, endRad, anticlockwise)  

在canvas画布上制图以坐标点(x,y)为圆心、半径为radius的圆上的一段弧线。这段弧线的前奏弧度是startRad,甘休弧度是endRad。这里的弧度是以x轴正方向(机械钟三点钟)为条件、进行顺时针旋转的角度来计量的。anticlockwise表示是以逆时针方向依旧顺时针方向开始绘制,假如为true则意味逆时针,借使为false则表示顺时针。anticlockwise参数是可选的,默以为false,即顺时针。
澳门新萄京 11

arc()方法中的弧度计算方法

JavaScript Code复制内容到剪贴板

  1. arcTo(x1, y1, x2, y2, radius)  

那几个主意将选取近些日子端点、端点1(x1,y1)和端点2(x2,y2)那七个点所变成的夹角,然后绘制一段与夹角的两侧相切而且半径为radius的圆上的弧线。一般境况下,绘制弧线的初阶地方是当下端点,停止地方是端点2,並且弧线绘制的势头便是接连那七个端点的最短圆弧的大势。另外,要是当前端点不在所钦赐的圆上,本办法还将绘制一条从此时此刻端点到弧线源点的直线。
鉴于详细介绍arcTo()方法的字数很多,请移步至此处查看arcTo()的事无巨细用法。

在摸底了canvas绘制弧线的上述API之后,大家就联合来看看哪些运用arc()绘制弧线。咱们已经理解,arc()接收的第2个和第5个参数表示绘制弧线的始发弧度和终结弧度。相信各位读者在学堂的数学或几何课程上都学过弧度,弧度是一种角度单位。弧长等于半径的弧,其所对的圆心角就是1弧度。大家还精晓,半径为r的圆,其周长为2πr。在具备那一个几何知识的前提下,大家就足以接纳arc()方法绘制弧线了。

选用canvas绘制弧线

近年来,大家就来绘制一条半径为50px的圆的45%弧线。

JavaScript Code复制内容到剪贴板

  1. <!DOCTYPE html>   
  2. <html>   
  3. <head>   
  4. <meta charset="UTF-8">   
  5. <title>HTML5 Canvas绘制弧线入门示例</title>   
  6. </head>   
  7. <body>   
  8.   
  9. <!-- 增多canvas标签,并足够银色边框以便于在页面上查看 -->   
  10. <canvas id="myCanvas" width="400px" height="300px" style="border: 1px solid red;">   
  11. 您的浏览器不扶助canvas标签。   
  12. </canvas>   
  13.   
  14. <script type="text/javascript">   
  15. //获取Canvas对象(画布)   
  16. var canvas = document.getElementById("myCanvas");   
  17. //轻巧地检查评定当前浏览器是或不是援助Canvas对象,防止在有的不帮助html5的浏览器中唤醒语法错误   
  18. if(canvas.getContext){     
  19.     //获取相应的CanvasRenderingContext2D对象(画笔)   
  20.     var ctx = canvas.getContext("2d");     
  21.        
  22.     //初阶二个新的绘图路线   
  23.     ctx.beginPath();   
  24.     //设置弧线的水彩为金棕   
  25.     ctx.strokeStyle = "blue";   
  26.     var circle = {   
  27.         x : 100,    //圆心的x轴坐标值   
  28.         y : 100,    //圆心的y轴坐标值   
  29.         r : 50      //圆的半径   
  30.     };   
  31.     //沿着坐标点(100,100)为圆心、半径为50px的圆的顺时针方向绘制弧线   
  32.     ctx.arc(circle.x, circle.y, circle.r, 0, Math.PI / 2, false);       
  33.     //依照钦定的路径绘制弧线   
  34.     ctx.stroke();   
  35. }   
  36. </script>   
  37. </body>   
  38. </html>  

对应的展示效果如下图:
澳门新萄京 12

动用canvas沿着顺时针方向绘制弧线 如上所示,大家设置了绘图的弧线的所在圆的圆心坐标为(100,100),半径为50px。由于二个半径为r的圆的周长为2πr,约等于说,八个完好无缺的圆,其所对应的弧度为2π(换算成常规角度就是360°),所以我们想要画一个圆的54%弧线,只要弧度为π/2(即90°)就足以了。在下边包车型客车代码中,我们使用了JavaScript中意味着π的常量Math.PI。

另外,在上头的代码中,大家还设置了绘图弧线的矛头为顺时针方向(false)。由于开首弧度为0,停止弧度为π/2,因而弧线将从x轴的四方向初阶沿着顺时针方向绘制,进而获取地点的图样。假使大家将上述代码中的弧线绘制方向改为逆时针,会有怎么着的机能啊?

JavaScript Code复制内容到剪贴板

  1. <script type="text/javascript">   
  2. //获取Canvas对象(画布)   
  3. var canvas = document.getElementById("myCanvas");   
  4. //轻巧地检查评定当前浏览器是或不是援助Canvas对象,避防在有的不补助html5的浏览器中唤醒语法错误   
  5. if(canvas.getContext){     
  6.     //获取相应的CanvasRenderingContext2D对象(画笔)   
  7.     var ctx = canvas.getContext("2d");     
  8.        
  9.     //早先二个新的绘图路线   
  10.     ctx.beginPath();   
  11.     //设置弧线的水彩为玉石白   
  12.     ctx.strokeStyle = "blue";   
  13.     var circle = {   
  14.         x : 100,    //圆心的x轴坐标值   
  15.         y : 100,    //圆心的y轴坐标值   
  16.         r : 50      //圆的半径   
  17.     };   
  18.     //沿着坐标点(100,100)为圆心、半径为50px的圆的逆时针方向绘制弧线   
  19.     ctx.arc(circle.x, circle.y, circle.r, 0, Math.PI / 2, true);       
  20.     //根据钦命的路径绘制弧线   
  21.     ctx.stroke();   
  22. }   
  23. </script>  

对应的浮现效果如下:
澳门新萄京 13

应用canvas沿着逆时针方向绘制弧线

选择canvas绘制圆形

当大家学会了绘图弧线之后,抛砖引玉,大家想要绘制圆形自然也不言而喻,只需求将上述代码的完成弧度改为2π就能够。

JavaScript Code复制内容到剪贴板

  1. <script type="text/javascript">   
  2. //获取Canvas对象(画布)   
  3. var canvas = document.getElementById("myCanvas");   
  4. //不难地检查实验当前浏览器是否帮忙Canvas对象,以防在某个不支持html5的浏览器中晋升语法错误   
  5. if(canvas.getContext){     
  6.     //获取相应的CanvasRenderingContext2D对象(画笔)   
  7.     var ctx = canvas.getContext("2d");     
  8.        
  9.     //伊始叁个新的绘图路线   
  10.     ctx.beginPath();   
  11.     //设置弧线的颜色为鼠灰   
  12.     ctx.strokeStyle = "blue";   
  13.     var circle = {   
  14.         x : 100,    //圆心的x轴坐标值   
  15.         y : 100,    //圆心的y轴坐标值   
  16.         r : 50      //圆的半径   
  17.     };   
  18.     //以canvas中的坐标点(100,100)为圆心,绘制二个半径为50px的圆形   
  19.     ctx.arc(circle.x, circle.y, circle.r, 0, Math.PI * 2, true);       
  20.     //依据钦点的路径绘制弧线   
  21.     ctx.stroke();   
  22. }   
  23. </script>  

对应的体现效果如下:
澳门新萄京 14

JavaScript Code复制内容到剪贴板

  1. <script type="text/javascript">   
  2. //获取Canvas对象(画布)   
  3. var canvas = document.getElementById("myCanvas");   
  4. //轻易地质量评定当前浏览器是不是帮忙Canvas对象,防止在有些不帮忙html5的浏览器中提醒语法错误   
  5. if(canvas.getContext){     
  6.     //获取相应的CanvasRenderingContext2D对象(画笔)   
  7.     var ctx = canvas.getContext("2d");     
  8.        
  9.     //开端三个新的绘图路线   
  10.     ctx.beginPath();   
  11.     //设置弧线的颜色为浅绿   
  12.     ctx.strokeStyle = "blue";   
  13.     var circle = {   
  14.         x : 100,    //圆心的x轴坐标值   
  15.         y : 100,    //圆心的y轴坐标值   
  16.         r : 50      //圆的半径   
  17.     };   
  18.     //以canvas中的坐标点(100,100)为圆心,绘制三个半径为50px的圆形   
  19.     ctx.arc(circle.x, circle.y, circle.r, 0, Math.PI * 2, true);       
  20.     //依据钦命的门道绘制弧线   
  21.     ctx.stroke();   
  22. }   
  23. </script>  

备考:arc()方法中的开端弧度参数startRad和终止弧度参数endRad都是以弧度为单位,即便你填入一个数字,比方360,如故会被看做是360弧度。将上述代码的完成弧度设为360会生出什么样用的结局呢?那即将看绘制的大方向了(即anticlockwise参数的值),要是是顺时针绘制(false),则将绘制出二个整机的圈子;借使是逆时针绘制,大于2π的弧度将被转移为一个弧度相等、但不高于2π的弧度。比方,将上述代码中的截至弧度设为3π(Math.PI * 3),若是anticlockwise为false,将会来得为二个安然无事的圆形,借使为true,则其出示效果与设为π时的展现效果同样。
澳门新萄京 15

利落弧度设为3π时,顺时针(false)旋转的绘图效果
澳门新萄京 16

得了弧度设为3π时,逆时针(true)旋转的绘图效果

Canvas API绘制弧线和圆形的课程,html5canvas 在html第55中学,CanvasRenderingContext2D对象也提供了特意用来绘制圆形或弧线的章程,请参见以下...

HTML5 Canvas,html5canvas

<canvas> 标签定义图形,举例图片和别的图像,您必须运用脚本来绘制图形。

在画布上(Canvas)画八个革命矩形,渐变矩形,彩色矩形,和局地彩色的文字。

 


什么是 Canvas?

HTML5 <canvas> 成分用于图形的绘图,通过脚本 (常常是JavaScript)来达成.

<canvas> 标签只是图形容器,您必须使用脚本来绘制图形。

你能够通过三种措施运用Canva绘制路线,盒、圆、字符以及丰盛图像。


浏览器帮忙

澳门新萄京 17澳门新萄京 18澳门新萄京 19澳门新萄京 20澳门新萄京 21

Internet Explorer 9 , Firefox, Opera, Chrome, 和 Safari 支持 <canvas> 元素.

**注意: Internet Explorer 8 及更早 IE 版本的浏览器不扶助 <canvas> 成分.**


始建多个画布(Canvas)

一个画布在网页中是八个矩形框,通过 <canvas> 成分来绘制.

**注意: 暗中同意情况下 <canvas> 成分未有边框和内容。**

<canvas>简单实比方下:

<canvas id="myCanvas" width="200" height="100"></canvas>

**注意: 标签经常必要钦定三个id属性 (脚本中常常援用), width 和 height 属性定义的画布的大小.**

**提示:您能够在HTML页面中动用多少个<canvas> 元素.**

使用 style 属性来增添边框:

实例

<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>


利用 JavaScript 来绘制图像

canvas 成分本身是尚未绘图本领的。全体的绘图职业必须在 JavaScript 内部产生:

实例

<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>

实例深入分析:

首先,找到 <canvas> 元素:

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

然后,创建 context 对象:

var ctx=c.getContext("2d");

getContext("2d") 对象是内建的 HTML5 对象,具备两种制图路线、矩形、圆形、字符以及丰盛图像的法子。

上面包车型地铁两行代码绘制二个革命的矩形:

ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);

设置fillStyle属性能够是CSS颜色,渐变,或图案。fillStyle 暗中同意设置是#000000(黑色)。

fillRect(x,y,width,height) 方法定义了矩形当前的填写形式。


Canvas 坐标

canvas 是叁个二维网格。

canvas 的左上角坐标为 (0,0)

地点的 fillRect 方法具有参数 (0,0,150,75)。

意思是:在画布上绘制 150x75 的矩形,从左上角开头 (0,0)。

坐标实例

正如图所示,画布的 X 和 Y 坐标用于在画布上对美术举办固化。鼠标移动的矩形框上,突显定位坐标。

X

Y

<iframe data-ke-src="" frameborder="0" src="" style="width: 400px; height: 120px;"></iframe>


Canvas - 路径

在Canvas上画线,大家将动用以下三种方法:

  • moveTo(x,y) 定义线条开头坐标
  • lineTo(x,y) 定义线条截止坐标

绘制线条大家不可能不利用到 "ink" 的章程,就像是stroke().

实例

概念开首坐标(0,0), 和终止坐标 (200,100). 然后利用 stroke() 方法来绘制线条:

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();

在canvas中绘制圆形, 大家将使用以下格局:

  • arc(x,y,r,start,stop)

骨子里大家在绘制圆形时行使了 "ink" 的措施, 比如 stroke() 也许 fill().

实例

利用 arc() 方法 绘制二个圆:

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();


Canvas - 文本

澳门新萄京:Canvas来绘制三角形和矩形等多边形的法子,API绘制弧线和圆形的学科。运用 canvas 绘制文本,重要的性质和措施如下:

  • font - 定义字体
  • fillText(text,x,y) - 在 canvas 上绘制实心的文书
  • strokeText(text,x,y) - 在 canvas 上绘制空心的文件

使用 fillText():

实例

使用 "Arial" 字体在画布上制图二个高 30px 的文字(实心):

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);

使用 strokeText():

实例

使用 "Arial" 字体在画布上制图多少个高 30px 的文字(空心):

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.strokeText("Hello World",10,50);


Canvas - 渐变

潜濡默化能够填充在矩形, 圆形, 线条, 文本等等, 各个造型能够本人定义不相同的颜料。

以下有二种不一致的法子来设置Canvas渐变:

  • createLinearGradient(x,y,x1,y1) - 创设线条渐变
  • createRadialGradient(x,y,r,x1,y1,r1) - 创设三个通向/圆渐变

当我们应用渐变对象,必须采纳三种或两种以上的结束颜色。

addColorStop()方法钦定颜色甘休,参数使用坐标来陈诉,能够是0至1.

应用渐变,设置fillStyle或strokeStyle的值为 渐变,然后绘制形状,如矩形,文本,或一条线。

使用 createLinearGradient():

实例

开创三个线性渐变。使用渐变填充矩形:

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Create gradient
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

使用 createRadialGradient():

实例

创办一个朝向/圆渐变。使用渐变填充矩形:

澳门新萄京:Canvas来绘制三角形和矩形等多边形的法子,API绘制弧线和圆形的学科。JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Create gradient
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);


Canvas - 图像

把一幅图像放置到画布上, 使用以下格局:

  • drawImage(image,x,y)

行使图像:

澳门新萄京 22

实例

把一幅图像放置到画布上:

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);

Canvas,html5canvas canvas 标签定义图形,例如图片和任何图像,您必须使用脚本来绘制图形。 在画布上(Canvas)画贰个白色矩形,渐变矩...

本文由澳门新萄京发布于澳门新萄京最大平台,转载请注明出处:澳门新萄京:Canvas来绘制三角形和矩形等多边形

上一篇:JS的replace方法与正则表明式结合使用批注,关键 下一篇:没有了
猜你喜欢
热门排行
精彩图文