<!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. SSL/TLS 原理详解

    本文大部分整理自网络,相关文章请见文后参考. SSL/TLS作为一种互联网安全加密技术,原理较为复杂,枯燥而无味,我也是试图理解之后重新整理,尽量做到层次清晰.正文开始. 1. SSL/TLS概览 1 ...

  2. 【leetcode❤python】Move Zeroes

    #-*- coding: UTF-8 -*- #filter()函数可以对序列做过滤处理,就是说可以使用一个自定的函数过滤一个序列,#把序列的每一项传到自定义的过滤函数里处理,并返回结果做过滤.最终一 ...

  3. 【转载】C++知识库内容精选 尽览所有核心技术点

    原文:C++知识库内容精选 尽览所有核心技术点 C++知识库全新发布. 该知识库由C++领域专家.CSDN知名博客专家.资深程序员和项目经理安晓辉(@foruok)绘制C++知识图谱,@wangshu ...

  4. Quartz实用二三事

    注意:本文项目使用的Quartz版本为2.2.1 一.关于Trigger Trigger tg = newTrigger().withIdentity("tg3", "g ...

  5. vsftpd配置参数详细整理

    vsftpd配置参数详细整理  -|白王斧三又干一 vsftpd配置参数详细整理     -|白王斧三又干一 发表于 2005-10-23 20:30:00   1.vsftpd配置参数详细整理#接受 ...

  6. Protractor AngularJS测试框架教程

    Protractor是一个建立在WebDriverJS基础上的端到端(E2E)的AngularJS JavaScript Web应用程序测试框架.Protractor全自动化真实的模拟用户在真正的浏览 ...

  7. Perl5中19个最重要的文件系统工具

    在写脚本处理文件系统时,经常需要加载很多模块.其中好多有用函数分散在各种不同的模块中.它们有些是Perl的内置函数,有些是在同Perl一起发行的标准模块中,另外一些是通过CPAN安装的. 下面来看15 ...

  8. JAVA中对Cookie的操作

    (1)往 Cookie 中存值: <%@page import="javax.xml.ws.Response"%> <%@ page language=" ...

  9. iOS - NSURLSession 网络请求

    前言 NS_CLASS_AVAILABLE(NSURLSESSION_AVAILABLE, 7_0) @interface NSURLSession : NSObject @available(iOS ...

  10. 老笔记本_Win7_U盘_ReadyBoost

    老笔记本 Win7 U盘 ReadyBoost 值得尝试