Canvas簡(jiǎn)介

canvas 最早由Apple引入WebKit,用于Mac OS X 的 Dashboard,后來又在Safari和Google Chrome被實(shí)現(xiàn)。?基于 Gecko 1.8的瀏覽器,比如 Firefox 1.5, 同樣支持這個(gè)元素。?canvas?元素是WhatWG Web applications 1.0規(guī)范的一部分,也包含于HTML 5中。

什么是canvas

HTML5 的 canvas 元素使用 JavaScript 在網(wǎng)頁上繪制圖像。?畫布是一個(gè)矩形區(qū)域，您可以控制其每一像素。?canvas 擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。

就是相當(dāng)于在頁面上放置一個(gè)canvas元素，就相當(dāng)于在頁面上放置了一塊畫布，可以在其中進(jìn)行圖形的描繪。
canvas元素只是一塊無色透明的區(qū)域，需要利用JS編寫在其中進(jìn)行繪畫的腳本。

創(chuàng)建Canvas元素

?向 HTML5 頁面添加 canvas 元素。?規(guī)定元素的 id、寬度和高度：

<!-- canvas表示畫布的意思(在畫布中可以化你任意想化的畫) --> <canvas id="myCanvas" width="500" height="600"></canvas> <style>*{margin:0;padding:0;}canvas{display: block;margin: 50px auto;border: 2px blue solid;}/*canvas標(biāo)簽?zāi)J(rèn)就有高度和寬度的樣式canvas標(biāo)簽可以支持所有的CSS樣式*/ </style>

canvas標(biāo)簽?zāi)J(rèn)是行元素(display:inline)

那為什么一個(gè)display:inline行元素他可以支持寬高呢?？？

因?yàn)閏anvas是一個(gè)替換元素他就可以支持寬高(什么是可替換元素)

通過JavaScript來繪制canvas

在H5中canvas標(biāo)簽向JS提供了許多API接口，來讓我們通過JS來繪制canvas標(biāo)簽中的一些畫面等。。。

基礎(chǔ)知識(shí)

var?canvas?=?document.getElementById('canvas'); 獲取畫布

var?cxt?=?canvas.getContext('2d'); 獲取2d畫筆(最常用)

canvas.getContext('webgl'); 獲取3d畫筆但是兼容性不是很好(不常用)一般是做不出來的

首先我們要獲取畫布和畫筆 然后就可以在canvas上面畫任何的圖形了

//獲取畫布 var canvas = document.getElementById('myCanvas'); //獲取畫筆 //畫布.getContext('2d') 就可以獲取到畫筆了 當(dāng)前這個(gè)畫筆是2d畫筆 var cxt = canvas.getContext('2d');//2d畫筆最常用

我們們?cè)诶L制任何圖形的時(shí)候一般用用兩種方式來繪制圖形

一種是stroke方式來繪制空心的圖形，另一種是fill方式來繪制實(shí)心的圖形

而我們繪制矩形的時(shí)候跟著兩種方式有所不同(繪制矩形也可以用stroke和fill方式來繪制)，也可以說canvas提供了更快捷的方式來繪制矩形

//獲取畫布 var canvas = document.getElementById('myCanvas'); //獲取畫筆 var cxt = canvas.getContext('2d');//2d畫筆最常用//首先你要定義繪制圖形什么圖形的軌跡 //在決定用stroke和fill方式來繪制圖形//定義繪制矩形的軌跡 cxt.rect(0,0,200,200); //繪制矩形 cxt.stroke();

繪制任何圖形都能用到的兩種方式

cxt.stroke()繪制空心圖形

cxt.fill()繪制實(shí)心圖形

首先你要定義繪制圖形的軌跡在來選擇用stroke和fill方式來繪制圖形

繪制矩形

基礎(chǔ)知識(shí)

繪制矩形有兩種方式

第一種方式

先用rect方法定義一個(gè)矩形的軌跡，在用stroke或者是fill方法繪制圓形

cxt.rect(x,y,w,h)?定義矩形的軌跡

cxt.stroke()繪制空心矩形

cxt.fill()繪制實(shí)心矩形

//獲取畫布 var canvas = document.getElementById('myCanvas'); //獲取畫筆 var cxt = canvas.getContext('2d');//2d畫筆最常用 //定義繪制矩形的軌跡 cxt.rect(0,0,200,200); //繪制矩形 //cxt.stroke();//繪制空心矩形 cxt.fill();//繪制實(shí)心矩形

