先看图片

　　

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. asp.net 生成 excel导出保存时， 解决迅雷下载aspx页面问题

    网络上搜索,一大堆废话,以下为简单的导出生成Excel代码: string excelFile = Server.MapPath("~/SB/UpFile/20151104111008/Bo ...

  2. JsRender for object 语法说明

    JsRender 作为一款JavaScript模版引擎,必不可少的会有循环功能,也就是for,但由于JsRender过于灵活,for竟然可以接受object作为循环对象. {{for Array}}和 ...

  3. atitit. 集合groupby 的实现(2)---自定义linq查询--java .net php

    atitit.  集合groupby 的实现(2)---自定义linq查询--java .net php 实现方式有如下 1. Linq的实现原理流程(ati总结) 1 2. groupby  与 事 ...

  4. JSTL核心标签库使用

    JSTL是什么? java standard taglib(java标准标签库). 标签是什么? sun公司制订的一种技术规范,用来将jsp页面中的java代码使用类似于html当中的标记来替换 的一 ...

  5. Jsp技术总结

    这节我们总结一下Jsp的相关技术. 1. 什么是JSP JSP即Java Server Pages,它和servlet技术一样,都是sun公司定义的一种用于开发动态web资源的技术.该技术的最大特点在 ...

  6. 利用BitLocker和vhdx创建一个有加密的Win10系统

    如果电脑不支持TPM加密BitLocker,就无法对系统盘进行全盘加密. 可以采用一个变通的方法:创建一个vhdx,将这个虚拟磁盘进行BitLocker加密,然后在这个盘里安装操作系统,最后把vhdx ...

  7. Anywhere服务建立及连接步骤

    <烟叶自动化收购管理系统(山东版)>服务端程序为<烟站综合管理系统5.0>,5.0使用的数据库为Anywhere,设置方法如下:   建立anywhere服务连接步骤   服务 ...

  8. JQ中mouseover和mouseenter的区别

    我最近也在学习JQuery,所以最近对JQ中的一些小问题进行总结,方便学习. 在对于刚开始学习JQ的初学者来说,mouseover事件和mouseenter事件总是傻傻分不清楚,毕竟刚开始学习的时候, ...

  9. Android PullToRefresh （ListView GridView 下拉刷新） 使用详解 （转载）

    最近项目用到下拉刷新,上来加载更多,这里对PullToRefresh这控件进行了解和使用. 以下内容转载自:http://blog.csdn.net/lmj623565791/article/deta ...

  10. Chrome Apps將是Google送給微軟的特洛伊木馬？

    今天,Google 發表了 Chrome Apps,不同於之前 web app,此舉是要把 Chrome 瀏覽器升級為真正的 app 平台,將 Chrome OS 發展成一個成熟的作業系統,可以視為 ...