<!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. spring.net异常处理

    接下来我们看一下SpringNetAop层的内容:此层主要是实现一些AOP的代码,以及特性和一个统一调用spring.net的类:记录日志我们使用Log4Net来实现: 1:Aspects 文件夹里存 ...

  2. Tmall发送码asp验证sing(自有码开发)

    <%''查询通知应答类'============================================================================'api说明:'g ...

  3. Mybatis传递多个参数

    方法一: //DAO层的函数方法Public User selectUser(String name,String area); 对应的Mapper.xml <select id="s ...

  4. HDU 4998 (点的旋转) Rotate

    为了寻找等效旋转操作,我们任选两个点P0和Q0,分别绕这n个点旋转一定的角度后最终得到Pn和Qn 然后已知:P0和Pn共圆,Q0和Qn共圆.所以要找的等效旋转点就是这两个线段的垂直平分线交点O. 等效 ...

  5. (转)UILabel的详细使用

    UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 75, 40)];   //初始化UIlbel并设定frame lab ...

  6. hibernate3和spring整合的一些方式

    <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...

  7. PS常用

    一.文字和背景居中 1.按Ctrl+A或用矩形框选中所有 2.按选择工具->在工具属性栏里面会显示6种方向的对齐方式 二.画准确铺助线 1.视图->新建参考线->输入数值既可

  8. getHibernateTemplate() 一直报NullPointerException 错误

    原来是调用方法有误正确调用方法: ApplicationContext ctx = new ClassPathXmlApplicationContext("applicationContex ...

  9. Lists

    List类主要提供了对List类的子类构造以及操作的静态方法.在类中支持构造ArrayList.LinkedList以及newCopyOnWriteArrayList对象的方法.其中提供了以下构造Ar ...

  10. .net core 使用

    在本机上安装了 visual studio 2015后,还要安装 DotNetCore.1.0.1-VS2015Tools.Preview2.0.3.exe 才能编译 .net core 的代码.不然 ...