前段时间，在对H5的回顾中突然对canvas有了感觉，闲来无事便对其进行了一些捯饬。这不，上周我还做了一个好玩的画板呢，废话不多说，直接上代码(PS：翠花，上代码~)：

HTML部分：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Canvas 制作画板</title>

    <style>

        h1{

            text-align: center;

            margin: 0 auto;

            -webkit-touch-callout: none;

            -webkit-user-select: none;

            -khtml-user-select: none;

            -moz-user-select: none;

            -ms-user-select: none;

            user-select: none;

        }

        .drawBox{

            width: 830px;

            height: auto;

            margin: auto;

            background: #999;

            border-radius: 10px;

        }

        #myCanvas{

            padding: 0;

            background: #fff;

            display: block;

            cursor: pointer;

            border-radius: 10px;

            border: 15px solid #999;

        }

        .btnBox{

            color: #fff;

        }

        .btnBox>a{

            color:#fff;

            width: 85px;

            line-height: 40px;

            text-align: center;

            text-decoration: none;

            display: inline-block;

            background: #666;

            border-radius: 10px;

        }

        .btnBox>a:first-child{

            margin: 0 0 12px 15px;

        }

        .btnBox>a#toolBtn{

            width: 50px;

        }

        .btnBox>input#color{

            width: 22px;

            height: 25px;

            cursor: pointer;

            outline: none;

            border-radius: 50%;

            margin: auto 10px;

        }

        .btnBox>input#thick{

            outline: none;

            width: 20px;

            padding: 3px;

            border-radius: 5px;

        }

        .btnBox>input#range{

            outline: none;

            position: relative;

            top: 5px;

        }

    </style>

</head>

<body>

<h1>Canvas 制作画板</h1>

<div class="drawBox">

    <canvas id="myCanvas" width="800" height="600">

        对不起，您的浏览器不兼容canvas标签！

    </canvas>

    <div class="btnBox">

        <a href="javascript:;" id="toolBtn" title="选择橡皮">橡皮</a>

        <a href="javascript:;" id="clearBtn" title="清除画板">清除画板</a>

        <a href="javascript:;" id="downLoad" title="点击下载">下载图片</a>

        <input type="color" id="color" title="选择画笔颜色"/>

        <input type="text" id="thick" value="1" title="请输入画笔粗细值"/>

        细 <input type="range" name="range" id="range" title="画笔粗细调整" value="1" min="1" max="50"/> 粗

    </div>

</div>

</body>

</html>

HTML页面准备就绪，Javascript部分：

document.onload=function(){

    var can = document.getElementById('myCanvas'),

        downBtn = document.getElementById('downLoad'),

        clearBtn = document.getElementById('clearBtn'),

        colorBtn = document.getElementById('color'),

        rangeBtn = document.getElementById('range'),

        toolBtn = document.getElementById('toolBtn'),

        thick = document.getElementById('thick');// 获取按钮等元素

    var ctx = can.getContext('2d');// 定义一个canvas画布

    colorBtn.addEventListener('change',function () {

        ctx.strokeStyle=this.value;

    });// 颜色改变

    rangeBtn.addEventListener('change',function () {

        ctx.lineWidth=this.value;

        thick.value=this.value;

    });// 笔画粗细(拖拽)

    thick.addEventListener('blur',function () {

        ctx.lineWidth=this.value;

        rangeBtn.value=this.value;

    });// 笔画粗细(数值输入)

    toolBtn.addEventListener('click',function () {

        if(this.text=='橡皮'){

            this.text='画笔';

            ctx.strokeStyle='#fff';

            ctx.lineWidth=20;

        }else{

            this.text='橡皮';

            ctx.strokeStyle='#000';

            ctx.lineWidth=rangeBtn.value;

        }

    });// 橡皮与画笔的一个转换

    // 开始绘制

    can.addEventListener('mousedown',function (from) {

        // 绘制

        var formX=from.clientX-can.offsetLeft-13,

            formY=from.clientY-can.offsetTop-13;

        ctx.beginPath();

        ctx.moveTo(formX,formY);

        // 画笔移动

        function move(to) {

            var toX=to.clientX-can.offsetLeft-13,

                toY=to.clientY-can.offsetTop-13;

            ctx.lineTo(toX,toY);

            ctx.stroke();

        };

        can.addEventListener('mousemove',move);

        // 停止绘制

        document.addEventListener('mouseup',function () {

            can.removeEventListener('mousemove',move,false);

        });

    });

    // 下载图片按钮

    downBtn.addEventListener('click',function () {

        this.href=can.toDataURL('image/png');

        this.setAttribute('download','picture.png');

    });

    // 清除画板按钮-画布情况

    clearBtn.addEventListener('click',function () {

        ctx.clearRect(0,0,can.width,can.height);

    });

}

