<!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. Statement和PreparedStatement批量更新

    优势:1.节省传递时间. 2.并发处理. PreparedStatement: 1) addBatch()将一组参数添加到PreparedStatement对象内部. 2) executeBatch( ...

  2. 【leetcode❤python】171. Excel Sheet Column Number

    #-*- coding: UTF-8 -*- # ord(c) -> integer##Return the integer ordinal of a one-character string. ...

  3. Windows下通过bat脚本实现自动上传文件到ftp服务器

    @Echo Off Echo open ip_address [port] >ftp.up Echo [username]>>ftp.up Echo [password]>&g ...

  4. DataTable或者DataRow转换对象

    public static IEnumerable<T> ConvertObject<T>(DataTable dt) where T : new() { var v = ty ...

  5. TeeChart中 Line的Clear方法

    需要注意的是,如果设置了Line.Smoothed=true; 那么调用Clear是无效的,虽然清除了曲线上的点. 但是界面上的曲线,并没有消失. 所以,在每一次Line.Clear();之前,必须确 ...

  6. CG绘画笔记

    看一些比较好的作品:看作品哪些部分,部件,盔甲比较吸引人,提取一个比较好的点,进行组合创作. 逆光.切光布局构图 创作:故事.情感.经历.朋友.时代 灵感: 电影.音乐 变化(色彩)透视 空气透视视觉 ...

  7. [Effective Java]第二章 创建和销毁对象

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  8. CUBRID学习笔记 11 数据类型之日期

    datetime 虽然和mysql很相像,但是日期类型和mysql是不一样的.和sqlserver差不多. 如YYYY-MM-DD hh:mi:ss.fff or mm/dd/yyyy hh:mi:s ...

  9. Java——Image 图片切割

    package com.tb.image; import java.awt.Rectangle; import java.awt.image.BufferedImage; import java.io ...

  10. STL--list

    List-概述: 列表List是一个线性链表结构(Double—Linked Lists,双链表),它的数据由若干个节点构成,每一个节点都包括一个信息块Info(即实际存储的数据).一个前驱指针Pre ...