HTML5 canvas基本繪圖之繪制線段

2020-03-24 19:27:34

字體：大中小

供稿：網(wǎng)友

canvas /canvas 是HTML5中新增的標(biāo)簽，用于繪制圖形，實(shí)際上，這個(gè)標(biāo)簽和其他的標(biāo)簽一樣，其特殊之處在于該標(biāo)簽可以獲取一個(gè)CanvasRenderingContext2D對(duì)象，我們可以通過(guò)JavaScript腳本來(lái)控制該對(duì)象進(jìn)行繪圖。 canvas /canvas 只是一個(gè)繪制圖形的容器，除了id、html' target='_blank'>class、style等屬性外，還有height和width屬性。在 canvas 元素上繪圖主要有三步：1.獲取 canvas 元素對(duì)應(yīng)的DOM對(duì)象，這是一個(gè)Canvas對(duì)象；
2.調(diào)用Canvas對(duì)象的getContext()方法，得到一個(gè)CanvasRenderingContext2D對(duì)象；
3.調(diào)用CanvasRenderingContext2D對(duì)象進(jìn)行繪圖。

繪制線段moveTo()和lineTo()以下是一個(gè)簡(jiǎn)單的 canvas 繪圖示例：XML/HTML Code復(fù)制內(nèi)容到剪貼板
border:1pxsolid#ADACB0; display:block; margin:20pxauto; } /style /head body canvasid= canvas width= 300 height= 300 你的瀏覽器還不支持canvas /canvas /body scripttype= text/javascript varcanvas=document.getElementById( canvas varcontext=canvas.getContext( 2d //設(shè)置對(duì)象起始點(diǎn)和終點(diǎn) context.moveTo(10,10); context.lineTo(200,200); //設(shè)置樣式 context.lineWidth=2; context.strokeStyle= #F5270B ; //繪制 context.stroke(); /script /html
如果沒(méi)有通過(guò)moveTo()特別指定，lineTo()的起始點(diǎn)是以上一個(gè)點(diǎn)為準(zhǔn)。因此，如果需要重新選擇起始點(diǎn)，則需要通過(guò)moveTo()方法。如果需要對(duì)不同的線段設(shè)置樣式，則需要通過(guò)context.beginPath()重新開(kāi)啟一條路徑，下面是一個(gè)示例：JavaScript Code復(fù)制內(nèi)容到剪貼板
scripttype= text/javascript varcanvas=document.getElementById( canvas ); varcontext=canvas.getContext( 2d ); //設(shè)置對(duì)象起始點(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沒(méi)有新的值，則按上面設(shè)置的值顯示 context.strokeStyle= #0D25F6 ; //繪制 context.stroke(); /script
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持phpstudy。html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。

上一篇：XHTML：兩種語(yǔ)言的力量

下一篇：html form標(biāo)簽name屬性怎么用？form標(biāo)簽的name屬性詳