怎么用HTML5的canvas來繪圖

本文小編為大家詳細介紹“怎么用HTML5的canvas來繪圖”，內(nèi)容詳細，步驟清晰，細節(jié)處理妥當(dāng)，希望這篇“怎么用HTML5的canvas來繪圖”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識吧。

創(chuàng)新互聯(lián)公司長期為上1000+客戶提供的網(wǎng)站建設(shè)服務(wù)，團隊從業(yè)經(jīng)驗10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為鄂溫克企業(yè)提供專業(yè)的做網(wǎng)站、網(wǎng)站建設(shè)，鄂溫克網(wǎng)站改版等技術(shù)服務(wù)。擁有10余年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。

canvas擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。我們在Canvas區(qū)域中繪制圖形，并不是拿鼠標(biāo)在Canvas中畫畫。事實上Canvas元素只是一塊無色透明的區(qū)域，就像一個只有寬度高度沒有背景的DIV一樣，需要使用JavaScript腳本在其中繪畫。

示例一：繪制方形

我們在頁面上創(chuàng)建一個canvas元素，并且制定id及寬和高。

your?browser?does?not?support?the?canvas?tag

Canvas 元素本身是沒有繪圖能力的。所有的繪制工作必須使用JavaScript來完成：

var?c=document.getElementById（"square"）;? var?cxt=c.getContext（"2d"）;

cxt.fillStyle="#ff0000";

cxt.fillRect（0,0,150,75）;

通過document.getElementById（"square"）來獲取canvas元素，然后使用c.getContext（"2d"）來獲取2d繪圖對象。接著使用fillStyle 方法將其染成紅色，fillRect 方法規(guī)定了形狀、位置和尺寸。上例中繪制了一個紅色的方形。

示例二：繪制線條

我們可以通過起始坐標(biāo)，和結(jié)束坐標(biāo)，來繪制一條直線。

var?line=document.getElementById（'line'）;? var?c=line.getContext（'2d'）;

c.moveTo（20,20）;

c.lineTo（200,100）;

c.lineTo（20,100）;

c.stroke（）;

moveTo（x，y）：設(shè)置繪圖起始坐標(biāo)。

lineTo（x, y）：從上一個起點到（x,y）的點畫線，上一個起點可以通過moveTo來指定，默認為原先路徑的終點。

stroke（）：描邊路徑。

示例三：繪制圓形

我們可以通過規(guī)定尺寸、顏色和位置，來繪制一個圓。

var?c=document.getElementById（'circle'）;? var?r=c.getContext（'2d'）;

r.fillStyle='#ff0000';

r.beginPath（）;

r.arc（70,80,45,0,Math.PI*2,true）;

r.closePath（）;

r.fill（）;

beginPath（）：創(chuàng)建路徑的第一步是調(diào)用beginPath方法，返回一個存儲路徑的信息。

closePath（）：從當(dāng)前的點到起始點閉合路徑。

arc（x, y, radius, startAngle, endAngle, anticlockwise）： （x,y）是圓弧的圓心，radius-半徑， startAngle和endAngle是圓弧的開始和結(jié)束弧度（radians = （Math.PI/180）*degree），anticlockwise為true的話是逆時針，否則為順時針。

fillStyle：設(shè)置填充色。

fill（）：填充路徑。

示例四：制作動畫

我們可以通過javascript動態(tài)地在畫布上繪制圖像，并產(chǎn)生動畫效果。

var?x=0;? var?y=0;? var?ctx?=?document.getElementById（"animate"）。getContext（"2d"）;

setInterval（function（）{

ctx.clearRect（0,0,600,600）;

ctx.fillStyle="#fc0";

ctx.beginPath（）;

ctx.arc（x++,y++,15,0,Math.PI*2,true）;

ctx.closePath（）;

ctx.fill（）;? },10）;

上述代碼中，我們使用setInterval（）來定時運行（每隔10毫秒運行一次），畫布中，繪制一個黃色的圓形，并且在繪制前先要clearRect（） 清除上次繪制的圓形，這樣看起來就是一個從畫布左上角到右下角運動的小球的簡單動畫。

Canvas還能加載圖像，繪制顏色漸變的圖案，產(chǎn)生陰影效果等，本站helloweba將會有更多canvas效果方面的講解。Canvas是一個很輕便的標(biāo)簽，但是，使用它能完成的非常炫麗效果，這絕對讓你震驚。只要有JavaScript腳本的支持，Canvas能完成你幾乎能想到的所有效果。

讀到這里，這篇“怎么用HTML5的canvas來繪圖”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領(lǐng)會，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

新聞名稱：怎么用HTML5的canvas來繪圖
本文地址：http://muchs.cn/article10/ijoigo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供面包屑導(dǎo)航、網(wǎng)站收錄、ChatGPT、自適應(yīng)網(wǎng)站、動態(tài)網(wǎng)站、App設(shè)計

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)