HTML5 canvas基本繪圖之繪制線段

<canvas></canvas>是HTML5中新增的標(biāo)簽,用于繪制圖形,實(shí)際上,這個標(biāo)簽和其他的標(biāo)簽一樣,其特殊之處在于該標(biāo)簽可以獲取一個CanvasRenderingContext2D對象,我們可以通過JavaScript腳本來控制該對象進(jìn)行繪圖。
<canvas></canvas>只是一個繪制圖形的容器,除了id、class、style等屬性外,還有height和width屬性。在<canvas>>元素上繪圖主要有三步:
1.獲取<canvas>元素對應(yīng)的DOM對象,這是一個Canvas對象;
2.調(diào)用Canvas對象的getContext()方法,得到一個CanvasRenderingContext2D對象;
3.調(diào)用CanvasRenderingContext2D對象進(jìn)行繪圖。
繪制線段moveTo()和lineTo()
以下是一個簡單的<canvas>繪圖示例:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>canvas繪圖演示</title>
- <style type="text/css">
- #canvas{
- border: 1px solid #ADACB0;
- display: block;
- margin: 20px auto;
- }
- </style>
- </head>
- <body>
- <canvas id="canvas" width="300" height="300">
- 你的瀏覽器還不支持canvas
- </canvas>
- </body>
- <script type="text/javascript">
- var canvas = document.getElementById("canvas");
- var context = canvas.getContext("2d");
- //設(shè)置對象起始點(diǎn)和終點(diǎn)
- context.moveTo(10,10);
- context.lineTo(200,200);
- //設(shè)置樣式
- context.lineWidth = 2;
- context.strokeStyle = "#F5270B";
- //繪制
- context.stroke();
- </script>
- </html>
如果沒有通過moveTo()特別指定,lineTo()的起始點(diǎn)是以上一個點(diǎn)為準(zhǔn)。因此,如果需要重新選擇起始點(diǎn),則需要通過moveTo()方法。如果需要對不同的線段設(shè)置樣式,則需要通過context.beginPath()重新開啟一條路徑,下面是一個示例:
- <script type="text/javascript">
- var canvas = document.getElementById("canvas");
- var context = canvas.getContext("2d");
- //設(shè)置對象起始點(diǎn)和終點(diǎn)
- context.beginPath();
- context.moveTo(100,100);
- context.lineTo(700,100);
- context.lineTo(700,400);
- context.lineWidth = 2;
- context.strokeStyle = "#F5270B";
- //繪制
- context.stroke();
- context.beginPath();
- context.moveTo(100,200);//這里的moveTo換成lineTo效果是一樣的
- context.lineTo(600,200);
- context.lineTo(600,400);
- //strokeStyle的顏色有新的值,則覆蓋上面設(shè)置的值
- //lineWidth沒有新的值,則按上面設(shè)置的值顯示
- context.strokeStyle = "#0D25F6";
- //繪制
- context.stroke();
- </script>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
- 這篇文章主要介紹了基于canvas使用貝塞爾曲線平滑擬合折線段的方法的相關(guān)資料,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-01-10
- 這篇文章主要介紹了canvas 如何繪制線段的實(shí)現(xiàn)方法的相關(guān)資料,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-07-12