<!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');
//绘制蓝色矩形
context.fillStyle = 'rgba(0,0,255,1)'; //设置填充颜色为蓝色
context.fillRect(50,20,200,200); //用这个颜色填充矩形
}
</script>
</body>
</html>
image.png
