<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>使用canvas制作画板</title>
    <link rel="stylesheet" href="">
    <style>
        body {
            background: #efe;
            padding-top: 50px;
        }

        #paint {
            border: 2px solid hsl(107, 98%, 56%);
            background: #fff;
            float: left;
        }

        #paint:hover {
            cursor: crosshair;
        }

        #Container {
            width: 800px;
            height: 100%;
            margin: 0 auto;
        }

        #Container .box {
            float: left;
            margin: 10px;
        }

        #Container .box button {
            color: #606060;
            border: 1px solid #b7b7b7;
            background: #ededed;
            cursor: pointer;
            text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
            box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
            width: 102px;
            font-size: 1em;
            height: 31px;
            margin-right: 20px;
            margin-left:20px;
        }
        #Container .box h3 {
            margin-top: 2px;
            display: inline-block;
        }

        #Container #image_png {
            float: left;
            width: 800px;
            height: 400px;
            border: 2px solid hsl(107, 98%, 56%);
            background: #fff;
            display: none;
        }

        #colorbox {
            width: 365px;
            height: 52px;
        }

        #colorbox>li {
            width: 50px;
            height: 50px;
            border: 1px solid rgba(0, 0, 0, 0.06);
            list-style: none;
            float: left;
        }

        #linewidth li {
            display: inline;
            font-size: 20px;
        }
    </style>
</head>

<body>
<div id="Container">
    <ul id="colorbox">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <canvas id="paint" width="800" height="400"></canvas>
    <div class="box">
        <button type="button" onclick="copyimage()">点击保存</button>
        <h3>滑动改变画笔粗细：</h3>
        <input type="range" min="5" max="50" value="50" id="trackBar">
        <h4 id="hh" style="display:inline">5</h4>
        <button onclick="clearAll(this)" id="clearAll_s">清除画布</button>
    </div>
    <img src="" id="image_png">
</div>
<script src="js/jquery-2.0.0.min.js"></script>
<script>
    var mycanvas = document.getElementById("paint");
    var ctx = mycanvas.getContext("2d");
    ctx.strokeStyle = "red";
    var flag = false;
    $("#paint").mousedown(function(e) { //当鼠标按下时
        var mouseX = e.pageX - this.offsetLeft;
        var mouseY = e.pageY - this.offsetTop;
        ctx.moveTo(mouseX, mouseY);
        flag = true;
    });
    $("#paint").mousemove(function(e) { //当鼠标抬起时
        if (flag == true) {
            var mouseX = e.pageX - this.offsetLeft;
            var mouseY = e.pageY - this.offsetTop;
            ctx.lineTo(mouseX, mouseY);

            ctx.stroke();
        }
    });
    $("#paint").mouseup(function(e) { //当鼠标移动时
        flag = false;
    });
    //实现颜色版
    var colors = ['#000000', '#ff0000', '#0000ff', '#FF7F24', '#00ffff', '#FFFF00', '#4EEE94'];
    var font = [20, 40, 60, 80, 100];
    var colorboxs = document.getElementById("colorbox").getElementsByTagName("li");

    for (var i = 0; i < colors.length; i++) {
        colorboxs[i].style.backgroundColor = colors[i];
    }
    //为画笔添加颜色
    $("li").each(function() {
        $(this).bind("click", function() {
            ctx.beginPath();
            ctx.strokeStyle = this.style.backgroundColor;
        });
    });
    //画笔加粗
    var trackBar = document.getElementById("trackBar");
    trackBar.value = 5;
    trackBar.addEventListener("change", function() {
        hh.innerHTML = this.value;
        ctx.beginPath();
        ctx.lineWidth = this.value;
    });
    //将图画保存
    function copyimage(event) {
        var img_png_src = mycanvas.toDataURL("image/png");
        document.getElementById("image_png").src = img_png_src;
        $("#image_png").css("display", "block")
    }
    //清除画布
    function clearAll() {
        ctx.clearRect(0, 0, 880, 400);
        ctx.beginPath();
    }

</script>
</body>
</html>

