<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="myCanvas" width="500" height="300" style="border:1px solid #d3d3d3;background:#ffffff;">11</canvas>
<button id="bt">变色</button>
<script src="plugins/jQuery/jQuery-2.1.4.min.js"></script>
<script>
$(function() {
var ct =$("#myCanvas")[0].getContext("2d");
ct.fillStyle="#FF0000";//绘制矩形
var f1 = ct.fillRect(50, 50, 50, 50);
var f2 = ct.fillRect(110, 50, 50, 50);
$('#bt').click(function(){
//清除填充色
//ct.clearRect(50, 50, 50, 50);
//重新填充颜色
ct.rect(50, 50, 50, 50);
ct.fillStyle="green";
ct.fill();
})
})
</script>
</body>
</html>