先看图片

　　

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#与数据库访问技术总结（七）综合示例

    综合示例 说明:前面介绍了那么多,光说不练假把式,还是做个实例吧. 表:首先你要准备一张表,这个自己准备吧.我们以学生表为例. 1.ExecuteScalar方法 ExecuteScalar方法执行返 ...

  2. windows本地自动集成代码+SSH服务器配置

    在windows环境下使用Jenkins自动集成代码 描述: 局域网电脑A是本地服务器,安全win7系统,安装了Jenkins:现在想让A成为测试服务器,需要隔一段时间从SVN里同步出最新的代码,供客 ...

  3. 安装完grunt和grunt-cli仍然无法识别grunt

    如题: 在安装完grunt-cli和grunt之后,仍然不识别grunt. 反复确认是-g安装... 原因: 有可能是nodejs安装出现问题,到时npm的路径没有出现在环境变量里面. 把C:\Use ...

  4. SQLite数据库增删改查操作

    一.使用嵌入式关系型SQLite数据库存储数据 在Android平台上,集成了一个嵌入式关系型数据库——SQLite,SQLite3支持NULL.INTEGER.REAL(浮点数字).TEXT(字符串 ...

  5. WindowsPhone8拍照功能实现简介

    WindowsPhone作为一款智能手机操作系统,支持APP中拍照是必不可少的,目前在WP8上的拍照主要有以下三种途径: 1.使用CameraCaptureTask: 2.使用PhotoCamera类 ...

  6. 如何安装、配置Apache

    Apache的安装流程网上版本很多,但很多版本有错误,或者缺漏,如果初学者按照那样安装的话会遇到各种各样的问题.我整理了自己安装.配置Apache的过程,亲测有效,分享给大家. 基本过程如下: Dow ...

  7. [轉載]史上最强php生成pdf文件,html转pdf文件方法

    之前有个客户需要把一些html页面生成pdf文件,然后我就找一些用php把html页面围成pdf文件的类.方法是可谓是找了很多很多,什么html2pdf,pdflib,FPDF这些都试过了,但是都没有 ...

  8. 为PHP函数执行设置超时

    如何防止一个函数执行时间过长呢?在PHP里可以用pcntl时钟信号+异常来实现. 代码如下: declare(ticks = 1); function a(){ sleep(10); echo &qu ...

  9. 使用Dezender对zend加密后的php文件进行解密

    在开发中需要修改一些php文件,部分是通过zend加密的,记事本打开之后是这样的: 此时需要使用Dezender进行解密,下载链接如下: Dezender.7z 下载后解压到C盘(路径不要带有中文), ...

  10. Codeforces Round #385 (Div. 2) A. Hongcow Learns the Cyclic Shift 水题

    A. Hongcow Learns the Cyclic Shift 题目连接: http://codeforces.com/contest/745/problem/A Description Hon ...