<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Canvas</title>

    <script src="jQuery.js"></script>

</head>

<style type="text/css">

    body{

        padding: 0;

        margin: 0;

        background: black;

    }

    #canvas{

        background: white;

        margin: 100px 0 0 300px;

    }

    #canvas > span{

        color: white;

        font-size: 14px;

    }

</style>

<body>

    <canvas id="canvas" width="600" height="500">

        <span>您的浏览器不支持</span>

    </canvas>

</body>

</html>

<script type="text/javascript">

    /*获取绘制环境*/

    var oc = $('#canvas')[0];

    canvas = oc.getContext('2d');

    $('#canvas').on('mousedown', function(){

        /*开始绘制*/

        canvas.beginPath();

        /*设置动画绘制起点坐标*/

        canvas.moveTo(event.pageX - 300 , event.pageY - 100);

        $('#canvas').on('mousemove', function(){

            /*设置下一个点坐标*/

            canvas.lineTo(event.pageX - 300 , event.pageY - 100);

            /*画线*/

            canvas.stroke();

        });

    }).on('mouseup', function(){

        $('#canvas').off('mousemove');

    });

</script>

HTML5 Canvas 小例子 简易画板的更多相关文章

  1. HTML5 Canvas 小例子 伸缩旋转方块

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. HTML5 Canvas 小例子 旋转的时钟

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. HTML5 Canvas 小例子 旋转的图片

    <一>CSS部分 @charset "utf-8"; *{ padding:; margin:; outline: none; } #canvas{ position: ...

  4. 如何开发一个简单的HTML5 Canvas 小游戏

    原文:How to make a simple HTML5 Canvas game 想要快速上手HTML5 Canvas小游戏开发?下面通过一个例子来进行手把手教学.(如果你怀疑我的资历, A Wiz ...

  5. HTML5 Canvas小游戏基础：用户交互

    交互是游戏的根本.缺少了用户交互,游戏就不能称之为游戏,只能说是动画或电影.事件是浏览器响应用户交互操作的一种机制. 1．事件和事件执行 事件定义了用户与页面交互时产生的各种操作(主要通过鼠标或热键的 ...

  6. qt 5 小练习 简易画板

    如何在窗口上画线?用一根根线来拼凑图案呢? 想必大家都知道点的集合是线,而线的集合就是很多线啦,用线的集合我们能拼凑出许许多多的图案.于是我就要记录自己跟着老师的学习之路啦: 既然有集合的话,势必要用 ...

  7. javascript平时小例子⑥(简易计算器的制作)

    <!doctype html><html><head><meta charset="utf-8"><title>无标题文 ...

  8. WPF Canvas小例子

    源码下载:DraggingElementsInCanvas_demo.rar

  9. 教学小例子:简易的webSevrer

    HttpListener 流利简单的API static void Main() { using (var server = new SimpleWebServer("http://loca ...

随机推荐

  1. MSSQL 2012 密钥

    MICROSOFT SQL SERVER 2012 企业核心版激活码序列号: FH666-Y346V-7XFQ3-V69JM-RHW28 MICROSOFT SQL SERVER 2012 商业智能版 ...

  2. C# 基于大整数类的RSA算法实现（公钥加密私钥解密，私钥加密公钥解密）

    但是C#自带的RSA算法类RSACryptoServiceProvider只支持公钥加密私钥解密,即数字证书的使用. 所以参考了一些网上的资料写了一个RSA的算法实现.算法实现是基于网上提供的一个大整 ...

  3. Scala函数式对象-有理数

    有理数类的表示 实现规范:支持有理数的加减乘除,并支持有理数的规范表示 1.定义Rational 首先,考虑用户如何使用这个类,我们已经决定使用“Immutable”方式来使用Rational对象,我 ...

  4. 学习笔记之Bokeh Data Visualization | DataCamp

    Bokeh Data Visualization | DataCamp https://www.datacamp.com/courses/interactive-data-visualization- ...

  5. postgresql小纪

    本来是想在PaaS环境中定位PG数据库的问题,却发现给每个PG实例,就是每个库,分配的密码是加密的,还不能直接查看密码. 登录PG数据库对应的容器,发现使用默认的用户postgres没有密码也可以正常 ...

  6. WAL基础

    WAL(Write-ahead logging,预写式日志)是数据库系统提供原子性和持久化的一系列技术. 在使用WAL的系统中,所有的修改都先被写入到日志中,然后再被应用到系统状态中.通常包含redo ...

  7. go中的map[Interface{}]Interface{}理解

    map里面的k,v支持很多的类型.对于go来说也是,go中有个接口的概念,任何对象都实现了一个空接口.那么我们把map里面的k,v都用interface去定义,当我们在使用这个map的时候,我们可以把 ...

  8. Keepalived+Nginx+tomcat实现系统的高可用

    Keepalived+Nginx+tomcat实现系统的高可用 1:安装vmware虚拟机 2:安装linux系统,我自己下载的centos6.5 3:安装JDK,tomcat 解压tomcat到/u ...

  9. curl 与wget的区别

    CURL与wget的区别 当想要直接通过linux 命令行下载文件,马上就能想到两个工具:wget 和 CURL.它们有很多一样的特征,可以很轻易的完成一些相同的任务,虽然它们有一些相似的特征,但它们 ...

  10. 第9章 应用层（3）_telnet协议和远程桌面协议RDP

    3.1 telnet简介 (1)telnet是一个简单的远程终端协议,也是因特网的正式标准.用户使用telnet连接到远程运行telnet服务的设备(可以是网络设备.比如路由器.交换机,也可以是操作系 ...