先看图片

　　

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. RabbitMQ（三） -- Publish/Subscribe

    RabbitMQ(三) -- Publish/Subscribe `rabbitmq`支持一对多的模式,一般称为发布/订阅.也就是说,生产者产生一条消息后,`rabbitmq`会把该消息分发给所有的消 ...

  2. Scala：条件表达式的好处

    条件表达式的好处之一是:让代码更简洁,例如在一个需要根据不同条件收集不同值的场景中,多数语言提供的代码如下: ; ) { tmp = xxx; } ) { tmp = yyy; } else { tm ...

  3. Atitit. 解压缩zip文件 的实现最佳实践 java c# .net php

    Atitit. 解压缩zip文件 的实现最佳实践 java c# .net php 1. Jdk zip 跟apache ant zip 1 2. Apache Ant包进行ZIP文件压缩,upzip ...

  4. Android shape 渐变！描边！圆角！示例详解

    看看shape的用法,确实很有帮助.这里我偷懒转一篇比较详细的帖子,和大家一起进步~! Android 中常常使用shape来定义控件的一些显示属性,今天看了一些shape的使用,对shape有了大体 ...

  5. .NET开发中经常用到的扩展方法

    整理一下自己经常用到的几个扩展方法,在实际项目中确实好用,节省了不少的工作量. 1  匿名对象转化 在WinForm中,如果涉及较长时间的操作,我们一般会用一个BackgroundWorker来做封装 ...

  6. adb devices指令实例讲解

    在讲这个指令之前,我首先启动了一个名称为“Galaxy_Nexus_4.4.2”的手机模拟器(有时我们也管其叫安卓虚拟设备),并且通过USB数据线将我的手机设备和PC进行了连接,而后我应用“Andro ...

  7. 使用retrofit注意

    retrofit-1.7.1 依赖以下包 okhttp-2.0.0 okio-1.0.0 okhttp-urlconnection-2.0.0 ExtCertPathValidatorExceptio ...

  8. JNI开发示例

    安装:eclipse(http://www.eclipse.org/).CDT(C/C++ Development Tooling).ADT(Android Development Tools) ht ...

  9. ASP.NET Web API模型验证以及异常处理方式

    ASP.NET Web API的模型验证与ASP.NET MVC一样,都使用System.ComponentModel.DataAnnotations. 具体来说,比如有:[Required(Erro ...

  10. [转]office2010一直卡在“正在受保护的视图中打开”

    用Office 2010 打开文件遇到“”,如下图: 转自: 解决办法: 还可以使用下面的方法打开上图的受保护视图设置界面:   1. 启动 Word 2010 应用程序,单击[文件]按钮并选择[选项 ...