<!DOCTYPE html>
<html>
<head>
<title>画笔功能DEMO</title>
<meta charset="utf-8">
</head>
<style type="text/css">
.drawColor{
position: absolute;
top:10px;
z-index: 999;
}
*{
margin:0;
padding:0;
}
input{
width:100px;
border:none;
border-radius: 5px;
border:1px double #999;
background-color: #282923;
color:#FFF;
cursor:pointer;
transition: all 0.5s;
}
input:hover{
transform: scale(1.05);
}
#red{
color:red;
}
#green{
color:green;
}
#blue{
color:blue;
}
#clear{
font-weight: bold;
}
</style>
<body>
<canvas width="1920" height="1080" id="canvas">
<span>不支持canvas,给用户判定</span>
</canvas>
<div class="drawColor">
<input type="button" value="红画笔" id="red">
<input type="button" value="绿画笔" id="green">
<input type="button" value="蓝画笔" id="blue">
<input type="button" value="重置颜色" id="default">
<input type="button" value="清除画布" id="clear">
</div>
<script type="text/javascript">
window.onload = function(){
var canvas = document.getElementById("canvas");
canvas.width = window.innerWidth;//canvas的宽高定于屏幕宽高,WHauto;
canvas.height = window.innerHeight;//canvas的宽高定于屏幕宽高,WHauto;
var ctx = canvas.getContext("2d");//获取上下文
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 'red':
ctx.strokeStyle = 'red';
break;
case 'green':
ctx.strokeStyle = 'green';
break;
case 'blue':
ctx.strokeStyle = 'blue';
break;
case 'default':
ctx.strokeStyle = 'black';
break;
case 'clear':
ctx.clearRect(0,0,canvas.clientWidth,canvas.clientHeight);
break;
}
}
}//选择不同的按钮执行不同的strokeStyle
draw();//绘制线条函数
function draw(){
canvas.onmousedown = function(ev){
var ev = ev || event;//兼容火狐
var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;//获取滚动条滚动距离
ctx.beginPath();//上下文绘制路径方法开始
ctx.moveTo(ev.clientX-canvas.offsetLeft,ev.clientY-canvas.offsetTop+scrollTop);
document.onmousemove = function(ev){
var ev = ev || event;//兼容火狐
ctx.lineTo(ev.clientX - canvas.offsetLeft,ev.clientY - canvas.offsetTop+scrollTop);//路径x,y随着鼠标move跟随
ctx.stroke();//上下文结束路径方法
}
document.onmouseup = function(ev){
document.onmousemove = document.onmouseup = null;
ctx.closePath();//结束路径
}
}
}
}
</script>
</body>
</html>
难点主要:
1.兼容火狐
2.获取鼠标相对canvas移动距离(scrollTop也要算进去)
3.事件逻辑
欢迎联系邮箱:[email protected]