您的位置：首页 > 其它

Canvas容器绘制直线

2016-03-21 17:12 423 查看

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title></title>

</head>

<body style="margin:0px;">

<canvas id="myCanvas" width="200" height="100" style="border:1px solid;" onmousemove="cnvs_getCoordinates(event)"

onmouseout="cnvs_clearCoordinates()"></canvas>

<div id="xycoordinates"></div>

</body>

</html>

<script type="text/javascript">

function cnvs_getCoordinates(e) {

x = e.clientX;

y = e.clientY;

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

}

function cnvs_clearCoordinates() {

document.getElementById("xycoordinates").innerHTML = "";

}

var c = document.getElementById("myCanvas");

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

cxt.moveTo(10, 10);

cxt.lineTo(150, 50);

cxt.lineTo(10, 50);

cxt.lineTo(10, 10);

cxt.stroke();

</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航