JavaScript +canvas简易画板的实现

本篇文章讲的是利用的canvas的一些属性制作一个简易的画板，由于本人的时间不足，以及能力也有限，所以功能比较简单，喜欢自己学习的同学有兴趣话可以自己加上一些功能。直接上代码了。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box{
margin: 0 auto;
width: 600px;
padding: 0;
}
</style>
</head>
<body>
<canvas id="canvas" style="display: block;margin: auto;border:3px solid red;background: #ccc;">
不支持canvas，请升级浏览器！
</canvas>
<div class="box">
<input type="button" name="" value="清除画布" id="clear" />
<input type="button" name="" value="红色画笔" id="red" />
<input type="button" name="" value="蓝色画笔" id="blue" />
<input type="button" name="" value="黑色画笔" id="black" />
<input type="button" name="" value="紫色画笔" id="zise" />
<input type="button" name="" value="绿色画笔" id="green" />
<input type="button" name="" value="橡皮擦1"  id="eraser"/>
<input type="button" name="" value="橡皮擦2"  id="eraser2"/>
</div><script type="text/javascript">window.onload = function(){
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
canvas.width = 600;
canvas.height = 600;var oinput = document.getElementsByTagName('input');
for (var i = 0; i < oinput.length; i++) {
oinput[i].onclick = function(){
var id = this.getAttribute('id');
switch(id){
case 'clear':
context.clearRect(0,0,canvas.width,canvas.height);
break;
case 'red':
draw(context,"red");
break;
case 'blue':
draw(context,"blue");
break;
case 'black':
draw(context,"black");
break;
case 'zise':
draw(context,"purple");
break;
case 'green':
draw(context,"green");
break;
case 'eraser':
clear(context,'#ccc');
break;
case 'eraser2':
clearRect(context);
break; }
}}
draw(context,"#fff");
var canvasUrl = canvas.toDataURL();
console.log(canvasUrl);
}//橡皮擦2(清除路径)
function clearRect(cxt){
canvas.onmousedown = function(e){
var e = e || window.event;
cxt.clearRect(e.clientX - canvas.offsetLeft -3,e.clientY - canvas.offsetTop - 3,20,20);
document.onmousemove = function(e){
var e = e || window.event;
cxt.clearRect(e.clientX - canvas.offsetLeft -3,e.clientY - canvas.offsetTop - 3,20,20);
}
document.onmouseup = function(){
document.onmousedown = false;
document.onmousemove = false;
}
}
}//橡皮擦1(用和画布背景颜色相同的颜色，覆盖原有的路径)
function clear(cxt,bgColor){
canvas.onmousedown = function(e){
var e = e || window.event;
cxt.beginPath();
cxt.strokeStyle = bgColor;
cxt.lineWidth = 20;//线条的宽度
cxt.moveTo(e.clientX - canvas.offsetLeft,e.clientY - canvas.offsetTop -3);
document.onmousemove = function(e){
var e = e || window.event;
cxt.lineTo(e.clientX - canvas.offsetLeft,e.clientY - canvas.offsetTop -3);
cxt.stroke();
}
document.onmouseup = function(){
document.onmousedown = false;
document.onmousemove = false;
cxt.closePath();
}
}
}
//绘制路径function draw(cxt,bgColor){canvas.onmousedown = function(e){var e = e || window.event;cxt.beginPath();cxt.strokeStyle = bgColor;cxt.moveTo(e.clientX - canvas.offsetLeft,e.clientY - canvas.offsetTop - 3);document.onmousemove = function(e){var e = e || window.event;cxt.lineTo(e.clientX - canvas.offsetLeft - 3,e.clientY - canvas.offsetTop - 3);cxt.stroke();
}}document.onmouseup = function(){document.onmousedown = false;document.onmousemove = false;cxt.closePath();}
}
</script>
</body>
</html>

想要获得更多资料的请微信搜索公众号【热血科技】，关注一下即可。

JavaScript +canvas简易画板的实现相关推荐

javascript开发简易画板
HTML <body id="bodys"> <span id="eraser"> 清除所有 </span> <spa ...
JavaScript 简易画板
html 5 canvas只是一个容器,想要画出东西全部依赖于JavaScript.感觉什么都离不开这个JavaScript脚本. 简易画板核心代码: <script>var start ...
巧用canvas实现画板功能，使用画笔在图片上涂画，橡皮擦可擦除涂画，并保存
canvas 是HTML5的元素,使用JavaScript 在网页上绘制图像. canvas 拥有多种绘制路径.矩形.圆形.字符以及添加图像的方法. 而如果想实现画笔在画板涂画画笔在图片上涂画,橡皮擦 ...
html+js+canvas实现画板涂画功能和vue+canvas实现画板涂画功能
1,html+js+canvas实现画板涂画功能效果如下: <!DOCTYPE HTML> <html> <head><meta charset=" ...
react实现简易画板程序
react实现简易画板程序文章同时发布于:https://pengfeixc.com/blog/60d073bce97367196dce3efc. 在这之前,我写过一个vue版本的画板程序.最近因为 ...
HTML5 canvas 做画板画图可以做电子白板
HTML5 canvas 做画板画图可以做电子白板 <html><head><meta charset="utf-8"><title&g ...
Android 简易画板
用到的方法画布Canvas 画笔Paint 路径Path 文件 File 位图 Bitmap 菜单 menu 创建一个Android项目,实现手绘功能的简易画板,并可以储存. activity_ma ...
用html5做一个简单的作品,html5 canvas 简单画板实现代码
canvas简单画板 canvas简单画板提示:您可以先修改部分代码再运行
html计算天数,Javascript实现简易天数计算器
本文实例为大家分享了Javascript实现简易天数计算器的具体代码,供大家参考,具体内容如下效果图: 功能: 1. 支持选择日期: 2. 自动计算闰年: 3. 支持使用当前日期. 代码: (1)h ...

JavaScript +canvas简易画板的实现

JavaScript +canvas简易画板的实现相关推荐

最新文章

热门文章