<!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. Linq 学习笔记

    简介: LINQ 提供一种统一的方式,让我们能在C#语言中直接查询和操作各种数据.​​ LINQ是用来描述数据访问总体方式的术语.LINQ to Object是针对实现了IEnumerable< ...

  2. sdut2169Sequence(dp)

    http://acm.sdut.edu.cn/sdutoj/problem.php?action=showproblem&problemid=2169 感觉是有递归思想的 dp[j]表示从1到 ...

  3. 使用.9.png报错 Exception raised during rendering

    Exception raised during rendering: Index: 2, Size: 2Exception details are logged in Window > Show ...

  4. 基础组件_Window（窗口）

    窗口控件是一个浮动和可拖拽的面板可以用作应用程序窗口.默认情况下,窗口可以移动,调整大小和关闭.它的内容也可以被定义为静态html或要么通过ajax动态加载. 1. 通过标签创建窗口

  5. Machine Learning for hackers读书笔记(十二)模型比较

    library('ggplot2')df <- read.csv('G:\\dataguru\\ML_for_Hackers\\ML_for_Hackers-master\\12-Model_C ...

  6. 涵盖网站基本使用的正则表达式的验证方法.cs

    using System; using System.Text.RegularExpressions; using System.Text; using System.IO; using System ...

  7. 【同行说技术】iOS程序员从小白到大神必读资料汇总

    在文章<iOS程序员从小白到大神必读资料汇总(一)>里面介绍了很多iOS入门学习的资料,今天小编就发几篇技术进阶的文章,快来看看吧! 一.iOS后台模式开发指南 这个教程会教你在什么时候怎 ...

  8. python-socket.error[10054]:对象的复制

    1.socket.error[10054],对方强制关闭了连接 在用socket.recvfrom时,若事先没有bind时, 先使用socket.sendto,socket.recvfrom 有时会出 ...

  9. 删除特定影响因素(字段列)下的重复记录（MySQL）

    ;CREATE TABLE TabTest ( `id` ) NOT NULL AUTO_INCREMENT ,`factorA` ) NOT NULL DEFAULT ' ' ,`factorB` ...

  10. arcgis9.3 执行python文件

    1) 打开Python GUI 2) 选择菜单“File->Open”,打开你要执行的*.py文件 3) 选择菜单“Run->Run Module”,运行python文件 4)运行结果