繪制矩形的軌跡：rect接收的參數(shù)

cxt.rect(10,20,100,150); //cxt.rect(距離畫布左上角的距離,距離畫布右上角的距離,繪制圖形的寬度,繪制圖形的高度)

點(diǎn)前cxt.rect表示你要在距離畫布水平方向10像素豎直方向20像素這個(gè)點(diǎn)開始繪制矩形，繪制長(zhǎng)方形的大小是寬度為100高度為150的一個(gè)矩形

?cxt.rect(10,20,100,150)這個(gè)函數(shù)是用來繪制一個(gè)在x,y這個(gè)點(diǎn)開始繪制指定寬度和高度的矩形(繪制一個(gè)軌跡)

第二種方式

canvas提供了兩種方式直接繪制矩形不用先用rect繪制軌跡在用stroke和fill繪制矩形了

cxt.fillRect(x,y,w,h); 繪制實(shí)心的矩形

cxt.strokeRect(x,y,w,h); 繪制空心的矩形

繪制一個(gè)實(shí)心的矩形

//獲取畫布 var canvas = document.getElementById('myCanvas'); //獲取畫筆 var cxt = canvas.getContext('2d');//2d畫筆最常用 //繪制實(shí)心的矩形 cxt.fillRect(10,20,100,150);

?file表示(填充)?Rect表示(矩形)?通過畫筆用fillRect繪制一個(gè)充滿的實(shí)心的矩形

繪制實(shí)心矩形：fillRect接收的參數(shù)

//繪制實(shí)心矩形 cxt.fillRect(10,20,100,150); // cxt.fillRect(距離畫筆左上角的距離,距離畫布右上角的距離,繪制圖形的寬度,繪制圖形的高度)

?繪制一個(gè)空心的矩形

//獲取畫布 var canvas = document.getElementById('myCanvas'); //獲取畫筆 var cxt = canvas.getContext('2d');//2d畫筆最常用 //繪制空心矩形 cxt.strokeRect(10,20,100,150);

?表示stroke(空心)?Rect(矩形)通過畫筆用strokeRect繪制一個(gè)空心的矩形

繪制空心矩形：strokeRect接收的參數(shù)

//繪制空心矩形 cxt.strokeRect(10,20,100,150); // cxt.strokeRect(距離畫筆左上角的距離,距離畫布右上角的距離,繪制圖形的寬度,繪制圖形的高度)

?繪制圓形

基礎(chǔ)知識(shí)

在數(shù)學(xué)中一π等于180度，兩π等于360度,也就是一個(gè)圓周，而在js中數(shù)學(xué)對(duì)象中的Math.PI來表示π

cxt.arc(x,y,r,圓的起始角度,圓的終止角度,true)?false?為默認(rèn)值表示順時(shí)針繪制圓，true表示逆時(shí)針繪制圓繪制圓形軌跡

通過cxt.arc方法來繪制圓的軌跡然后在通過stroke或者是fill來繪制是空心的還是實(shí)心的圓

arc繪制圓形的軌跡接收的參數(shù)：cxt.arc(圓心距離畫布的水平距離,圓心距離畫布的豎直距離,表示圓的半徑,繪制圓的起點(diǎn),繪制圓的終點(diǎn),表示順時(shí)針繪制還是逆時(shí)針繪制)默認(rèn)值是false??false表示順時(shí)針繪制圓?true表示逆時(shí)針繪制圓

繪制實(shí)心的圓形

//獲取畫布 var canvas = document.getElementById('myCanvas'); //獲取畫筆 var cxt = canvas.getContext('2d');//2d畫筆最常用 //繪制圓的軌跡 cxt.arc(200,200,200,0,Math.PI*2,false); //繪制實(shí)心的圓 cxt.fill(); //第一個(gè)參數(shù)和第二個(gè)參數(shù)表示圓的圓心 //cxt.arc(圓心距離畫布的水平距離, 圓心距離畫布的豎直距離, 表示圓的半徑, 繪制圓的起點(diǎn), 繪制圓的終點(diǎn), 表示順時(shí)針繪制還是逆時(shí)針繪制) //默認(rèn)值是false false表示順時(shí)針繪制圓 true表示逆時(shí)針繪制圓 //Math.PI(π) = 180°

繪制空心的圓形

