先看图片

　　

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. Lingo 做线性规划 - Asset allocation and Portfolio models

    Reference: <An Introduction to Management Science Quantitative Approaches to Decision Making, Rev ...

  2. PHP将XML转成数组

    如果你使用 curl 获取的 xml data$xml = simplexml_load_string($data);$data['tk'] = json_decode(json_encode($xm ...

  3. paip.提升性能---协程“微线程”的使用.

    paip.提升性能---协程的使用. 近乎无限并发的"微线程" 作者Attilax  艾龙,  EMAIL:1466519819@qq.com 来源:attilax的专栏 地址:h ...

  4. Correct use of System.Web.HttpResponse.Redirect

    from:https://blogs.msdn.microsoft.com/tmarq/2009/06/25/correct-use-of-system-web-httpresponse-redire ...

  5. 为什么Android的图片质量会比iPhone的差？

           经常看到有人问:“安卓版微信发出去的图片怎么那么渣!比iPhone的差远了!”.不只是微信,很多应用安卓版的图片质量就是要比iPhone版逊色很多,这到底是怎么回事? 我们团队最初也纠结 ...

  6. 学习Swift，一定不能错过的10大开源项目！

    如果你是位iOS开发者,或者你正想进入该行业,那么Swift为你提供了一个绝佳的机会.Swift的设计非常优雅,较Obj-C更易于学习,当然也非常强大. 为了指导开发者使用Swift进行开发,苹果发布 ...

  7. InteliJ IDEA15 安装jrebel破解文件

    使用InteliJ IDEA这个工具感觉比eclipse好用,例如它在没有源码的情况下自动反编译源码等,但是在使用的时,有个很不爽的地方就是不能实时编译,导致java代码更改了一点代码就需要重启项目, ...

  8. Oracle User Calls 和 Executions 两个概念的区别

    User calls = (User session Login + Parsing within a session + Executions of sql's/Cursors ) per seco ...

  9. nodejs+express+jade安装备忘

    安装步骤 1.安装nodejs,比如安装在E:\nodejs. 确保有两个环境变量 用户环境变量:C:\Users\Administrator\AppData\Roaming\npm 系统环境变量:e ...

  10. mac os x用macport安装redis

    一.Redis简要介绍 Redis是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value数据库,并提供多种语言的API.从2010年3月15日起,Redis的 ...