HTML5绘制矩形和圆形并且还有获取在这个图层内的坐标的思路和代码 - feilong_12的专栏 - 博客频道 - CSDN.NET

时间：2023-03-08 17:20:25

body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI",Tahoma,Helvetica,Sans-Serif,"Microsoft YaHei", Georgia,Helvetica,Arial,sans-serif,宋体, PMingLiU,serif; font-size: 10.5pt; line-height: 1.5;}html, body{ }h1 { font-size:1.5em; font-weight:bold;}h2 { font-size:1.4em; font-weight:bold;}h3 { font-size:1.3em; font-weight:bold;}h4 { font-size:1.2em; font-weight:bold;}h5 { font-size:1.1em; font-weight:bold;}h6 { font-size:1.0em; font-weight:bold;}img { border:0; max-width: 100%;}blockquote { margin-top:0px; margin-bottom:0px;}table { border-collapse:collapse; border:1px solid #bbbbbb;}td { border-collapse:collapse; border:1px solid #bbbbbb;}HTML5绘制矩形和圆形并且还有获取在这个图层内的坐标的思路和代码 - feilong_12的专栏 - 博客频道 - ****.NET<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta charset="utf-8" />
    <title>HTML5</title>

    <!-- WinJS 引用 -->
    <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

    <!-- HTML5 引用 -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>
</head>
<body>
    <p>此处显示内容</p>
    <canvas id="canvas1" width="320" height="200">
        您的浏览器不支持canvas 元素

    </canvas>

<canvas id="canvas2" width="320" height="200">

        您的浏览器不支持canvas 元素
    </canvas>
    <div id="div1" onmousemove="getCo(event)" onmouseout="clearCo()" style="width:300px;height:200px;border:1px solid green" >

        <div id="xycoordiv"></div>

    </div>
</body>
    <script>
        //先找到canvas这个画布
        var c = document.getElementById("canvas1");
        //获得对象，这个对象是用来画图的
        var ctx = c.getContext("2d");
        ctx.fillStyle = "#ff0000";
        //开始绘图了，通过fillRect(),四个参数，开始的坐标，大小
        ctx.fillRect(150, 150, 300, 200);//这是输出的一个方形
        var c1 = document.getElementById("canvas2");
        var ctx1 = c1.getContext("2d");
        //在绘图之前通知canvas 我要开始绘图了
        ctx1.beginPath();
        //Math.PI获得圆周率,会出一个半圆，*2 获得一个圆
        ctx1.arc(100, 100, 15, 0, Math.PI * 2, true);
        //闭合 圆
        ctx1.closePath();
        ctx1.fillStyle = "green";
        ctx1.fill();
        function getCo(e) {
            var x = e.clientX;
            var y = e.clientY;
            document.getElementById("xycoordiv").innerHTML = "当前坐标是：" + x + ',' + y ;
        }
        function clearCo() {
            document.getElementById("xycoordiv").innerHTML = "";
        }//获取鼠标的坐标
    </script>
</html>