<!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. Boost--lexical_cast 一个方便安全高效的string转换库

    #include "boost\lexical_cast.hpp" #include <vector> #include <iostream> #inclu ...

  2. spring boot (入门简介 demo)

    Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发人员不再需要定义样板化的配置.通过 ...

  3. Kong网关介绍与安装小记

    本文主要为kong安装小记,系统环境为centos 6.7                                本文转载请注明出处 —— xiaoEight 介绍 Kong 是在客户端和(微 ...

  4. opengl 无法定位程序输入点_glutInitWithExit于动态链接库glut32.dll上

    1.问题:opengl 无法定位程序输入点_glutInitWithExit于动态链接库glut32.dll上 2.环境:vc6.0  win7,64位,opengl. 3.解决:将glut32.dl ...

  5. 廖雪峰Java5集合-2List-2编写equals方法

    List是一种有序链表: List内部按照放入元素的先后顺序存放 每个元素都可以通过索引确定自己的位置 boolean contains(Object o) 是否包含某个元素 int indexOf( ...

  6. 关于display:inline-block的文章

    在淘宝UED博客里看到一篇关于display:inline-block的文章,有点啰嗦,反正我没看完,但是里面有些观点还是写得挺好的,直接贴地址mark一下.   文章地址:http://ued.ta ...

  7. Jmeter（十八）Logic Controllers 之 Random Controller and Random order Controller

    Random Controller就比较简单了,完全随机!毫无章法. 毫无任何规律的运行. 还有一个Random order Controller,随机顺序控制器就像一个简单的控制器,它将最多执行一次 ...

  8. [UE4]最简单的虚幻4网络游戏，使用虚幻4内置服务器

    一.设置游戏窗口合适的大小 二.在新窗口中运行游戏.玩家数量改成大于1.   三.运行游戏就会打开多个窗口 在打包完成的游戏中进行网络游戏: 一.虚幻4打包好的文件是放在WindowsNoEditor ...

  9. win10 php7.2 nginx 安装 imagick，适用于phpstudy

    imagick 拓展的下载地址 https://windows.php.net/downloads/pecl/releases/imagick/ 可惜的是这个地址最新版没有php7.2, 如果是7.1 ...

  10. （转）打印相关_C#（PrintDocument、PrintDialog、PageSetupDialog、PrintPreviewDialog）

    原文地址:http://www.cnblogs.com/smallsoftfox/archive/2012/06/25/2562718.html 参考文章:http://www.cnblogs.com ...