<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<canvas id="myCanvar" width=500 height=500 style="border:1px solid #d3d3d3;"></canvas>
<script>
var canvars = document.getElementById("myCanvar");
var context = myCanvar.getContext("2d");
context.fillStyle="#0000ee";//一定要写在fillRect前面,不然出现的颜色是默认的黑色,而且 context.fillStyle中的context一定要与前面定义相同!这段是背景色
context.fillRect(0,10,300,300);//这是绘出矩形
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<canvas id="myCanvar" width=500 height=500 style="border:1px solid #d3d3d3;"></canvas>
<script>
var canvars = document.getElementById("myCanvar");
var context = myCanvar.getContext("2d");
context.fillStyle="#0000ee";//一定要写在fillRect前面,不然出现的颜色是默认的黑色,而且 context.fillStyle中的context一定要与前面定义相同!这段是背景色
context.fillRect(0,10,300,300);//这是绘出矩形
</script>
</body>
</html>