摘要:所有的繪制工作必須在內(nèi)部完成。檢查瀏覽器兼容性最新版的,,和都支持,但是及以下都不支持。路徑路徑是通過(guò)線段或曲線相連形成的不同形狀的點(diǎn)的集合。這些都是以軸為基準(zhǔn)。在指定的位置繪制文本邊框,繪制的最大寬度是可選的。
本文同步于個(gè)人博客:https://zhoushuo.me/blog/2018/03/05/html5-canvas/
是HTML5新增的元素,可以用于繪制圖形,制作照片,創(chuàng)建動(dòng)畫。 標(biāo)簽只是圖形容器,它沒(méi)有自己的行為,必須使用腳本來(lái)繪制圖形。
創(chuàng)建一個(gè)canvas標(biāo)簽只有兩個(gè)屬性—— width和height,當(dāng)沒(méi)有設(shè)置寬度和高度的時(shí)候, 的默認(rèn)大小為300px×150px。需要注意的是,如果使用css來(lái)定義的大小,在繪制時(shí)圖像會(huì)伸縮以適應(yīng)它的框架尺寸:如果CSS的尺寸與初始畫布的比例不一致,它會(huì)出現(xiàn)扭曲。
渲染上下文元素本身是沒(méi)有繪圖能力的。所有的繪制工作必須在 JavaScript 內(nèi)部完成。
創(chuàng)造了一個(gè)固定大小的畫布,它公開了一個(gè)或多個(gè)渲染上下文,其可以用來(lái)繪制和處理要展示的內(nèi)容。
canvas起初是空白的,首先需要找到渲染上下文,然后在它的上面繪制。
var canvas=document.getElementById("mycanvas"); var ctx = canvas.getContext("2d");
有一個(gè)叫做 getContext()的方法,這個(gè)方法是用來(lái)獲得渲染上下文和它的繪畫功能。getContext()只有一個(gè)參數(shù),就是上下文的格式。
檢查瀏覽器兼容性最新版的 FireFox,Safari,Chrome 和 Opera 都支持 HTML5 canvas,但是 IE8及以下都不支持canvas。下面的代碼用于檢測(cè)瀏覽器的是否支持canvas
var canvas = document.getElementById("mycanvas"); if (canvas.getContext){ var ctx = canvas.getContext("2d"); // drawing code here } else { // canvas-unsupported code here }canvas 坐標(biāo)
在繪制圖形之前,我們還應(yīng)該先了解一下canvas中的坐標(biāo)。canvas默認(rèn)被網(wǎng)格所覆蓋。通常來(lái)說(shuō)網(wǎng)格中的一個(gè)單元相當(dāng)于canvas元素中的一像素。柵格的起點(diǎn)為左上角(坐標(biāo)為(0,0))。所有元素的位置都相對(duì)于原點(diǎn)定位。
繪制 canvas 圖形好的,接下來(lái)我們就開始了解怎么使用Canvas的API繪制基本圖形了 。
var canvas = document.getElementById("mycanvas"); if (canvas.getContext){ var ctx = canvas.getContext("2d"); ctx.fillStyle="red"; ctx.fillRect(0,0,100,100); }
上面的兩行代碼繪制一個(gè)紅色的矩形:
設(shè)置fillStyle屬性可以是css顏色,漸變,或圖案。fillStyle默認(rèn)設(shè)置是#000000(黑色)。
fillRect(x,y,width,height)方法定義了矩形當(dāng)前的填充方式,x與y指定了在canvas畫布上所繪制的矩形的左上角(相對(duì)于原點(diǎn))的坐標(biāo)。width和height設(shè)置矩形的尺寸。
canvas 路徑路徑是通過(guò)線段或曲線相連形成的不同形狀的點(diǎn)的集合。一個(gè)路徑,甚至一個(gè)子路徑,都是閉合的。使用路徑繪制圖形需要一些額外的步驟。
以下是所要用到的方法:
函數(shù) | 描述 |
---|---|
strokeStyle | 用于設(shè)置畫筆繪制路徑的顏色、漸變和模式 |
lineWidth | 定義繪制線條的寬度 |
beginPath() | 開始一個(gè)新的繪制路徑 |
moveTo(x,y) | 移動(dòng)畫筆到指定的坐標(biāo)點(diǎn)(x,y),該點(diǎn)就是新的子路徑的起始點(diǎn) |
lineTo(x,y) | 使用直線邊接當(dāng)前端點(diǎn)和指定的坐標(biāo)點(diǎn)(x,y) |
stroke() | 沿著繪制路徑的坐標(biāo)點(diǎn)順序繪制直線 |
closePath() | 如果當(dāng)前的繪制路徑是打開的,則關(guān)閉掉該繪制路徑 |
這里需要注意的是,當(dāng)你調(diào)用fill()函數(shù)時(shí),所有沒(méi)有閉合的形狀都會(huì)自動(dòng)閉合,所以你不需要調(diào)用closePath()函數(shù)。但是調(diào)用stroke()時(shí)不會(huì)自動(dòng)閉合。
下面的代碼繪制了一個(gè)三角形:
function draw() { var canvas = document.getElementById("canvas"); if (canvas.getContext){ var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.moveTo(75,50); ctx.lineTo(100,75); ctx.lineTo(100,25); ctx.fill(); } }canvas 圓弧
繪制路徑我們可以使用arc()方法。該方法有六個(gè)參數(shù):x,y為繪制圓弧所在圓上的圓心坐標(biāo)。radius為半徑。startAngle以及endAngle參數(shù)用弧度定義了開始以及結(jié)束的弧度。這些都是以x軸為基準(zhǔn)。參數(shù)anticlockwise為一個(gè)布爾值。為true時(shí),是逆時(shí)針?lè)较颍駝t順時(shí)針?lè)较颉?/p>
var canvas=document.getElementById("mycanvas"); var ctx=canvas.getContext("2d"); ctx.beginPath(); ctx.arc(95,50,40,0,2*Math.PI); ctx.stroke();
注意:arc()函數(shù)中的角度單位是弧度,不是度數(shù)。角度與弧度的js表達(dá)式:radians=(Math.PI/180)*degrees。
canvas 文本canvas 提供了兩種方法來(lái)渲染文本:
fillText(text, x, y [, maxWidth]) 在指定的(x,y)位置填充指定的文本,繪制的最大寬度是可選的。
strokeText(text, x, y [, maxWidth]) 在指定的(x,y)位置繪制文本邊框,繪制的最大寬度是可選的。
文本被填充方式:
var canvas=document.getElementById("mycanvas"); var ctx=canvas.getContext("2d"); ctx.font="30px Arial"; ctx.fillText("Hello World",10,50);
文本邊框備繪制方式:
var canvas=document.getElementById("mycanvas"); var ctx=canvas.getContext("2d"); ctx.font="30px Arial"; ctx.strkeText("Hello World",10,50);canvas 圖像
引入圖像到canvas里需要以下兩步基本操作:
獲取一個(gè)指向HTMLImageElement的對(duì)象或者另一個(gè)canvas元素的引用作為源,也可以通過(guò)提供一個(gè)URL的方式來(lái)使用圖片。
使用drawImage()函數(shù)將圖片繪制到畫布上。
獲取圖片和繪制圖片,下面只展示最簡(jiǎn)單的一種:
var canvas=document.getElementById("mycanvas"); var ctx=canvas.getContext("2d"); var img=document.getElementById("img"); ctx.drawImage(img,10,10);
drawImage有三個(gè)參數(shù):drawImage(image, x, y)。其中image是image或者 canvas對(duì)象,x和y是其在目標(biāo)canvas里的起始坐標(biāo)。
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://m.specialneedsforspecialkids.com/yun/93456.html
摘要:原文鏈接譯文來(lái)自我的博客簡(jiǎn)介如果你想用做個(gè)游戲,那么來(lái)對(duì)地方了。現(xiàn)在可以看到字母在屏幕上移動(dòng)了,恭喜你,你已經(jīng)快入門了。 原文鏈接 譯文來(lái)自我的博客 簡(jiǎn)介 如果你想用canvas做個(gè)游戲,那么來(lái)對(duì)地方了。 但是但是你至少知道javascript怎么拼寫(╯‵□′)╯︵┻━┻ 既然沒(méi)問(wèn)題,那先來(lái)玩一下或者下載 創(chuàng)建canvas標(biāo)簽 廢話不多說(shuō),我們必須創(chuàng)建一個(gè)canvas標(biāo)簽,簡(jiǎn)單起見(jiàn),...
摘要:移動(dòng)應(yīng)用開發(fā)入門經(jīng)典將這兩者巧妙結(jié)合起來(lái),詳細(xì)講解了如何利用進(jìn)行移動(dòng)應(yīng)用開發(fā)。移動(dòng)應(yīng)用開發(fā)入門經(jīng)典總共分為章,以示例的方式對(duì)如何使用及相關(guān)技術(shù)進(jìn)行移動(dòng)應(yīng)用開發(fā)做了全面而細(xì)致的介紹。HTML5是關(guān)注度ZUI高的前沿Web技術(shù),而移動(dòng)互聯(lián)網(wǎng)則是近兩年ZUI炙手可熱的Web領(lǐng)域。《HTML5移動(dòng)應(yīng)用開發(fā)入門經(jīng)典》將這兩者巧妙結(jié)合起來(lái),詳細(xì)講解了如何利用HTML5進(jìn)行移動(dòng)應(yīng)用開發(fā)。? ? HTML5...
閱讀 2166·2023-04-26 00:43
閱讀 2686·2021-11-22 15:22
閱讀 3819·2021-11-11 16:55
閱讀 970·2021-11-04 16:06
閱讀 1789·2019-08-30 14:12
閱讀 1003·2019-08-30 14:02
閱讀 3371·2019-08-29 17:05
閱讀 1419·2019-08-29 12:27