<!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. HTML5 Canvas中实现绘制一个像素宽的细线

    正统的HTML5 Canvas中如下代码 ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(10, 100); ctx.lineTo(300,100); c ...

  3. 利用HTML5与jQuery技术创建一个简单的自动表单完成

    来源:GBin1.com 在线演示   在线下载 谷歌快速搜索自带大量自动完成插件——库中甚至还有一个附带的jQuery UI共享选项.然而今天我要寻找一个替代的解决方案.由DevBridge开发的j ...

  4. 今天我们要说的画一个三角形,恩,画一个三角形,第一种呢是利用我们的html标签结合css来实现;而第二种方法就就是我们的html5新增的一个标签canves,这个canves就是网页画幕,那么顾名思义就是在网页里建造一个画板,用来画画,好,那接下来就和我一起去看看吧!

    第一种方法:利用我们的html标签结合css来实现 span{ width:0px; height:0px; border-width:7px; border-style:solid; border- ...

  5. Html5新特性 &lt;canvas&gt;画板画直线

     以下样例为用canvas标签画多条直线 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" & ...

  6. javascript+HTMl5游戏下载,开发一个都能月薪上万!舅服你

    HTML5时代已经到来许久了,你是否已经掌握了那么一点呢?今天小编给大家讲讲h5的折叠多设备.跨平台特性, 即用HTML5制作游戏.相比flash,HTML5更加灵活方便,随着浏览器技术的不断升级,H ...

  7. (html4与html5分别实现)用一个表单向php界面提交不同的命令

    先看上面的表单实例,分别有3个submit,只不过需要根据需要进行选择添加.删除或是修改.现在有两个方案. 方案一: 如果实在HTML4中,可以用下面的代码实现, 即将所有的submit提交到acce ...

  8. 使用PhoneGap开发基于Html5应用二:第一个PhoneGap应用:百度

    上一篇博文使用PhoneGap开发基于Html5应用一:PhoneGap简单介绍 中我介绍了怎样从phonegap官网上下载源代码并启动第一个应用,今天我们把phonegap的应用略微改一下,让他实现 ...

  9. 用canvas画布画一个画板

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

随机推荐

  1. 【.net 深呼吸】细说CodeDom(2):表达式、语句

    在上一篇文章中,老周厚着脸皮给大伙介绍了代码文档的基本结构,以及一些代码对象与CodeDom类型的对应关系. 在评论中老周看到有朋友提到了 Emit,那老周就顺便提一下.严格上说,Emit并不是针对代 ...

  2. TODO:Laravel 使用blade标签布局页面

    TODO:Laravel 使用blade标签布局页面 本文主要介绍Laravel的标签使用,统一布局页面.主要用到到标签有@yield,@ stack,@extends,@section,@stop, ...

  3. iOS开源项目周报0105

    由OpenDigg 出品的iOS开源项目周报第四期来啦.我们的iOS开源周报集合了OpenDigg一周来新收录的优质的iOS开发方面的开源项目,方便iOS开发人员便捷的找到自己需要的项目工具等. He ...

  4. DBSCAN密度聚类算法

    DBSCAN(Density-Based Spatial Clustering of Applications with Noise,具有噪声的基于密度的聚类方法)是一种很典型的密度聚类算法,和K-M ...

  5. Shell碎碎念

    1. 字符串如何大小写转换 str="This is a Bash Shell script." 1> tr方式 newstr=`tr '[A-Z]' '[a-z]' < ...

  6. 对Thoughtworks的有趣笔试题实践

    记得2014年在网上看到Thoughtworks的一道笔试题,当时觉得挺有意思,但是没动手去写.这几天又在网上看到了,于是我抽了一点时间写了下,我把程序运行的结果跟网上的答案对了一下,应该是对的,但是 ...

  7. 【Big Data】HADOOP集群的配置(一)

    Hadoop集群的配置(一) 摘要: hadoop集群配置系列文档,是笔者在实验室真机环境实验后整理而得.以便随后工作所需,做以知识整理,另则与博客园朋友分享实验成果,因为笔者在学习初期,也遇到不少问 ...

  8. 用游标实现查询当前服务器所有数据库所有表的SQL

    declare @name varchar(100) DECLARE My_Cursor CURSOR --定义游标 FOR (SELECT Name FROM Master..SysDatabase ...

  9. [修正] Firemonkey TFrame 存档后,下次载入某些事件连结会消失(但源码还在)

    问题:Firemonkey TFrame 存档后,下次载入某些事件连结会消失(但源码还在) 解决:(暂时方法) type TTestFrame = class(TFrame) public const ...

  10. openresty 前端开发入门四之Redis篇

    这章主要演示怎么通过lua连接redis,并根据用户输入的key从redis获取value,并返回给用户 操作redis主要用到了lua-resty-redis库,代码可以在github上找得到 而且 ...