1：canvas元素及基本定義與使用；

<canvas id="test" width="400" height="400"></canvas>

if(test.getContext) //判斷是否有畫筆

{

var cdx = test.getContext("2d");//代表2d繪圖

}

2：###canvas繪制矩形

HTML中的元素canvas只支持一種原生的圖形繪制：矩形。所有其他的圖形的繪制都至少需要生成一條路徑

1.繪制矩形

canvas提供了三種方法繪制矩形：

---->繪制一個填充的矩形（填充色默認為黑色）

fillRect(x, y, width, height)

---->繪制一個矩形的邊框（默認邊框為:一像素實心黑色）

strokeRect(x, y, width, height)

---->清除指定矩形區域，讓清除部分完全透明。

clearRect(x, y, width, height)

x與y指定了在canvas畫布上所繪制的矩形的左上角（相對于原點）的坐標。

width和height設置矩形的尺寸。（存在邊框的話，邊框會在width上占據一個邊框的寬度，height同理）

2.strokeRect時，邊框像素渲染問題

按理渲染出的邊框應該是1px的，

canvas在渲染矩形邊框時，邊框寬度是平均分在偏移位置的兩側。

context.strokeRect(10,10,50,50)

:邊框會渲染在10.5 和 9.5之間,瀏覽器是不會讓一個像素只用自己的一半的

相當于邊框會渲染在9到11之間

context.strokeRect(10.5,10.5,50,50)

:邊框會渲染在10到11之間

3.添加樣式和顏色

fillStyle :設置圖形的填充顏色。

strokeStyle :設置圖形輪廓的顏色。

默認情況下，線條和填充顏色都是黑色（CSS 顏色值 #000000）

lineWidth : 這個屬性設置當前繪線的粗細。屬性值必須為正數。

描述線段寬度的數字。 0、 負數、 Infinity 和 NaN 會被忽略。

默認值是1.0。

4.lineWidth & 覆蓋渲染

5.lineJoin

設定線條與線條間接合處的樣式（默認是 miter）

round : 圓角

bevel : 斜角

miter : 直角

<script type="text/javascript">

//

window.onload=function(){

//querySelector

//拿到畫布

var canvas = document.querySelector("#test");

if(canvas.getContext){

var ctx = canvas.getContext("2d");

ctx.fillStyle="deeppink";

ctx.strokeStyle="pink";

ctx.lineWidth=25;

ctx.lineJoin="round";

//注意不加單位

//填充的矩形

//帶邊框的矩形

// 100 : 99.5 --- 100.5(99-101)

// 100.5: 100 --- 101

ctx.strokeRect(100,100,100,100)

ctx.fillRect(0,0,100,100)

// ctx.clearRect(100,100,100,100)

}

}

</script>

//畫布的高寬問題：畫布的高寬在元素中指定，不要用CSS指定，CSS指定會出現問題

總結

以上是生活随笔為你收集整理的canva基本使用和绘制矩形的全部內容，希望文章能夠幫你解決所遇到的問題。

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