<!doctype html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>canvas绘图小实例之鼠标画线</title>
 <style>
 body{ background:#000;}
 #canvas1{ margin:100px 500px; background:#fff;}
 #canvas1 span{ color:#fff;}
 </style>
 <script>
 window.onload = function(){
     var oCanvas = document.getElementById('canvas1');
     var oContext = oCanvas.getContext('2d');    //获取绘图的2d环境

     oCanvas.onmousedown = function(ev){
         ev = ev || window.event;
         oContext.beginPath();
         oContext.moveTo(ev.clientX - oCanvas.offsetLeft,ev.clientY - oCanvas.offsetTop);

         document.onmousemove = function(ev){
             ev = ev || window.event;
             oContext.lineTo(ev.clientX - oCanvas.offsetLeft,ev.clientY - oCanvas.offsetTop);
             oContext.stroke();
         }
         document.onmouseup = function(ev){
             document.onmousemove = null;
             document.onmouseup = null;
         }
     }
 }
 </script>
 </head>

 <body>
 <canvas id="canvas1" width="1000" height="1000">
     <span>该浏览器不支持canvas</span>
 </canvas>
 </body>
 </html>

HTML5自学笔记[ 12 ]canvas绘图小示例之鼠标画线的更多相关文章

  1. HTML5自学笔记[ 13 ]canvas绘图小实例之方块移动

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  2. HTML5自学笔记[ 15 ]canvas绘图实例之钟表

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  3. HTML5自学笔记[ 11 ]canvas绘图基础1

    html5新增<canvas>标签用于绘制图像,默认宽高是300*150,canvas的宽高需要在这里设置,在css中设置会有问题:设置的形状,如矩形,会等比缩放,而非设置的宽高. 在不支 ...

  4. HTML5自学笔记[ 24 ]canvas绘图之星空草地

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  5. HTML5自学笔记[ 21 ]canvas绘图实例之马赛克

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  6. HTML5自学笔记[ 20 ]canvas绘图实例之绘制倒影

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  7. HTML5自学笔记[ 19 ]canvas绘图实例之炫彩时钟

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  8. HTML5自学笔记[ 17 ]canvas绘图基础4

    绘制图像: drawImage(oImg,x,y),oImg是一个Image对象,(x,y)为绘制起点,绘制的图像大小和源图大小一样. drawImage(oImg,x,y,w,h),后两个参数设置绘 ...

  9. HTML5自学笔记[ 16 ]canvas绘图基础3

    canvas还提供提供了一些动态方法,使图像可以旋转.缩放和移动,与css3中的方法一样. 移动:translate(x,y),x和y为横竖方向的偏移量 旋转:rotate(弧度),弧度=角度*Mat ...

随机推荐

  1. RTP学习笔记

    一.定义 实时传输协议(Real- time Transport Protocol,RTP)是在Internet上处理多媒体数据流的一种网络协议,利用它能够在一对一(unicast,单播)或者一对多  ...

  2. change the walltime for currently running PBS job (qalter pbs)

    qalter jobid -l walltime=X e.g.qalter 377470.manager -l walltime=2222:00:00qalter: Unauthorized Requ ...

  3. 大神写的一个纯CSS圆角框，膜拜！（支持IE9一下的低版本）

    留着提醒自己,底层才是最重要的,不要一直傻瓜的编程下去! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...

  4. [CF738B]Spotlights（前缀和，模拟）

    题目链接:http://codeforces.com/contest/738/problem/B 题意:问多少个0的方向,使得方向上至少有一个1. 四个方向统计一遍前缀和,向上向左正着记,向下向右倒着 ...

  5. sencha touch建立新项目

    首先你得有一个sencha touch的环境,如下图: 图1 touch的sdk环境 有了这个之后,通过在cmd中执行下列命令: sencha -sdk /path/to/framework gene ...

  6. nancy的诊断2

    接上文. 一 再看看第二个面板内容 点击带文号 的  Interactive Diagnostics 这个面板 如下 上面的是诊断程序,默认是系统提供的测试用的诊断程序.  你可以 通过实现IDiag ...

  7. 微博传播数量和传播深度的预测--基于pyspark和某个回归算法

    8-28决定参加一下这个千万条的数据处理任务,因为场景和自己做过的一个回归分析预测差不多,第一天开始在小规模的数据上做准备工作. 第二次大修改版本 date 20160829 星期一¶ 原始数据处理, ...

  8. jQuery：show()方法

    show()方法是jQuery的方法,功能是显示元素,参数是时间,单位是毫秒,例如: Html: <div class="one" id="one"> ...

  9. STL--stack

    stack--概述: 栈(Stack)是一种特殊的线性表,只能在某一端插入和删除的特殊线性表.它按照后进先出的原则存储数据,先进入的数据被压入栈底,最后的数据在栈顶.栈也称为先进后出表(LIFO). ...

  10. 转 C编译: 使用gdb调试

    C编译: 使用gdb调试   作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! gdb是the GNU Debugger的简称.它是 ...