//獲取畫布 var canvas = document.getElementById('myCanvas'); //獲取畫筆 var cxt = canvas.getContext('2d');//2d畫筆最常用 //繪制圓的軌跡 //從250,250位置開始繪制圓 圓的半徑是250 在從180度多開始逆時(shí)針繪制到360度 cxt.arc(250,250,250,Math.PI,Math.PI*2,true); //繪制空心的圓 cxt.stroke();

繪制線段

前言

在實(shí)際生活當(dāng)中是兩點(diǎn)確定一條直線的，那么在canvas中可以用moveTo來表示繪制線段的起點(diǎn)，用lineTo來表示繪制線段的終點(diǎn)這樣就可以確定一條直線了，在選擇stroke或者是fill方式繪制線段，其實(shí)每次繪制圖形的時(shí)候都是一個(gè)路徑其實(shí)可以用beginPath來開始繪制路徑在用closePath閉合當(dāng)前路徑，這兩種方法在畫圖形的時(shí)候必須要寫上不然會(huì)讓路徑連上效果不好。

基礎(chǔ)知識(shí)

cxt.moveTo(距離畫布水平方向,距離畫布豎直方向)?繪制線段的起始點(diǎn)

cxt.lineTo(距離畫布水平方向,距離畫布豎直方向)? 繪制線段的終點(diǎn)

cxt.lineWidth = 數(shù)值?設(shè)置畫筆的線寬

cxt.strokeStyle = '顏色值'? 設(shè)置實(shí)心畫筆的顏色

cxt.fillStyle = '顏色值'? 設(shè)置空心畫筆的顏色

開始繪制路徑和閉合當(dāng)前的路徑

cxt.beginPath()???開始繪制路徑 （必須要寫???斷開和上次路徑之前的關(guān)系）

cxt.closePath()???閉合當(dāng)前的路徑 （?這兩個(gè)函數(shù)是配套的）

設(shè)置兩條線段連接處的樣式

cxt.lineJoin = 'miter'? 默認(rèn)值

cxt.lineJoin = 'round' 連接處變成圓角?

cxt.lineJoin = 'bevel' ?連接處變成斜角

設(shè)置一條線段兩端的樣式

cxt.lineCap = 'butt' ?默認(rèn)值

cxt.lineCap = 'round'? 兩端變圓角

cxt.lineCap = 'square' 兩端增加線寬的一半

square往線的兩端追加長(zhǎng)度(長(zhǎng)度是你當(dāng)前線寬的一半)?上面添加5?和?下面添加5?=?當(dāng)前線寬10

繪制一條線段
?

//獲取畫布 var canvas = document.getElementById('myCanvas'); //獲取畫筆 var cxt = canvas.getContext('2d'); //繪制開始線段路徑 讓畫筆移動(dòng)到某個(gè)點(diǎn)上(初始點(diǎn)) cxt.moveTo(20,20); //繪制結(jié)束線段路徑 在讓畫筆移動(dòng)到終點(diǎn)上面(最終點(diǎn)) cxt.lineTo(200,200); //繪制線段 cxt.stroke();

繪制線段：定義線段的軌跡(先有一個(gè)初始點(diǎn)在有一個(gè)終點(diǎn)，然后就可以得出兩個(gè)點(diǎn)了(兩點(diǎn)之間確定一條直線)

繪制線段的路徑：移動(dòng)畫筆到?20?20這個(gè)點(diǎn)用cxt.moveTo(20,20) ,??再次移動(dòng)到 200 200?這個(gè)點(diǎn)cxt.lineTo(200,200) ,?然后這個(gè)兩個(gè)點(diǎn)已經(jīng)是一條線段了

繪制線段：cxt.stroke()繪制空心線段? 注意一般在繪制線段的時(shí)候都用stroke方式繪制線段，不會(huì)使用fill方式繪制線段的

設(shè)置畫筆的樣式

我們?cè)谟胏anvas畫東西的時(shí)候?分為兩種繪制的方法(方法和設(shè)置畫筆的屬性都要對(duì)應(yīng)上)

第一種：畫筆.stroke繪制實(shí)心的東西?

第二種：畫筆.fill繪制空心的東西

設(shè)置畫筆的顏色和設(shè)置畫筆的寬度都是根據(jù)?畫筆的種類來進(jìn)行設(shè)置的{?1.stroke實(shí)心?2.fill空心}

設(shè)置畫筆的線寬

畫是畫筆畫出來的，讓畫筆的線寬變粗?自然就可以讓線條變粗了

