先看图片

　　

HTML

　　

<!doctype html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>Document</title>

        <script src="../src/lib/require.js"></script>

        <style>

            input{

                width: 50px;

                border: none;

                text-align: center;

            }

            input[type=range]{

                width: 200px;

            }

            label{

                margin-left: 10px;

            }

            input,label{

                vertical-align: middle;

            }

            canvas{

                cursor: default;

            }

        </style>

    </head>

    <body>

        <div class="m10">

            <canvas id="canvas"></canvas>

            <p><input type="range" name="" id="num" min=0 max=10 value=2><label for="num">线条大小</label><input type="color" name="" id="color"><label for="color">线条颜色</label></p>

        </div>

        <script>

            requirejs(['../src/canvas'], function() {});

        </script>

    </body>

</html>

　　Javascript

　　

define([], function() {

    var getId = function(id) {

        return typeof id === 'string' ? document.getElementById(id) : id;

    };

    function getPosition(o) {

        if (!(o && o.nodeName)) {

            return {

                left: 0,

                top: 0

            };

        }

        var t = parseInt(o.offsetTop, 10),

            l = parseInt(o.offsetLeft, 10);

        while (o.offsetParent) {

            o = o.offsetParent;

            t += o.offsetTop;

            l += o.offsetLeft;

        }

        return {

            left: l,

            top: t

        };

    }

    var canvas = getId('canvas'),

        ct = canvas.getContext('2d'),

        w = canvas.width = 600,

        h = canvas.height = 400;

    var bgl = ct.createRadialGradient(400, 0, 0, 400, 0, 400);

    bgl.addColorStop(0, 'red');

    bgl.addColorStop(1, 'green');

    ct.beginPath();

    function draw(ev) {

        console.log(getPosition(canvas));

        var x = ev.clientX - getPosition(canvas).left;

        var y = ev.clientY - getPosition(canvas).top;

        ct.lineTo(x, y);

        ct.stroke();

        console.log(x + '--' + y);

    }

    canvas.onmousedown = function(ev) {

        var x = ev.clientX - getPosition(canvas).left;

        var y = ev.clientY - getPosition(canvas).top;

        var size = getId('num').value;

        var color = getId('color').value;

        ct.save();

        ct.strokeStyle = color;

        ct.lineWidth = size;

        ct.beginPath();

        canvas.onmousemove = draw;

    };

    document.onmouseup = function(ev) {

        canvas.onmousemove = null;

        ct.closePath();

        //ct.fill();

        ct.restore();

    };

});

　　

