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的专栏 - 博客频道 - CSDN.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>

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

  1. JS获取整个HTML网页代码 - Android 集美软件园 - 博客频道 - CSDN.NET

    JS获取整个HTML网页代码 - Android 集美软件园 - 博客频道 - CSDN.NET JS获取整个HTML网页代码 分类: Android提高 2012-01-12 23:27 1974人 ...

  2. HTML5 Canvas动画效果演示 - 流浪的鱼 - 博客频道 - CSDN.NET

    HTML5 Canvas动画效果演示 - 流浪的鱼 - 博客频道 - CSDN.NET HTML5 Canvas动画效果演示

  3. c++ 如何获取系统时间 - zjnig711的信息仓库 - 博客频道 - CSDN.NET

    c++ 如何获取系统时间 - zjnig711的信息仓库 - 博客频道 - CSDN.NET c++ 如何获取系统时间 分类: C/C++ 2008-05-08 22:15 14115人阅读 评论(5 ...

  4. jquery选择器 之 获取父级元素、同级元素、子元素 - yes的日志 - 网易博客

    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...

  5. html5 canvas绘制矩形和圆形

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. Canvas 绘制矩形，圆形，不规则图形（线条），渐变等图像效果

    绘制矩形: getContext("2d") 对象是内建的 HTML5 对象,拥有多种绘制路径.矩形.圆形.字符以及添加图像的方法. fillStyle 方法将其染成红色,fill ...

  7. h5学习-canvas绘制矩形、圆形、文字、动画

    绘制矩形<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...

  8. canvas 绘制矩形和圆形

    canvas绘制有两神方法:1).填充(fill)填充是将图形内部填满. 2).绘制边框 (stroke)绘制边框是不把图形内部填满,只是绘制图形的外框. 当我们在绘制图形的时候,首先要设定好绘制的样 ...

  9. python编写的自动获取代理IP列表的爬虫-chinaboywg-ChinaUnix博客

    python编写的自动获取代理IP列表的爬虫-chinaboywg-ChinaUnix博客 undefined Python多线程抓取代理服务器 | Linux运维笔记 undefined java如 ...

随机推荐

  1. switch case多值匹配

    switch case多值匹配一般有两种情况 1.列举(将所有值列举出来) var n= 3;switch (n){    case 1:     case 2:    case 3:         ...

  2. opencv基础知识------IplImage, CvMat, Mat 的关系和相互转换

    Mat,cvMat和IplImage这三种类型都可以代表和显示图像,但是,Mat类型侧重于计算,数学性较高,openCV对Mat类型的计算也进行了优化.而CvMat和IplImage类型更侧重于“图像 ...

  3. http的状态码（中英文）

    1**:请求收到,继续处理 2**:操作成功收到,分析.接受 3**:完成此请求必须进一步处理 4**:请求包含一个错误语法或不能完成 5**:服务器执行一个完全有效请求失败 100——客户必须继续发 ...

  4. libmysql.dll 找不到

    在用C#开发的时候,需要连接MySQL  ,系统提示  libmysql.dll 找不到模块. 我们可以找到 MySQL安装文件夹下的 C:\Program Files\MySQL\MySQL Ser ...

  5. iOS客户端开发与Web前端开发

    转载自:http://blog.cnbang.net/tech/1813/不知不觉做iOS客户端开发已经半年多了,了解到iOS客户端开发与Web前端开发的一些异同,写一下. 版本升级.用户角度上看,客 ...

  6. GetClientRect

    这个函数好像就是对应于视口的,获取视口的宽高 #include <windows.h> LRESULT CALLBACK WndProc (HWND, UINT, WPARAM, LPAR ...

  7. java 类与对象

    class XiyoujiRenwu { float height,weight; String head, ear; void speak(String s) { System.out.printl ...

  8. elasticsearch高级配置之（二）----线程池设置

    elasticsearch 配置 线程池  一个Elasticsearch节点会有多个线程池,但重要的是下面四个:  索引(index):主要是索引数据和删除数据操作(默认是cached类型)  搜索 ...

  9. STM32中断触发

    使用PB1作为外部中断触发,按一次按键灯处于亮状态,在按一次灯灭. 1.先配置GPIO端口.复用管脚外设时钟使能GPIO_Config(); void GPIO_Config(void) { GPIO ...

  10. 设计模式---Manager（管理器）

    设计模式之美:Manager(管理器) 索引 意图 结构 参与者 适用性 效果 实现 实现方式(一):Manager 模式的示例实现. 意图 将对一个类的所有对象的管理封装到一个单独的管理器类中. 这 ...