var canvas = document.getElementById('myCanvas'); var cxt = canvas.getContext('2d'); //畫筆.lineWidth設(shè)置畫筆的畫筆的線條寬度 line(線) //設(shè)置畫筆的線寬 cxt.lineWidth = 10; //繪制開始線段路徑 cxt.moveTo(20,20); //繪制結(jié)束線段路徑 cxt.lineTo(200,200); cxt.stroke();

設(shè)置畫筆的顏色繪制線段?

var canvas = document.getElementById('myCanvas'); var cxt = canvas.getContext('2d'); //設(shè)置畫筆的線寬 cxt.lineWidth = 10; //畫筆.strokeStyle設(shè)置畫筆的顏色 //stroke表示空心 設(shè)置空心畫筆的顏色 fill表實(shí)心 設(shè)置實(shí)心畫筆的顏色 cxt.strokeStyle = 'pink'; //設(shè)置空心畫筆的顏色 // cxt.fillStyle = 'pink' //設(shè)置實(shí)心畫筆的樣式 cxt.moveTo(20,20); cxt.lineTo(200,200); cxt.stroke();

一般繪制線條都是默認(rèn)(stroke)空心的，實(shí)心線條不會(huì)顯示出來沒有人這樣用

用線條繪制一個(gè)圖形

var canvas = document.getElementById('myCanvas'); var cxt = canvas.getContext('2d'); cxt.strokeStyle = 'pink'; cxt.lineWidth = 10; //設(shè)置兩條線段連接處的樣式 cxt.lineJoin = 'round'; cxt.beginPath();//表示開始斷開路徑 cxt.moveTo(20,20); cxt.lineTo(20,100); cxt.lineTo(50,80); cxt.closePath()//閉合當(dāng)前路徑 cxt.stroke();

用cxt.lineJoin = 'round'設(shè)置線條的兩端樣式為圓角，也可以連續(xù)用lineTo方法繪制多個(gè)線段，在繪制路徑之前最好調(diào)用beginPath函數(shù)斷開之前路徑?，cxt.closePath(); 自動(dòng)把當(dāng)前這個(gè)點(diǎn)把路徑給關(guān)閉了(閉合當(dāng)前路徑) 這個(gè)函數(shù)有閉合路徑的作用

繪制一個(gè)圓

圓也是一個(gè)路徑?也繪制一個(gè)新的路徑時(shí)調(diào)用beginPath來閉合上一次路徑

var canvas = document.getElementById('myCanvas'); var cxt = canvas.getContext('2d'); cxt.strokeStyle = 'pink'; cxt.lineWidth = 10; cxt.beginPath();//繪制一個(gè)新的路徑時(shí)必須調(diào)用beginPath函數(shù) //表示開始繪制圓的路徑 cxt.arc(150,150,100,0,Math.PI); cxt.closePath() //閉合當(dāng)前的路徑(圓也是路徑也需要閉合) cxt.stroke();

繪制文字

前言

在canvas標(biāo)簽內(nèi)不可以在內(nèi)部寫其他的標(biāo)簽和文字

那我們想讓canvas標(biāo)簽內(nèi)部有文字那該怎么辦？？

canvas通過們提供了一個(gè)cxt.font這個(gè)屬性內(nèi)部可以寫字體大小和字體的系列，然后在通過cxt.fillText()或者是cxt.strokeText()選擇是繪制空心文字還是實(shí)心文字。

基礎(chǔ)知識(shí)

cxt.font?=?'20px?微軟雅黑'??繪制字體的大小和系列

cxt.fillText(文字,繪制文字的x位置,繪制文字的y位置)繪制實(shí)心文字

cxt.strokeText(文字,繪制文字的x位置,繪制文字的y位置)繪制空心文字 （不常用）

設(shè)置文字和繪制文字的x水平位置的對(duì)齊方式

cxt.textAlign?=?'center'; 居中對(duì)齊?常用?

cxt.textAlign?=?'left';? 左對(duì)齊?默認(rèn)

cxt.textAlign?=?'right'; 右對(duì)齊?

設(shè)置文字和繪制文字的y位置的對(duì)齊方式

cxt.textBaseline?=?'bottom'??文字的最低部和繪制文字的y位置對(duì)齊

cxt.textBaseline?=?'middle'? ?文字的最中間和繪制文字的y位置對(duì)齊(常用)

cxt.textBaseline?=?'top'??文字的最頂間和繪制文字的y位置對(duì)齊

