這篇文章主要介紹了借助HTML5 Canvas來繪製三角形和矩形等多邊形的方法,通過文章開頭給的一些屬性及下面三角形和矩形的例子,同理便可得出其他多邊形的畫法,需要的朋友可以參考下
使用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) | 定義一個新的繪製路徑的起點座標 |
定義一個繪製路徑的中間點座標 | |
沿著繪製路徑的座標點順序繪製直線 | |
如果目前的繪製路徑是開啟的,則閉合該繪製路徑。 |
繪製三角形
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML5 Canvas绘制三角形入门示例</title> </head> <body> <!-- 添加canvas标签,并加上红色边框以便于在页面上查看 --> <canvas id="myCanvas" width="400px" height="300px" style="border: 1px solid red;"> 您的浏览器不支持canvas标签。 </canvas> <script type="text/javascript"> //获取Canvas对象(画布) var canvas = document.getElementById("myCanvas"); //简单地检测当前浏览器是否支持Canvas对象,以免在一些不支持html5的浏览器中提示语法错误 if(canvas.getContext){ //获取对应的CanvasRenderingContext2D对象(画笔) var ctx = canvas.getContext("2d"); //开始一个新的绘制路径 ctx.beginPath(); //设置线条颜色为蓝色 ctx.strokeStyle = "blue"; //设置路径起点坐标 ctx.moveTo(20, 50); //绘制直线线段到坐标点(60, 50) ctx.lineTo(20, 100); //绘制直线线段到坐标点(60, 90) ctx.lineTo(70, 100); //先关闭绘制路径。注意,此时将会使用直线连接当前端点和起始端点。 ctx.closePath(); //最后,按照绘制路径画出直线 ctx.stroke(); } </script> </body> </html>對應的顯示效果如下:
繪製矩形
之所以將Canvas繪製矩形單獨提出來,是因為Canvas的畫筆工具-CanvasRenderingContext2D物件為繪製矩形提供了專用的方法。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML5 Canvas绘制矩形入门示例</title> </head> <body> <!-- 添加canvas标签,并加上红色边框以便于在页面上查看 --> <canvas id="myCanvas" width="400px" height="300px" style="border: 1px solid red;"> 您的浏览器不支持canvas标签。 </canvas> <script type="text/javascript"> //获取Canvas对象(画布) var canvas = document.getElementById("myCanvas"); //简单地检测当前浏览器是否支持Canvas对象,以免在一些不支持html5的浏览器中提示语法错误 if(canvas.getContext){ //获取对应的CanvasRenderingContext2D对象(画笔) var ctx = canvas.getContext("2d"); //开始一个新的绘制路径 ctx.beginPath(); //设置线条颜色为蓝色 ctx.strokeStyle = "blue"; //以canvas中的坐标点(10,10)作为绘制起始点,绘制一个宽度为80px、高度为50px的矩形 ctx.rect(10, 10, 80, 50); //按照指定的路径绘制直线 ctx.stroke(); //关闭绘制路径 ctx.closePath(); } </script> </body> </html>對應的矩形效果顯示如下:
#
以上是用HTML5 Canvas來繪製三角形和矩形等多邊形的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!