<!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. phinx 使用指南

    一 使用 第一步 安装 composer require robmorgan/phinx第二步 初始化php vendor/robmorgan/phinx/bin/phinx init创建目录db/m ...

  2. 胖子哥的大数据之路（11）-我看Intel&&Cloudera的合作

    一.引言 5月8日,作为受邀嘉宾,参加了Intel与Cloudera在北京中国大饭店新闻发布会,两家公司宣布战略合作,该消息成为继Intel宣布放弃大数据平台之后的另外一个热点新闻.对于Intel的放 ...

  3. VS项目平台的x86,x64,Any CPU以及Debug和Release

    引用链接:https://blog.csdn.net/zuguangboy/article/details/51509670

  4. P1072Hankson的趣味题

    传送 这个题一本通上有,但是为了增强我们的创新精神,思维能力balabala,书上的满分程序不全,要优化一下,在此写一下第二种方法 #include<iostream> #include& ...

  5. Java-Runoob-高级教程-实例-数组：12. Java 实例 – 数组差集

    ylbtech-Java-Runoob-高级教程-实例-数组:12. Java 实例 – 数组差集 1.返回顶部 1. Java 实例 - 数组差集  Java 实例 以下实例演示了如何使用 remo ...

  6. 利用 AWS Elastic Beanstalk 部署 Wordpress 环境

    1. 准备 wordpress 代码 从https://wordpress.org/download/ 将代码压缩包下载到本地, 解压,会有一个 wordpress 目录 复制 wp-config-s ...

  7. 廖雪峰Java6 IO编程-2input和output-5操作zip

    1.ZipInputStream是一种FilterInputStream 可以直接读取zip的内容 InputStream->FilterInputStream->InflateInput ...

  8. 廖雪峰Java6 IO编程-2input和output-4Filter模式

    1.JDK提供的InputStream分为两类: 直接提供数据的InputStream * FileInputStream:从文件读取 * ServletInputStream:从HTTP请求读取数据 ...

  9. JVM -verbose参数详解(转)

    原文 http://www.javaranger.com/archives/367 java -verbose[:class|gc|jni] 在输出设备上显示虚拟机运行信息. java -verbos ...

  10. centos7.4安装过程

    开启CPU虚拟化 按到install CentOS7 按下tab 输入net.ifnames=0 biosdevname=0 先来一段文档v1 ============================ ...