1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>无标题文档</title>
  6. <style>
  7. body{
  8.     background:pink;
  9.     }
  10. #c1{
  11.     background:white;
  12.     }    
  13.  
  14. </style>
  15.  
  16. <script>
  17. window.onload = function ()
  18. {
  19.     var oC = document.getElementById('c1');
  20.  
  21.     var oGC = oC.getContext('2d');
  22.  
  23.     oC.onmousedown = function (ev)
  24.     {
  25.         var ev = ev || event;
  26.         oGC.moveTo(ev.clientX - oC.offsetLeft, ev.clientY - oC.offsetTop);
  27.  
  28.         document.onmousemove = function (ev)
  29.         {
  30.             var ev = ev || event;
  31.             oGC.lineTo(ev.clientX - oC.offsetLeft, ev.clientY - oC.offsetTop);
  32.             oGC.stroke();
  33.         }
  34.         document.onmouseup = function ()
  35.         {
  36.             document.onmousemove = null;
  37.             document.onmouseup = null;
  38.         }
  39.     }
  40. }
  41. </script>
  42. </head>
  43.  
  44. <body>
  45.     <canvas id="c1" width="400" height="300">
  46.         <span>请升级您的浏览器</span>
  47.     </canvas>
  48. </body>
  49. </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. HDU 4609 3-idiots（FFT）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4609 题意:给出n个正整数(数组A).每次随机选出三个数.问这三个数能组成三角形的概率为多大? 思路: ...

  2. C#随机颜色和随机字母

    //随机获取颜色 public System.Drawing.Color GetRandomColor() { Random RandomNum_First = new Random(Guid.New ...

  3. Core Text

    Core Text 本文所涉及的代码你可以在这里下载到 https://github.com/kejinlu/CTTest,包含两个项目,一个Mac的NSTextView的测试项目,一个iOS的Cor ...

  4. Oracle安装错误ora-00922(zhuan)

    Oracle安装错误ora-00922(缺少或无效选项) (2012-03-19 10:49:27) 转载▼ 标签: 杂谈   安装Oracle 11g R2的过程中,在新建数据库实例时出现了该错误, ...

  5. UVALive 5713 Qin Shi Huang's National Road System秦始皇修路（MST，最小瓶颈路）

    题意: 秦始皇要在n个城市之间修路,而徐福声可以用法术位秦始皇免费修1条路,每个城市还有人口数,现要求徐福声所修之路的两城市的人口数之和A尽量大,而使n个城市互通需要修的路长B尽量短,从而使得A/B最 ...

  6. LSTM网络（Long Short-Term Memory ）

    本文基于前两篇 1. 多层感知机及其BP算法(Multi-Layer Perceptron) 与 2. 递归神经网络(Recurrent Neural Networks,RNN) RNN 有一个致命的 ...

  7. android动画学习

    android动画学习   转载自:http://www.open-open.com/lib/view/open1329994048671.html 3.0以前,android支持两种动画模式,twe ...

  8. Oracle RAC 服务器端连接负载均衡(Load Balance)

    Oracle RAC服务器端的负载均衡是根据RAC中各节点的连接负荷数情况,将新的连接请求分配到负荷最小的节点上去.当数据库处于运行时,RAC中各节点的PMON进程每3秒会将各自节点的连接负荷数更新到 ...

  9. vs2012 Silverlight项目签名报错异常的处理方式

    项目刚生成为vs2012,原先的Silverlight项目,点击签名,竟然有问题,给上个截图 悲剧了,没有签名证书,就无法实现自动更新,想着vs2012可能几个更新没有安装吧,但是自己手动下载竟然一两 ...

  10. K2 K2Blackpearl安装步骤详解（服务端）

    转:http://www.cnblogs.com/dannyli/archive/2011/11/30/2269485.html 以下是K2 Blackpearl的安装步骤,本人亲测可用哦. 1.安装 ...