<!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. What a version number means

    http://stackoverflow.com/questions/3768261/best-practices-guidance-for-maintaining-assembly-version- ...

  2. MongoDB 学习笔记（五）索引

    http://www.cnblogs.com/stephen-liu74/archive/2012/08/01/2561557.html

  3. 谈谈map中的count方法

    map和set两种容器的底层结构都是红黑树,所以容器中不会出现相同的元素,因此count()的结果只能为0和1,可以以此来判断键值元素是否存在(当然也可以使用find()方法判断键值是否存在). 拿m ...

  4. pl/sql programming 06 异常处理

    如果 PLSQL发生了错误, 无论是系统错误还是应用错误, 都会抛出一个异常, 当前 PL/SQL 块中执行单元会暂停处理, 如果当前块有一个异常处理单元的话, 控制会转移到当前块的异常处理单元来处理 ...

  5. JSON 之 SuperObject(5): Format 与转义字符

    unit Unit1; interface uses   Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, For ...

  6. 基于HtmlUnit的模板的网页数据抽取

    既然方向定了,就开始做实验室吧,做舆情分析,首先就是要收集相关的语料 正好实验室有同学在做标化院的信息抽取抽取这块 于是把程序拿过来研究研究正好 完整程序在126邮箱共享: 可下载数:20  共享连接 ...

  7. 微软推出首个Microsoft Azure Stack技术预览版

    Mike Neil,微软公司企业云副总裁 怀着对于提高业务灵活性.加速创新的期待,很多企业正在向云平台迅速迁移.伴随着这样的趋势,我们也见证了微软智能云Azure业务在全球市场的快速增长--每个月近1 ...

  8. 07day1

    怒跪了.   砍树 排序 [问题描述] 小 A 在一条水平的马路上种了 n 棵树,过了几年树都长得很高大了,每棵树都可以看作是一条长度为 a[i]的竖线段.由于有的树过于高大,挡住了其他的树,使得另一 ...

  9. 【原创】牛顿法和拟牛顿法 -- BFGS, L-BFGS, OWL-QN

    数据.特征和数值优化算法是机器学习的核心,而牛顿法及其改良(拟牛顿法)是机器最常用的一类数字优化算法,今天就从牛顿法开始,介绍几个拟牛顿法算法.本博文只介绍算法的思想,具体的数学推导过程不做介绍. 1 ...

  10. Mysql事物与Metadata lock 问题

    环境说明:     MySQL 5.6.16     OS:Linux RedHat 6.2 64bit 1.问题描述 目前新上一个使用MySQL数据库项目,在数据库中,每隔5分钟做truncate某 ...