畫布（Canvas）是HTML5規范中的重要組成部分，它是一個用于繪制圖形、動畫和其他圖形圖像的容器。而CSS3中也新增了一些屬性和方法，可以讓我們更加輕松地使用畫布來繪制圖像。 首先，我們需要在HTML文件中添加畫布元素并為其設置寬度和高度屬性：

<canvas id="myCanvas" width="500" height="300"></canvas>

接著，我們需要使用JavaScript代碼獲取該元素并將其放入一個變量中，然后就可以開始繪制圖像：

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

其中，getContext()方法用于獲取畫筆上下文對象，這個對象中包含了我們所需要的方法和屬性，我們可以通過這個對象來繪制圖像。 下一步我們可以為畫布設置背景顏色：

ctx.fillStyle = 'lightblue';
ctx.fillRect(0, 0, canvas.width, canvas.height);

其中，fillStyle屬性表示填充顏色，fillRect()方法是用來繪制矩形區域并填充顏色的。 我們還可以繪制線條：

ctx.beginPath();
ctx.moveTo(100,100);
ctx.lineTo(200,200);
ctx.strokeStyle = 'red';
ctx.stroke();

其中，beginPath()方法是用來開始一條新的路徑，moveTo()方法是將畫筆移動到某個點，lineTo()方法是繪制一條線段，strokeStyle屬性表示線條顏色，stroke()方法會將之前繪制的路徑繪制出來。 除此之外，我們還可以繪制圖形：

ctx.beginPath();
ctx.arc(250, 150, 50, 0, 2*Math.PI);
ctx.fillStyle = 'green';
ctx.fill();

其中，arc()方法是用來繪制圓弧的，該方法接受五個參數，分別是圓心的x坐標、y坐標、半徑、起始角度和結束角度。fill()方法是用來填充顏色的。 最后，我們可以使用CSS3中的一些屬性來裝飾畫布中的圖像：

canvas {
	border: 1px solid gray;
	box-shadow: 2px 2px 5px gray;
	border-radius: 10px;
}

其中，border屬性用來設置邊框，box-shadow屬性用來設置陰影，border-radius屬性用來設置圓角。 在CSS3的幫助下，我們可以更加靈活地使用畫布來繪制圖像，使得我們的網頁更加豐富多彩。