　　在此，我对橡皮的处理可能不够理想，因为如果下载的是透明的，那么会看见橡皮的痕迹，在此我就不对此给出解决的办法，欢迎大家积极探索吧。好的，这一切就绪后，再来一个效果图：

一个基本画板，有兴趣的朋友可以再对细节进行处理以及一些功能的扩展~

用canvas画布画一个画板的更多相关文章

  1. Canvas 如何画一个四分之一圆

    转: Canvas 如何画一个四分之一圆 HTML: Document JS: var c = document.getElementById('ctx') var ctx = c.getContex ...

  2. 为了让她学画画——熬夜用canvas实现了一个画板

    前言 大家好,我是Fly, canvas真是个强大的东西,每天沉迷这个无法自拔, 可以做游戏,可以对图片处理,后面会给大家分享一篇,canvas实现两张图片找不同的功能, 听着是不是挺有意思的, 有点 ...

  3. canvas画布——画八卦图

    实例 创建一个圆形: var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d") ...

  4. canvas之画一个三角形

    <canvas id="canvas" width="500" height="500" style="background ...

  5. [技术博客]海报图片生成——小程序canvas画布

    目录 背景介绍 canvas简介 代码实现 难点讲解 圆角矩形裁剪失败之PS的妙用 编码不要过硬 对过长的文字进行截取 真机首次生成时字体不对 drawImage只能使用本地图片 背景介绍 目标:利用 ...

  6. canvas绘画基础(一)：认识canvas画布

    html5提供了一个<canvas>标签,结合javascript的canvas api接口可以用来绘制图形和动画.最近工作中涉及到画图的任务,下面来了解一下canvas的基础:canva ...

  7. 用canvas画一个的小画板（PC端移动端都能用）

    前言 本篇的内容主要包括: canvas标签简介 画板的功能简介 画板的JS部分(包括:1.获取画布 2.使画板全屏幕显示且自适应 3.如何绘制直线 4.绘画时的三种状态(鼠标点击.移动.离开)5.画 ...

  8. 使用Canvas和JavaScript做一个画板

    本文同步于个人博客:https://zhoushuo.me/blog/2018/03/11/drawing-borad/ 前些天学习了HTML5的<canvas>元素,今天就来实践一下,用 ...

  9. 使用H5 canvas画一个坦克

      具体步骤如下:   1. 首先做出绘图区,作为坦克的战场   <canvas id="floor" width="800px" height=&quo ...

随机推荐

  1. 01：初识Redis

    付磊和张益军两位大咖写的葵花宝典(Redis开发和运维)学习笔记. 一.初识Redis 1.redis简介 Redis是一种基于键值对(key-value)的NoSQL数据库,与很多键值对数据库不同的 ...

  2. Oracle表空间知识

    Oracle表空间知识 一,创建临时表空间 CREATE temporary TABLESPACE TEMP_PNLREPORT tempfile '/oradata2/ORCL/temp_pnlre ...

  3. Eutils用法总结

    好久没更新了,这里都长草了... 总结下Eutils的用法,参考<E-utilities Quick Start>,没时间看英文的可以参考下. 简介 Eutils全称是The Entrez ...

  4. Selenium Webdriver——处理Table

    html table是由 table 元素以及一个或多个 tr.th 或 td 元素组成.如下: HTML源码如下: <html> <head> <meta http-e ...

  5. php使用curl库进行ssl双向认证

    官方文档: http://www.php.net/manual/zh/function.curl-setopt.php#10692 官方举例: <?phpcurl_setopt($ch, CUR ...

  6. VB.Net与C# 的语法比较

    最近看代码或写代码时,经常把VB与C#的基本语法搞混,为方便查看,特对其异同进行对比: 變數初始化 VB.NET 自動將所有的變數初始化成 0 或 nothing.C# 在你未初始化變數之前不准你用該 ...

  7. HDFS NameNode HA 部署文档

    简介: HDFS High Availability Using the Quorum Journal Manager Hadoop 2.x 中,HDFS 组件有三个角色:NameNode.DataN ...

  8. (4)activiti工作流引擎之uel表达式

    有了前面几章,我们肯定有一定的困惑,activiti如何与实际业务整合,比如一条采购单,如何跟一个流程实例互相关联起来? 这里就需要使用到activiti启动流程实例时设置一个流程实例的busines ...

  9. 【335】Install PyDev in Eclipse IDE

    Reference: Eclipse和PyDev搭建完美Python开发环境(Windows篇) Reference: Install the PyDev plug-in for Eclipse Do ...

  10. 单源最短路：Bellman-Ford算法 及 证明

    描述: 求图中某一点到其他任一点的最短距离. 操作: 1. 初始化 结果保存在一个dist数组里,源点的结果初始化为0,其他初始化为无穷大(如INT32_MAX). 2. 计算: 两重for循环,第一 ...