国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

HTML5 canvas 入門

tomener / 2547人閱讀

摘要:所有的繪制工作必須在內(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è)屬性—— widthheight,當(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)前的填充方式,xy指定了在canvas畫布上所繪制的矩形的左上角(相對(duì)于原點(diǎn))的坐標(biāo)。widthheight設(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)。其中imageimage或者 canvas對(duì)象,xy是其在目標(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

相關(guān)文章

  • 【譯】HTML5 游戲入門

    摘要:原文鏈接譯文來(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),...

    kun_jian 評(píng)論0 收藏0
  • HTML5移動(dòng)應(yīng)用開發(fā)入門經(jīng)典 中文pdf掃描版

    摘要:移動(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...

    Scliang 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

tomener

|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<