用mouse，touch制作画板
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Drawing Board</title>
<link rel="stylesheet" type="text/css" href="css/DrawingBoard.css"/>
<script src="js/DrawingBoard.js" type="text/javascript" charset="utf-8"></script>
<!--使用远程链接导入font awesome图标-->
<script type="text/javascript" src="//at.alicdn.com/t/font_1394523_6svr7kbd0pp.js"></script>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<canvas id="mycanvas" <!--width="500px" height="500px"-->></canvas>
<div id="toolBars">
<svg id="pen1"class="icon" aria-hidden="true">
<use xlink:href="#icon-Pen"></use>
</svg>
<svg id="pen2" class="icon" aria-hidden="true">
<use xlink:href="#icon-pen"></use>
</svg>
<svg id="pen3" class="icon" aria-hidden="true">
<use xlink:href="#icon-pen1"></use>
</svg>
<svg id="eraser" class="icon" aria-hidden="true">
<use xlink:href="#icon-eraser"></use>
</svg>
<svg id="del" class="icon" aria-hidden="true">
<use xlink:href="#icon-del"></use>
</svg>
<svg id="red" class="icon" aria-hidden="true">
<use xlink:href="#icon-color-red"></use>
</svg>
<svg id="yellow" class="icon" aria-hidden="true">
<use xlink:href="#icon-color-yellow"></use>
</svg>
<svg id="blue" class="icon" aria-hidden="true">
<use xlink:href="#icon-color-blue"></use>
</svg>
<svg id="black" class="icon" aria-hidden="true">
<use xlink:href="#icon-black"></use>
</svg>
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,body{
width: 100%;
height: 100vh;
/*border: 5px solid green;*/
position: absolute;
overflow: hidden;
}
::before{
box-sizing: border-box;
}
::after{
box-sizing: border-box;
}
#mycanvas{
display: block;
background: darkgray;
}
#toolBars{
width:50px;
height: 70%;
/*border: 2px solid red;*/
border-radius:10px;
position: fixed;
top: 15%;
left: 0px;
background: white;
}
#toolBars>svg{
display: block;
margin:20px auto;
}
#toolBars>.icon {
width: 2em;
height: 2em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
/*border: 2px solid black;*/
}
window.onload=function(){/*当文档加载时运行*/
var canvas=document.getElementById("mycanvas");
var context=canvas.getContext('2d');
pageSize();/*设置窗口大小*/
window.onresize=function(){/*调整窗口大小时运行*/
pageSize();
}
function pageSize(){/*设置页面大小*/
/*返回文档的根节点：document.documentElement*/
/*确定浏览器窗口的尺寸*/
/*第一种方法*/
/*var pageWhite=document.documentElement.clientWidth;
var pageHeight=document.documentElement.clientHeight;
*/
/*第二种方法*/
var pageWhite=document.body.clientWidth;
var pageHeight=document.body.clientHeight;
canvas.width=pageWhite;
canvas.height=pageHeight;
}
function drawLine(startX,startY,endX,endY){
context.beginPath();
/*context.strokeStyle='black'*/
context.moveTo(startX,startY);/*开始的点*/
/*context.lineWidth=5;*/
context.lineTo(endX,endY);/*结束的点*/
context.stroke();
context.closePath();
}
function changeStyle(id){
context.strokeStyle=$(id).attr("id");/*获得当前元素的id*/
context.fillStyle=$(id).attr("id");
}
var Paintbrush=false;/*画笔失活*/
var startPoint={X:undefined,Y:undefined}/*开始的坐标*/
var endPoint={X:undefined,Y:undefined}/*结束的坐标*/
if(document.body.ontouchstart!==undefined){
canvas.ontouchstart=function(start){/*触摸开始*/
Paintbrush=true;/*激活画笔*/
var x=start.touches[0].clientX;
var y=start.touches[0].clientY;
startPoint={X:x,Y:y}
}
canvas.ontouchmove=function(move){/*触摸移动*/
if(Paintbrush===true){/*激活画笔*/
var x=move.touches[0].clientX;
var y=move.touches[0].clientY;
endPoint={X:x,Y:y}
drawLine(startPoint.X,startPoint.Y,endPoint.X,endPoint.Y);
startPoint=endPoint;
}
}
canvas.ontouchend=function(end){/*触摸结束*/
Paintbrush=false;/*画笔失活*/
}
}else{
canvas.onmousedown=function(down){/*鼠标按下去*/
Paintbrush=true;/*激活画笔*/
var x=down.clientX;
var y=down.clientY;
startPoint={X:x,Y:y}
}
canvas.onmousemove=function(move){/*鼠标移动*/
if(Paintbrush===true){/*激活画笔*/
var x=move.clientX;
var y=move.clientY;
endPoint={X:x,Y:y}
drawLine(startPoint.X,startPoint.Y,endPoint.X,endPoint.Y);
startPoint=endPoint;
}
}
canvas.onmouseup=function(up){/*松开鼠标*/
Paintbrush=false;/*画笔失活*/
}
}
$("#pen1").click(function(){
context.lineWidth=2;
if(usingEraser===true){
changeStyle("#black");
usingEraser=!usingEraser;
}
$(this).css({"border":"2px solid gray"}).siblings().css({"border":"0px solid gray"});
});
$("#pen2").click(function(){
context.lineWidth=5;
if(usingEraser===true){
changeStyle("#black");
usingEraser=!usingEraser;
}
$(this).css({"border":"2px solid gray"}).siblings().css({"border":"0px solid gray"});
});
$("#pen3").click(function(){
context.lineWidth=8;
if(usingEraser===true){
changeStyle("#black");
usingEraser=!usingEraser;
}
$(this).css({"border":"2px solid gray"}).siblings().css({"border":"0px solid gray"});
});
var usingEraser=false;
$("#eraser").click(function(){
context.lineWidth=10;
context.strokeStyle=$("#mycanvas").css("background-color");
context.fillStyle=$("#mycanvas").css("background-color");
$(this).css({"border":"2px solid gray"}).siblings().css({"border":"0px solid gray"});
usingEraser=true;
});
$("#del").click(function(){
parent.location.reload();/*parent.location.reload()刷新父亲对象（用于框架）*/
$(this).css({"border":"2px solid gray"}).siblings().css({"border":"0px solid gray"});
});
$("#red").click(function(){
changeStyle(this);
$(this).css({"border":"2px solid gray"}).siblings().css({"border":"0px solid gray"});
});
$("#yellow").click(function(){
changeStyle(this);
$(this).css({"border":"2px solid gray"}).siblings().css({"border":"0px solid gray"});
});
$("#blue").click(function(){
changeStyle(this);
$(this).css({"border":"2px solid gray"}).siblings().css({"border":"0px solid gray"});
});
$("#black").click(function(){
changeStyle(this);
$(this).css({"border":"2px solid gray"}).siblings().css({"border":"0px solid gray"});
});
}
711
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
