html5如何创建矩形,html5绘制矩形

Title

var canvas = document.getElementById("canvas");

//获得绘画环境

var cxt = canvas.getContext("2d");

//填充颜色

cxt.fillStyle = "#39e1ff";

//绘制实心矩形 距离左边距，距离上边距，矩形长度，矩形高度

cxt.fillRect(0,0,50,50);

//清除

cxt.clearRect(0,0,20,20);

//绘制空心矩形

//绘制边框粗细

cxt.lineWidth = "5";

cxt.strokeStyle = "#dad"

cxt.strokeRect(50,50,50,50);

cxt.clearRect(50,50,20,20);

function cnvs_getCoordinates(e)

{

x=e.clientX;

y=e.clientY;

document.getElementById("xycoordinates").innerHTML="Coordinates: (" + x + "," + y + ")";

}