<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<canvas id="canvas" style="background-color: darkgrey;width: 500px;height: 300px;" οnmοusemοve="cnvs_getCoordinates(event)" ></canvas>
<div id="xycoordinates"></div>
<script type="text/javascript">
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 + ")";
}
</script>
</body>
</html>
html5绘制矩形
最新推荐文章于 2023-07-10 14:17:19 发布