cxt.textBaseline?=?'hanging'?文字的最頂間和繪制文字的y位置對(duì)齊(和top效果差不多)

文字的陰影

?cxt.shadowOffsetX?= 數(shù)值? ?設(shè)置文字陰影的水平偏移量

cxt.shadowOffsetY?= 數(shù)值? ??設(shè)置文字陰影的豎直偏移量

?cxt.shadowColor?=?'顏色名/rgb/rgba/十六進(jìn)制'??設(shè)置文字陰影的顏色

?cxt.shadowBlur?= 數(shù)值0-1;?設(shè)置文字陰影的模糊程度

cxt.measureText(文本) ? 測(cè)量文本的寬度（不常用）

繪制文字帶有陰影

var canvas = document.getElementById('myCanvas'); var cxt = canvas.getContext('2d'); //繪制文字的軌跡 cxt.font = '20px 微軟雅黑'; //設(shè)置文字的x軸水平對(duì)齊方式 cxt.textAlign = 'center'; //設(shè)置文字的y軸位置對(duì)齊方式 cxt.textBaseline = 'middle'; //設(shè)置文字的陰影樣式 cxt.shadowColor = 'red'; //設(shè)置文字陰影的水平偏移量 cxt.shadowOffsetX = 10 //設(shè)置文字陰影的豎直偏移量 cxt.shadowOffsetY = 10 //設(shè)置文字陰影的模糊程度 cxt.shadowBlur = 0.5; //繪制文字 cxt.fillText('花生', 250, 30);

繪制曲線(不常用)

前言

兩點(diǎn)之間確定一條直線，但是這個(gè)直線不一定是直線也有可能是曲線。

基礎(chǔ)知識(shí)

繪制二次貝塞爾曲線

二次貝塞爾曲線有一個(gè)控制點(diǎn)? x0,y0表示 控制點(diǎn)的坐標(biāo)

cxt.quadraticCurveTo(x0,y0,x1,y1)?

cxt.quadraticCurveTo(控制點(diǎn)的x,控制點(diǎn)的y,曲線終點(diǎn)的x,曲線終點(diǎn)的y)

繪制三次貝塞爾曲線

三次貝塞爾曲線有兩個(gè)控制點(diǎn)? ?x0,y0??? x1,y1 分別表示兩個(gè)控制點(diǎn)的坐標(biāo)

cxt.quadraticCurveTo(x0,y0,x1,y1,x2,y2)

cxt.quadraticCurveTo(第一個(gè)控制點(diǎn)的x,第一個(gè)控制點(diǎn)的y,第二個(gè)控制點(diǎn)的x,第二個(gè)控制點(diǎn)的y,曲線終點(diǎn)的x,曲線終點(diǎn)的y);

繪制二次貝塞爾曲線

繪制二次貝塞爾曲線(只有一個(gè)控制點(diǎn)叫做二次貝塞爾曲線)

繪制二次貝塞爾曲線你要有?moveTo()繪制曲線起點(diǎn)??cxt.quadraticCurveTo(控制點(diǎn),終點(diǎn))繪制曲線的終點(diǎn) 這些條件才能繪制曲線

var canvas = document.getElementById('myCanvas'); var cxt = canvas.getContext('2d'); cxt.beginPath(); //繪制曲線的起點(diǎn) cxt.moveTo(20, 20); //繪制曲線的終點(diǎn) cxt.quadraticCurveTo(40, 40, 100, 200); cxt.stroke();

繪制三次貝塞爾曲線

繪制三次貝塞爾曲線(有兩個(gè)控制點(diǎn)叫做三次貝塞爾曲線)

繪制三次貝塞爾曲線?moveTo()繪制曲線起點(diǎn)??cxt.quadraticCurveTo(控制點(diǎn)1,控制點(diǎn)2,終點(diǎn))繪制曲線終點(diǎn) 這些條件才能繪制曲線

var canvas = document.getElementById('myCanvas'); var cxt = canvas.getContext('2d'); cxt.beginPath(); //繪制曲線的起點(diǎn) cxt.moveTo(20, 20); //獲取曲線的終點(diǎn) cxt.quadraticCurveTo(100, 20, 300, 200, 400, 400); cxt.stroke();

?

總結(jié)

以上是生活随笔為你收集整理的H5canvas(绘制矩形，绘制圆形，绘制线段，绘制文字，绘制曲线)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。