Canvas簡介

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

什么是canvas

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

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

創建Canvas元素

?向 HTML5 頁面添加 canvas 元素。?規定元素的 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標簽默認就有高度和寬度的樣式canvas標簽可以支持所有的CSS樣式*/ </style>

canvas標簽默認是行元素(display:inline)

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

因為canvas是一個替換元素他就可以支持寬高(什么是可替換元素)

通過JavaScript來繪制canvas

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

基礎知識

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

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

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

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

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

我們們在繪制任何圖形的時候一般用用兩種方式來繪制圖形

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

而我們繪制矩形的時候跟著兩種方式有所不同(繪制矩形也可以用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()繪制實心圖形

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

繪制矩形

基礎知識

繪制矩形有兩種方式

第一種方式

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

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

cxt.stroke()繪制空心矩形

cxt.fill()繪制實心矩形

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

繪制矩形的軌跡：rect接收的參數

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

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

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

第二種方式

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

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

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

繪制一個實心的矩形

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

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

繪制實心矩形：fillRect接收的參數

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

?繪制一個空心的矩形

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

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

繪制空心矩形：strokeRect接收的參數

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

?繪制圓形

基礎知識

在數學中一π等于180度，兩π等于360度,也就是一個圓周，而在js中數學對象中的Math.PI來表示π

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

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

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

繪制實心的圓形

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

繪制空心的圓形

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

繪制線段

前言

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

基礎知識

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

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

cxt.lineWidth = 數值?設置畫筆的線寬

cxt.strokeStyle = '顏色值'? 設置實心畫筆的顏色

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

開始繪制路徑和閉合當前的路徑

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

cxt.closePath()???閉合當前的路徑 （?這兩個函數是配套的）

設置兩條線段連接處的樣式

cxt.lineJoin = 'miter'? 默認值

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

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

設置一條線段兩端的樣式

cxt.lineCap = 'butt' ?默認值

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

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

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

繪制一條線段
?

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

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

繪制線段的路徑：移動畫筆到?20?20這個點用cxt.moveTo(20,20) ,??再次移動到 200 200?這個點cxt.lineTo(200,200) ,?然后這個兩個點已經是一條線段了

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

設置畫筆的樣式

我們在用canvas畫東西的時候?分為兩種繪制的方法(方法和設置畫筆的屬性都要對應上)

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

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

設置畫筆的顏色和設置畫筆的寬度都是根據?畫筆的種類來進行設置的{?1.stroke實心?2.fill空心}

設置畫筆的線寬

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

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

設置畫筆的顏色繪制線段?

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

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

用線條繪制一個圖形

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

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

繪制一個圓

圓也是一個路徑?也繪制一個新的路徑時調用beginPath來閉合上一次路徑

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

繪制文字

前言

在canvas標簽內不可以在內部寫其他的標簽和文字

那我們想讓canvas標簽內部有文字那該怎么辦？？

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

基礎知識

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

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

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

設置文字和繪制文字的x水平位置的對齊方式

cxt.textAlign?=?'center'; 居中對齊?常用?

cxt.textAlign?=?'left';? 左對齊?默認

cxt.textAlign?=?'right'; 右對齊?

設置文字和繪制文字的y位置的對齊方式

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

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

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

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

文字的陰影

?cxt.shadowOffsetX?= 數值? ?設置文字陰影的水平偏移量

cxt.shadowOffsetY?= 數值? ??設置文字陰影的豎直偏移量

?cxt.shadowColor?=?'顏色名/rgb/rgba/十六進制'??設置文字陰影的顏色

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

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

繪制文字帶有陰影

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

繪制曲線(不常用)

前言

兩點之間確定一條直線，但是這個直線不一定是直線也有可能是曲線。

基礎知識

繪制二次貝塞爾曲線

二次貝塞爾曲線有一個控制點? x0,y0表示 控制點的坐標

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

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

繪制三次貝塞爾曲線

三次貝塞爾曲線有兩個控制點? ?x0,y0??? x1,y1 分別表示兩個控制點的坐標

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

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

繪制二次貝塞爾曲線

繪制二次貝塞爾曲線(只有一個控制點叫做二次貝塞爾曲線)

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

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

繪制三次貝塞爾曲線

繪制三次貝塞爾曲線(有兩個控制點叫做三次貝塞爾曲線)

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

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

?

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。