<!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. HAAR小波

    HAAR小波分解信号或图像的“平滑”部分和“变化”部分(也许所有小波都这样?). 比如信号[1 2 3 4 5 6 7 8] 分解后(不考虑系数): [1.5 3.5 5.5 7.5]         ...

  2. ubuntu安装最新的mercurial

    Mercurial 是一种轻量级分布式版本控制系统,采用 Python 语言实现,易于学习和使用,扩展性强 之前安装的mercurial版本(2.8.2)太老了,想安装最新版本的. 网上搜到方法 su ...

  3. 数据库SQL语言学习--上机练习4（视图）

    上机练习4 一．实验目的 . 熟悉和掌握对数据表中视图的查询操作和 SQL 命令的使用: . 熟悉和掌握对数据表中视图的更新操作和 SQL 命令的使用,并注意视图更新与基本表更新的区别与联系: . 学 ...

  4. 基于JavaScript 声明全局变量的三种方式详解

    原文地址:http://www.jb51.net/article/36548.htm JS中声明全局变量主要分为显式声明或者隐式声明下面分别介绍. 声明方式一: 使用var(关键字)+变量名(标识符) ...

  5. android scrollview listview显示不全

    原来处理方法是重写ListView import android.content.Context; import android.util.AttributeSet; import android.v ...

  6. Webpack打包方式及各场景下模块化语法总结

    1.nodejs的方式:commonjs  var xx =require()   modules.exports=xxxx 注意:这种方式引入模块,路径会遵循node的规则,和js的src路径规则不 ...

  7. Mongodb集群搭建之 Sharding+ Replica Sets集群架构（2）

    参考http://blog.51cto.com/kaliarch/2047358 一.概述 1.1 背景 为解决mongodb在replica set每个从节点上面的数据库均是对数据库的全量拷贝,从节 ...

  8. css样式，高斯模糊

    .blur-container.blur-3 { --bg: url("background.jpg"); background-image: var(--bg); } .blur ...

  9. JDBC连接数据库，结合DbUtil数据库连接工具类的使用

    (以Mysql数据库为例) 第一步:在项目里配置数据库驱动 Build Path->configure  Build Path ->Add Exteral JARs   将JDBC驱动包导 ...

  10. Javascript-关于null、undefined、空字符串的区分

    一.分别判断 var a=null; //var a=undefined; //var a=''; //var a='DD'; if(!a&&typeof a == 'object') ...