最后效果：


												


											
使用HTML5的cavas实现的一个画板的更多相关文章
	

    
								
  1. 使用Canvas和JavaScript做一个画板
		
    本文同步于个人博客:https://zhoushuo.me/blog/2018/03/11/drawing-borad/ 前些天学习了HTML5的<canvas>元素,今天就来实践一下,用 ...
    
		
    2. 
						
  2. HTML5 Canvas中实现绘制一个像素宽的细线
		
    正统的HTML5 Canvas中如下代码 ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(10, 100); ctx.lineTo(300,100); c ...
    
		
    3. 
						
  3. 利用HTML5与jQuery技术创建一个简单的自动表单完成
		
    来源:GBin1.com 在线演示   在线下载 谷歌快速搜索自带大量自动完成插件——库中甚至还有一个附带的jQuery UI共享选项.然而今天我要寻找一个替代的解决方案.由DevBridge开发的j ...
    
		
    4. 
						
  4. 今天我们要说的画一个三角形，恩，画一个三角形，第一种呢是利用我们的html标签结合css来实现；而第二种方法就就是我们的html5新增的一个标签canves,这个canves就是网页画幕，那么顾名思义就是在网页里建造一个画板，用来画画，好，那接下来就和我一起去看看吧！
		
    第一种方法:利用我们的html标签结合css来实现 span{ width:0px; height:0px; border-width:7px; border-style:solid; border- ...
    
		
    5. 
						
  5. Html5新特性 &lt;canvas&gt;画板画直线
		
     以下样例为用canvas标签画多条直线 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" & ...
    
		
    6. 
						
  6. javascript+HTMl5游戏下载，开发一个都能月薪上万！舅服你
		
    HTML5时代已经到来许久了,你是否已经掌握了那么一点呢?今天小编给大家讲讲h5的折叠多设备.跨平台特性, 即用HTML5制作游戏.相比flash,HTML5更加灵活方便,随着浏览器技术的不断升级,H ...
    
		
    7. 
						
  7. （html4与html5分别实现）用一个表单向php界面提交不同的命令
		
    先看上面的表单实例,分别有3个submit,只不过需要根据需要进行选择添加.删除或是修改.现在有两个方案. 方案一: 如果实在HTML4中,可以用下面的代码实现, 即将所有的submit提交到acce ...
    
		
    8. 
						
  8. 使用PhoneGap开发基于Html5应用二：第一个PhoneGap应用：百度
		
    上一篇博文使用PhoneGap开发基于Html5应用一:PhoneGap简单介绍 中我介绍了怎样从phonegap官网上下载源代码并启动第一个应用,今天我们把phonegap的应用略微改一下,让他实现 ...
    
		
    9. 
						
  9. 用canvas画布画一个画板
		
    前段时间,在对H5的回顾中突然对canvas有了感觉,闲来无事便对其进行了一些捯饬.这不,上周我还做了一个好玩的画板呢,废话不多说,直接上代码(PS:翠花,上代码~): HTML部分: <!DO ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. C# 利用性能计数器监控网络状态
			
    本例是利用C#中的性能计数器(PerformanceCounter)监控网络的状态.并能够直观的展现出来 涉及到的知识点: PerformanceCounter,表示 Windows NT 性能计数器 ...
    
			
    2. 
						
  2. 探索ASP.NET MVC5系列之~~~4.模型篇---包含模型常用特性和过度提交防御
			
    其实任何资料里面的任何知识点都无所谓,都是不重要的,重要的是学习方法,自行摸索的过程(不妥之处欢迎指正) 汇总:http://www.cnblogs.com/dunitian/p/4822808.ht ...
    
			
    3. 
						
  3. 在Sublime Text 3上安装代码格式化插件CodeFormatter
			
    1.了解CodeFormatter插件 在Sublime Text 3中编写代码,为了能让我们的代码格式变得漂亮整洁,需要一个能自动格式代码的插件.这里发现CodeFormatter插件不错,它能支持 ...
    
			
    4. 
						
  4. 流程开发Activiti 与SpringMVC整合实例
			
    流程(Activiti) 流程是完成一系列有序动作的概述.每一个节点动作的结果将对后面的具体操作步骤产生影响.信息化系统中流程的功能完全等同于纸上办公的层级审批,尤其在oa系统中各类电子流提现较为明显 ...
    
			
    5. 
						
  5. warensoft unity3d  更新说明
			
    warensoft unity3d 组件的Alpha版本已经发布了将近一年,很多网友发送了改进的Email,感谢大家的支持. Warensoft Unity3D组件将继续更新,将改进的功能如下: 1. ...
    
			
    6. 
						
  6. Mac上MySQL忘记root密码且没有权限的处理办法&workbench的一些tips （转）
			
    忘记Root密码肿么办 Mac上安装MySQL就不多说了,去mysql的官网上下载最新的mysql包以及workbench,先安装哪个影响都不大.如果你是第一次安装,在mysql安装完成之后,会弹出来 ...
    
			
    7. 
						
  7. C# 生成验证码图片时消除锯齿
			
    引言 基于生成图片实现了一个手机号转图片的需求. 内容也很简单,直接用手机号生成一个png图片.就是为了背景透明以便其他地方调用. 有无锯齿主要依靠一句代码:g.TextRenderingHint=  ...
    
			
    8. 
						
  8. 【工具使用】mac电脑使用技巧
			
    本文地址 分享提纲: 1.  mac命令行和finder的交互 2. 一些mac的插件 3. 一些开发的配置 1.mac命令行和findder交互           1)命令行中打开当前文件夹: o ...
    
			
    9. 
						
  9. 跟着老男孩教育学Python开发【第二篇】：Python基本数据类型
			
    运算符 设定:a=10,b=20 . 算数运算 2.比较运算 3.赋值运算 4.逻辑运算 5.成员运算 基本数据类型 1.数字 int(整型) 在32位机器上,整数的位数为32位,取值范围为-2**3 ...
    
			
    10. 
						
  10. Linux实战教学笔记05:远程SSH连接服务与基本排错(新手扫盲篇)
			
    第五节 远程SSH连接服务与基本排错 标签(空格分隔):Linux实战教学笔记-陈思齐 第1章 远程连接LInux系统管理 1.1 为什么要远程连接Linux系统 在实际的工作场景中,虚拟机界面或物理 ...
    
			
    11.