canvas之画板简单功能实现

时间:2022-06-08
本文章向大家介绍canvas之画板简单功能实现,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

画板简单功能实现代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>画板原理升级版</title>
<style>
*{
padding:0;
margin:0;
}
canvas{
background:#7B68EE;
}
</style>
</head>
<body>
<h1>画板效果改良版</h1>
<input type="color" id="cor" value="#26ffff">
<input type="range" id="cuxi" min='1' max='50' value='15' step='1s'><span>15</span><button type="button" id="clear">橡皮擦</button><br>
<br>
<br>
<canvas id="canvas" width="900" height="500"></canvas>
<script>
var cor=document.getElementById('cor');
var cuxi=document.getElementById('cuxi');
var clear=document.getElementById('clear');
var span=document.getElementsByTagName('span')[0];
//获得画板
var c=document.getElementById('canvas');
//获得绘画环境
var cv=c.getContext('2d');
//指定线条样式
cv.strokeStyle='#26ffff';
cv.lineWidth=15;
// cv.beginPath();
// cv.moveTo(0,0);
// cv.lineTo(100,500);
// cv.stroke();
//给画板新增按下事件
c.onmousedown=function(e){
//获取事件对象
var ev=window.event||e;
//获取事件源的位置
var old_left=ev.layerX||ev.offsetX;
var old_top=ev.layerY||ev.offsetY;
// alert('你按下的位置是:'+old_left+','+old_top);
cv.beginPath();//开启路径
cv.moveTo(old_left,old_top);//起始点位置
//给画板(鼠标)添加移动事件
c.onmousemove=function(e){
//获取事件对象
var ev=window.event||e;
//获取移动后事件源位置
var now_left=ev.layerX||ev.offsetX;
var now_top=ev.layerY||ev.offsetY;
// document.title=now_left+','+now_top;测试位置移动后坐标
cv.lineTo(now_left,now_top);//移动结束位置
cv.stroke();//闭合路径

}
}
//,鼠标抬起,取消鼠标移动事件
c.onmouseup=function(){
c.onmousemove=null;
}
//给颜色加改变事件
cor.onchange=function(){
cv.strokeStyle=this.value;
}
//给线条粗细控制的滑块加事件
cuxi.onchange=function(){
cv.lineWidth=this.value;
span.innerHTML=cuxi.value;//span显示当前线条的粗细值
}
//给橡皮按钮加事件
clear.onclick=function(){
alert('尽情的擦黑板吧');
cv.strokeStyle="#7B68EE";
}
</script>
</body>
</html>

具体的内容都包含注释内容了,包含了线条颜色可以获取input内的颜色value值,线条粗细使用range的value控制

橡皮功能真实效果是把线条的颜色修改背景色,产生错乱,被清除之前的内容结束鼠标按下事件进行线条绘制,移动鼠标出现线条路径,当没有点击鼠标,将移动事件取消,不会实现线条,满足鼠标按下和移动鼠标才能进行线条绘制!