當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

canvas基础-绘制矩形（1）

發布時間：2024/9/21 编程问答 30 豆豆

生活随笔收集整理的這篇文章主要介紹了 canvas基础-绘制矩形（1）小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1、canvas基礎知識

canvas元素是HTML5中新增的一個重要的元素，專門用來繪制圖形，不過canvas本身不具備畫圖的能力，在頁面中放置了canvas元素，就相當于在頁面中放置了一塊矩形的“畫布”，我們可以利用js腳本在“畫布”上繪制圖形。

1.1canvas元素?

在利用canvas繪制圖形之前，我們首先需要在頁面中放置一個canvas元素，如下代碼：

<canvas id="mycanvas" width="400" height="400">您的瀏覽器out了</canvas>

?說明：（1）放置canvas元素首先需要指定ID，widht，height三個屬性，其中寬度跟高度只能通過這種方式指定，不可以通過css樣式指定

　　　（2）canvas標簽里面的內容只有當瀏覽器不兼容canvas時，才會顯示，當瀏覽器兼容canvas時，該內容將不顯示，只顯示繪制的內容

1.2畫圖環境

Canvas.getContext(contextID)

說明：（1）contextID?指定了您想要在畫布上繪制的類型。當前唯一的合法值是 "2d"，它指定了二維繪圖。

　　　（2）getContext() 方法會返回一個對象，這個對象給我們封裝了很多的繪圖方法和屬性

1.3顏色的表示方式

顏色名稱:"red" "green" "blue"
?十六進制顏色值: "#FFFFFF"
?三色值：rgb(1-255,1-255,1-255)
?四色值：rgba(1-255,1-255,1-255,透明度)

1.4坐標系統

canvas坐標系是一個二維的平面。原點坐標（0,0）在canvas畫布的左上角位置上，沿著水平向右方向是x軸正方向，垂直方向為y軸正方向

?2、使用canvas繪制矩形

2.1 矩形API

rect() ? ?創建矩形

fillRect() ? 繪制‘被填充’矩形

strokeRect ?繪制無填充矩形

參數說明：

x:矩形起點的橫坐標
y:矩形起點的縱坐標
width:矩形的長度
height:矩形的寬度

2.2圖形修飾

2.2.1顏色樣式，陰影的方法和屬性

部分方法屬性使用說明：

?createLinearGradient(xStart,yStart,xEnd,yEnd)：該方法使用4個參數，xStart為漸變起始點的橫坐標，yStart為漸變起始點的縱坐標，xEnd為漸變結束點的橫坐標，yEnd為漸變結束點的縱坐標
addColorStop(offset,color):在使用createLinearGradient方法創建了一個使用兩個坐標點的對象之后，還需要使用addColorStop方法對漸變的顏色進行設定，offset為所設定的顏色離開漸變起始點的偏移量，該參數是一個范圍在0-1之間的浮點值i，漸變起始點的偏移量為0，漸變結束點的偏移量為1，下面用一個圖形來說明這個參數（該圖示是一個由藍色變為白色再由白色漸變到紅色的過程）

2.3開始繪制矩形

2.3.1繪制一個填充單一背景色的矩形

step1:在頁面中放置一個canvas元素

<canvas id="mycanvas" width="400" height="400">您的瀏覽器out了</canvas>

step2:取得canvas元素

var mycanvas=document.getElementById('mycanvas');

step3:獲取繪圖環境

var context=canvas.getContext('2d');

step4:設定繪圖樣式

用canvas繪制圖形的時候，有兩種方式——填充（fill）與繪制邊框(stroke)，填充是指填滿圖形內部，繪制邊框是指不填滿圖形內部只繪制圖形的外框，canvas元素結合使用者兩種方式來繪制圖形

context.fillStyle='red'; //fillStyle設置填充顏色 context.strokeStyle='blue'; //strokeStyle設置邊框顏色 context.lineWidth=3; //lineWidth設置圖形邊框的寬度

step5:開始繪制矩形

canvas分別使用fillRect方法與strokeRect方法來填充矩形和繪制矩形的邊框

context.fillRect(50,50,100,100); context.strokeRect(50,50,100,100);

效果預覽：

?2.3.2繪制一個線性漸變的矩形

step1:在該實例中，我們將直接從繪制矩形開始講,設置矩形樣式

context.strokeStyle='blue'; //strokeStyle設置邊框顏色 context.lineWidth=3; //lineWidth設置圖形邊框的寬度 var oColor=context.createLinearGradient(0,0,150,0); //創建一個線性漸變對象 oColor.addColorStop(0,'red'); //漸變由紅色開始 oColor.addColorStop(1,"white"); //過渡到白色 context.fillStyle=oColor; //將矩形的樣式設置成線性漸變

step2:開始繪制矩形

context.strokeRect(50,50,100,100); context.fillRect(50,50,100,100);

step3：完整代碼

var mycanvas=document.getElementById('mycanvas'); //獲取canvas對象
var context=mycanvas.getContext('2d'); //getContext會返回一個對象，這個對象封裝了很多繪圖的屬性和方法 context.strokeStyle='blue'; //strokeStyle設置邊框顏色 context.lineWidth=3; //lineWidth設置圖形邊框的寬度 var oColor=context.createLinearGradient(0,0,150,0); //創建一個線性漸變對象 oColor.addColorStop(0,'red'); //漸變由紅色開始 oColor.addColorStop(1,"white"); //過渡到白色 context.fillStyle=oColor; //將矩形的樣式設置成線性漸變 context.strokeRect(50,50,100,100); context.fillRect(50,50,100,100);

step4:效果預覽

2.3.3繪制一個帶陰影的矩形

step1:設置矩形樣式以及陰影樣式

context.fillStyle='red'; //設置矩形的填充顏色 context.shadowBlur=20; //設置陰影的模糊級別 context.shadowColor='black'; //設置陰影的顏色