Canvas容器绘制直线

来源:互联网 发布:淘宝打电话需要理他吗 编辑:程序博客网 时间:2024/06/05 01:58
<!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>


0 0
原创粉丝点击