用canvas画布画一个画板
前段时间，在对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画布画一个画板的更多相关文章
- Canvas 如何画一个四分之一圆
转: Canvas 如何画一个四分之一圆 HTML: Document JS: var c = document.getElementById('ctx') var ctx = c.getContex ...
- 为了让她学画画——熬夜用canvas实现了一个画板
前言 大家好,我是Fly, canvas真是个强大的东西,每天沉迷这个无法自拔, 可以做游戏,可以对图片处理,后面会给大家分享一篇,canvas实现两张图片找不同的功能, 听着是不是挺有意思的, 有点 ...
- canvas画布——画八卦图
实例 创建一个圆形: var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d") ...
- canvas之画一个三角形
<canvas id="canvas" width="500" height="500" style="background ...
- [技术博客]海报图片生成——小程序canvas画布
目录 背景介绍 canvas简介 代码实现 难点讲解 圆角矩形裁剪失败之PS的妙用 编码不要过硬 对过长的文字进行截取 真机首次生成时字体不对 drawImage只能使用本地图片 背景介绍 目标:利用 ...
- canvas绘画基础(一)：认识canvas画布
html5提供了一个<canvas>标签,结合javascript的canvas api接口可以用来绘制图形和动画.最近工作中涉及到画图的任务,下面来了解一下canvas的基础:canva ...
- 用canvas画一个的小画板（PC端移动端都能用）
前言 本篇的内容主要包括: canvas标签简介 画板的功能简介 画板的JS部分(包括:1.获取画布 2.使画板全屏幕显示且自适应 3.如何绘制直线 4.绘画时的三种状态(鼠标点击.移动.离开)5.画 ...
- 使用Canvas和JavaScript做一个画板
本文同步于个人博客:https://zhoushuo.me/blog/2018/03/11/drawing-borad/ 前些天学习了HTML5的<canvas>元素,今天就来实践一下,用 ...
- 使用H5 canvas画一个坦克
具体步骤如下: 1. 首先做出绘图区,作为坦克的战场 <canvas id="floor" width="800px" height=&quo ...
随机推荐
- jsp中 RequestDispatcher接口的两种跳转:forward()和include()
在web程序中,经常是由多个Servlet来完成请求.RequestDispatcher接口就是为了多个Servlet之间的调整而实现的.该接口可以用httpSerbletRequest的getReq ...
- javascript中原型,构造器,还有E5扩展的默认成员
对象原型所具有的基本特征: 1.toString() 2.toLocaleString() 3.valueOf() 4.constructor() 5.propertyIsnumerable() 6. ...
- logger5步走
https://www.cnblogs.com/GGGGGGZX/p/9114378.html'''打印日志11/26/2017 10:44:21 PM bug 24 并写入文件example.log ...
- Creating an Android Project（创建一个android项目）
一个android项目包含了你的应用程序中的所有源代码文件,我们可以通过android sdk tools轻松地创建一个拥有默认文件跟文件夹的android项目. 这部分课程我们将展示两种创建andr ...
- yum安装cacti
环境: centos 6.5 -x64 cacti-0.8.7e.tar.gz mysql yum安装即可 yum服务使用centos自带的就行.如果是红帽请自行解决yum.本文不赘述. **注意:同 ...
- 概率分布之间的距离度量以及python实现
1. 欧氏距离(Euclidean Distance) 欧氏距离是最易于理解的一种距离计算方法,源自欧氏空间中两点间的距离公式.(1)二维平面上两点a(x1,y1)与b(x2,y2)间的欧 ...
- 跟我学算法-svm支持向量机算法推导
Svm算法又称为支持向量机,是一种有监督的学习分类算法,目的是为了找到两个支持点,用来使得平面到达这两个支持点的距离最近. 通俗的说:找到一条直线,使得离该线最近的点与该线的距离最远. 我使用手写进行 ...
- MySQL GTID (四)
七. GTID的限制以及解决方案 7.1 事务中混合多个存储引擎,会产生多个GTID. 当使用GTID,在同一个事务中,更新包括了非事务引擎(MyISAM)和事务引擎(InnoDB)表的操作,就会导致 ...
- Gerrit 系统初探 (已转移到 https://steemit.com/gerrit/@linvictor88/gerrit )
Gerrit 使用简介 Gerrit,一种免费.开放源代码的代码审查软件,使用网页界面.利用网页浏览器,同一个团队的软件程序员,可以相互审阅彼此修改后的程序代码,决定是否能够提交,退回或 ...
- MyEclipse10.0 采用插件方式安装 SVN(转)
原文:http://blog.sina.com.cn/s/blog_a5f093b401015uzl.html 一.到官方上下载svn1.8.3,下载后的文件名叫site-1.8.3.zip 地址:h ...