<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body onload="init()">
<canvas id="canvas" width="600px" height="600px" style="border: 1px solid #ff0000;">
</canvas>
<script type="text/javascript">
function init(){
//獲取<canvas>元素
var canvas = document.getElementById('canvas');
//獲取二維圖形的繪圖上下文
var context = canvas.getContext('2d');
//繪制藍(lán)色矩形
context.fillStyle = 'rgba(0,0,255,1)'; //設(shè)置填充顏色為藍(lán)色
context.fillRect(50,20,200,200); //用這個(gè)顏色填充矩形
}
</script>
</body>
</html>
image.png
