<!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. 在IDEA中将SpringBoot项目打包成jar包的方法

    SpringBoot项目无需依赖tomcat容器(内含)就可以发布,现在将打包步骤记录一下: 1. 打包前确认项目可以正常运行,打开Project Structure 快捷键 Ctrl+Shift+A ...

  2. Tomacat 配置

    server.xml文件中元素: 1.<Service name="Catalina"> 这个元素相当于IIS的一个网站.该元素可有多个.每个元素会根据名字在conf文 ...

  3. Android Studio 增加函数注释模板

    此篇文章主要介绍如何在Android Studio中函数如何添加注释,使其和eclipse一样方便的添加注释 Android Studio默认函数注释为 /** * */ 下面方法将要改为如下格式 / ...

  4. C#创建自定义Object对象

    , B=,J=}; 记录一下,老写成  var obj = new object() { O=0, B=0,J=0};

  5. 廖雪峰Java-3流程控制-7for循环

    for循环 for循环使用计数器实现循环 for循环条件需要设置:计数器初始值:循环前检测条件:每次循环后如何更新计数器 计数器变量通常命名为i int[] ns = {1,4,9,16,25}; f ...

  6. android-menudrawer 和SlidingMenu 用法

    项目地址: https://github.com/gokhanakkurt/android-menudrawer    https://github.com/jfeinstein10/SlidingM ...

  7. 协议无关组播－密集模式 PIM-DM

    一.组播路由协议 (一) 路由器依靠转发项来转发组播数据包.转发项的生成则是组播路由协议所要完成的任务.组播路由协议有距离矢量组播路由协议(DVMRP).协议无关组播-密集模式(PIM-DM).协议无 ...

  8. [UE4]让子弹飞：抛射物子弹、瞬时子弹

    两种子弹: 1.瞬时子弹.(使用射线) 没有飞行时间,即打即中. 2.飞行的子弹. a.使用ProjectMovement(抛射物)组件 创建一个继承自“Actor”的蓝图“BP_LauncherBu ...

  9. bootstraptable学习(2)分页

    1.分页需要配置一些参数 function init() { $('#bootstrapModel').bootstrapTable({ url: "../Listing.ashx" ...

  10. github .net core

    https://github.com/dotnet/core/blob/master/Documentation/core-repos.md