Canvas现实画板功能的更多相关文章

  1. canvas实现画板功能（渐变、动画、阴影...）

    刚刚在博客园落户了,希望能在这认识更多大神,希望能和大家交好朋友. 闲来无事,把以前用canvas写的画板代码改进了一番,用Html5提供的表单标签给其 加了一个选择颜色的功能,因此发现了该标签的一个 ...

  2. 【分享】用Canvas实现画板功能

    前言 PC端测试:QQ浏览器全屏绘画完成.缩小时内容会被清空,切换背景颜色内容会被重置,其他暂无发现: 手机端测试:微信内置浏览器不通过:Safari 浏览器使用画笔时没固定页面会有抖动效果,使用橡皮 ...

  3. canvas实现画板

    canvas实现画板 主要用到知识点: 鼠标事件onmousedown() onmousemove() onmouseup() onmouseleave() 事件委托 canvas的一些方法 如:绘制 ...

  4. 一款基于HTML5 Canvas的画板涂鸦动画

    今天给各网友分享一款基于HTML5 Canvas的画板涂鸦动画.记得之前我们分享过一款HTML5 Canvas画板工具,可以切换不同的笔刷,功能十分强大.本文今天要再来分享一款基于HTML5 Canv ...

  5. canvas小画板--（1）平滑曲线

    功能需求 项目需求:需要实现一个可以自由书写的小画板 简单实现 对于熟悉canvas的同学来说,这个需求很简单,短短几十行代码就能实现: <!doctype html> <html& ...

  6. canvas小画板——（2）荧光笔效果

    我们在上一篇文章中讲了如何绘制平滑曲线 canvas小画板——(1)平滑曲线. 透明度实现荧光笔 现在我们需要加另外一种画笔效果,带透明度的荧光笔.那可能会觉得绘制画笔的时候加上透明度就可以了.我们来 ...

  7. html5 canvas 实现倒计时 功能

    function showTime(a) { var b = { id: "showtime", //canvasid x: 60, //中心点坐标 X轴; y: 60, //中心 ...

  8. iOS实现白板、画板功能，有趣的涂鸦工具，已封装，简单快捷使用

    一.效果图: 二.选择颜色: 分[固定颜色模式]和[自由取模式].  三.操作栏功能: 1.撤销:撤销上一步操作,可一直往上进行,直到全部清空. 2.清空:直接清除所有绘画. 3.橡皮擦:去除不要的绘 ...

  9. canvas 实现简单的画板功能添加手机端效果 1.01

    在上次的基础上,加了一些代码,手机端可操作 访问网址:https://chandler712.github.io/Item/ <!-- 简单版画板 --> <!DOCTYPE htm ...

随机推荐

  1. 杂记 C中的volatile

    volatile 就象大家更熟悉的const一样,volatile是一个类型修饰符(type specifier).它是被设计用来修饰被不同线程访问和修改的变量.如果没有volatile,基本上会导致 ...

  2. [C#] Timer + Graphics To Get Simple Animation (简单的源码例子,适合初学者)

    >_<" 这是一个非常简单的利用C#的窗口工程创立的程序,用来做一个简单的动画,涉及Timer和Graphics,适合初学者,高手略过~

  3. oracle数据库中varchar2陷阱

    oracle数据库相信大家都比较熟悉,数据库中有一种非常常用的数据类型:字符串型. 对应该类型,在oracle中有三种比较常用的类型:varchar2(byte).varchar2(char).nva ...

  4. mysql where执行顺序

    where执行顺序是从左往右执行的,在数据量小的时候不用考虑,但数据量多的时候要考虑条件的先后顺序,此时应遵守一个原则:排除越多的条件放在第一个. 在用MySQL查询数据库的时候,连接了很多个过滤条件 ...

  5. Windows 服务器开通防火墙后,IISFTP和Serv U开通的FTP账号不能登录

    应广大服务器客户要求一至反应Windows 服务器开通防火墙后,IISFTP和Serv U开通的FTP账号不能登录,出现列表超时的情况,特提供以下解决方案: 1. IIS FTP用户解决方法: 在防火 ...

  6. atitit.提升备份文件复制速度(4) ---数据挖掘 获取回收站文件列表

    atitit.) ---数据挖掘 获取回收站文件列表 1. 放入回收站的原理and 1 2. info2文件文件结构 1 3. 获得文件列表2个法: 正则表达式or解析 1 4. 路径正则表达式[a- ...

  7. atitit.提升开发效率---MDA 软件开发方式的革命(4)----编辑表单建模

    )----编辑表单建模 1. 建模语言的选型anno+html...不是uml 1 2. 指定显示模板 @BeanEditForm(tmplt="c:/edit.html") 1 ...

  8. python先序、中序、后序排序

    #encoding=utf-8 class Tree(): def __init__(self,leftjd=0,rightjd=0,data=0): self.leftjd = leftjd sel ...

  9. 微信商城系统与手机APP的优势对比！

    随着移动互联网的大势到来,手机移动应用已经成为未来的主流市场,很多企业也在投入精力和财力进行研发自己的手机APP,以便更好的迎合市场的需求. 然而当微信公众平台开放以后,新的机会出现了! 很多企业已经 ...

  10. PuppetOpenstack Newton Design Summit见闻

    PS:技术博客已经好久没有来耕耘了,倒不是懒惰,而是最近一直在忙着写一本关于Openstack自动化部署的书籍,我觉得可能会比单独零散的技术文章更有价值一些. 作为重度拖延症患者,又把本来奥斯汀峰会期 ...