<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style>

body{

    background:pink;

    }

#c1{

    background:white;

    }    

</style>

<script>

window.onload = function ()

{

    var oC = document.getElementById('c1');

    var oGC = oC.getContext('2d');

    oC.onmousedown = function (ev)

    {

        var ev = ev || event;

        oGC.moveTo(ev.clientX - oC.offsetLeft, ev.clientY - oC.offsetTop);

        document.onmousemove = function (ev)

        {

            var ev = ev || event;

            oGC.lineTo(ev.clientX - oC.offsetLeft, ev.clientY - oC.offsetTop);

            oGC.stroke();

        }

        document.onmouseup = function ()

        {

            document.onmousemove = null;

            document.onmouseup = null;

        }

    }

}

</script>

</head>

<body>

    <canvas id="c1" width="400" height="300">

        <span>请升级您的浏览器</span>

    </canvas>

</body>

</html>

html5 canvas 鼠标绘制的更多相关文章

  1. HTML5 Canvas鼠标与键盘事件

    演示HTML5 Canvas鼠标事件,获取Canvas对象上的鼠标坐标,演示键盘事件 通过键盘控制Canvas上对象移动. Canvas对象支持所有的JavaScript的鼠标事件,包括鼠标点击(Mo ...

  2. HTML5 canvas标签绘制正三角形 鼠标按下点为中间点，鼠标抬起点为其中一个顶点

    用html5的canvas标签绘制圆.矩形比较容易,绘制三角形,坐标确定相当于前面两种难点,这里绘制的是正三角形,比较容易,我们只需要把鼠标刚按下去的点设置为三角形的中心点,鼠标抬起的点设置为三角形右 ...

  3. [js高手之路] html5 canvas教程 - 绘制七巧板

    七巧板长什么样? 用canvas把他画出来,其实就是把这7个区域的图形,每个点的坐标找出来,再用moveTo, lineTo连线,设置不同的颜色即可. <head> <meta ch ...

  4. [HTML5 Canvas学习]绘制矩形

    1.使用strokeRect和fillRect方法绘制矩形 a.strokeRect是绘制一个不填充的矩形 b.fillRect是绘制一个填充的矩形 代码: <script> var ca ...

  5. HTML5 canvas图像绘制方法与像素操作属性和方法

    图像绘制方法 drawImage()        向画布上绘制图像.画布或视频 像素操作属性和方法 width                                返回 ImageData ...

  6. HTML5 Canvas中绘制椭圆的几种方法

    1.canvas自带的绘制椭圆的方法 ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise)是后来 ...

  7. html5 canvas路径绘制2

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. HTML5 Canvas ( 图片绘制 转化为base64 ) drawImage,toDataURL

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

  9. HTML5 程序设计 - 使用HTML5 Canvas API

    请你跟着本篇示例代码实现每个示例,30分钟后,你会高喊:“HTML5 Canvas?!在哥面前,那都不是事儿!” 呵呵.不要被滚动条吓到,很多都是代码和图片.我没有分开写,不过上面给大家提供了目录,方 ...

随机推荐

  1. php面试题整理

    PHP经典面试题:(不断跟进补充中...) 1.用PHP打印出前一天的时间格式是2009-02-10 22:21:21(2分) echo date('Y-m-d H:i:s', strtotime(' ...

  2. 《OD学hadoop》第一周0626

    一.磁盘管理 Linux添加新硬盘.分区.格式化.自动挂载 http://lxsym.blog.51cto.com/1364623/321643 给Linux系统新增加一块硬盘 http://www. ...

  3. MVC 中使用扩展方法

     扩展方法(Extension Method)是给那些不是你拥有.因而不能直接修改的类添加方法的一种方便的办法. 一.使用扩展方法 1.定义一个购物车的类-ShoppingCart using Sys ...

  4. blocked because of many connection errors; unblock with 'mysqladmin flush-hosts;MySQL在远程访问时非常慢的解决方法;MySql链接慢的解决方法

     一:服务器异常:Host 'xx.xxx.xx.xxx' is blocked because of many connection errors; unblock with 'mysqladmin ...

  5. HDU 1496 Train Problem I 火车问题1（桟，水）

    题意: 给出两个串,串中的数字i 代表编号为i的火车进入车站的顺序,车站如桟一样,先进后出.第二个串是火车出站的顺序,问若按照第一个串那样进站,是否有可能如第二个串一样的出站顺序?火车顶多9辆,即1- ...

  6. linux vim 配置文件(高亮+自动缩进+行号+折叠+优化)

    点评:将一下代码copy到 用户目录下 新建文件为 .vimrc保存即可生效 如果想所有用户生效 请修改 /etc/vimrc (建议先cp一份)"===================== ...

  7. PDO防注入原理分析以及使用PDO的注意事项 (转)

    我们都知道,只要合理正确使用PDO,可以基本上防止SQL注入的产生,本文主要回答以下两个问题: 为什么要使用PDO而不是mysql_connect? 为何PDO能防注入? 使用PDO防注入的时候应该特 ...

  8. （六）6.12 Neurons Networks from self-taught learning to deep network

    self-taught learning 在特征提取方面完全是用的无监督的方法,对于有标记的数据,可以结合有监督学习来对上述方法得到的参数进行微调,从而得到一个更加准确的参数a. 在self-taug ...

  9. mysql 错误代码汇总

    1005:创建表失败1006:创建数据库失败1007:数据库已存在,创建数据库失败1008:数据库不存在,删除数据库失败1009:不能删除数据库文件导致删除数据库失败1010:不能删除数据目录导致删除 ...

  10. JSP的九个隐式（内置）对象

    1.out 转译后对应JspWriter对象,其内部关联一个PrintWriter对象.是向客户端输出内容常用的对象. 2.request 转译后对应HttpServletRequest对象.客户端的 ...