<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<canvas id="canvas" style="display: block;margin:10px auto;border:5px solid red">
您的浏览器可能不支持canvas，请更换后重试~
</canvas>
<div style="margin:0 auto;text-align: center">
<button id="a0" style="background:black;width:30px;height:30px;"></button>
<button id="a1" style="background:yellow;width:30px;height:30px;"></button>
<button id="a2" style="background:blue;width:30px;height:30px;" ></button>
<button id="a3" style="background:gray;width:30px;height:30px;"></button>
<button id="a4" style="background:red;width:30px;height:30px;"></button>
<button id="a5" style="background:green;width:30px;height:30px;"></button>
<button id="clear">清除</button>
</div>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');
var isMouseDown = false;
var lastloc = {x:0,y:0};
var lastTimeStamp = 0;
var lastLineWidth =-1;
var lineColor = 'black';
window.onload=function(){
canvas.width=600;
canvas.height=600;
drawBG();
document.getElementById("a0").onclick=function(){
lineColor = 'black';
}
document.getElementById("a1").onclick=function(){
lineColor = 'yellow';
}
document.getElementById("a2").onclick=function(){
lineColor = 'blue';
}
document.getElementById("a3").onclick=function(){
lineColor = 'gray';
}
document.getElementById("a4").onclick=function(){
lineColor = 'red';
}
document.getElementById("a5").onclick=function(){
lineColor = 'green';
}
document.getElementById("clear").onclick=function(){
ctx.clearRect(0,0,canvas.width,canvas.height);
drawBG();
};
}
function windowToCanvas(x,y){
var bbox = canvas.getBoundingClientRect();
return {x:Math.round(x-bbox.left),y:Math.round(y-bbox.top)};
}
canvas.onmousedown=function(e){
e.preventDefault();
isMouseDown = true;
//console.log("mousedown");
lastloc = windowToCanvas(e.clientX,e.clientY);
lastTimeStamp = new Date().getTime()
}
canvas.onmouseup=function(e){
e.preventDefault();
isMouseDown = false;
//console.log("mouseup");
}
canvas.onmouseout=function(e){
e.preventDefault();
isMouseDown = false;
//console.log("mouseout");
}
canvas.onmousemove=function(e){
e.preventDefault();
if(isMouseDown){
//console.log("mousemove");
var curloc = windowToCanvas(e.clientX,e.clientY);
//draw
var curTimeStamp = new Date().getTime();
var s = calcDistance(lastloc,curloc);
var t =curTimeStamp-lastTimeStamp;
var lineWidth=calcLineWidth(s,t);
ctx.beginPath();
ctx.moveTo(lastloc.x,lastloc.y);
ctx.lineTo(curloc.x,curloc.y);
ctx.lineWidth = lineWidth;
ctx.lineCap = "round";
ctx.lineJoin = "round";
ctx.strokeStyle = lineColor;
ctx.stroke();
lastloc = curloc;
lastTimeStamp = curTimeStamp;
lastLineWidth = lineWdth;
}
}
function calcDistance(loc1,loc2){
return Math.sqrt((loc2.x-loc1.x)*(loc2.x-loc1.x)+(loc2.y-loc1.y)*(loc2.y-loc1.y));
}
var maxLineWidth = 20;
var minLineWidth = 1;
var maxSpeed = 10 ;
var minSpeed = 0.1;
function calcLineWidth(s,t){
var v=s/t;
var resultLineWidth;
if(v<=minSpeed){
resultLineWidth = maxLineWidth;
}else if(v>maxSpeed){
resultLineWidth = minLineWidth;
}else{
resultLineWidth = maxLineWidth-(v-minSpeed)/(maxSpeed-minSpeed)*(maxLineWidth-minLineWidth);
}
if(lastLineWidth==-1){
return resultLineWidth;
}else{
return lastLineWidth*2/3 + resultLineWidth/3
}
}
function drawBG(){
ctx.save();
ctx.beginPath();
ctx.lineWdth=2;
ctx.strokeStyle="red";
ctx.moveTo(0,0);
ctx.lineTo(canvas.width,canvas.height);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(canvas.width/2,0);
ctx.lineTo(canvas.width/2,canvas.height);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(canvas.width,0);
ctx.lineTo(0,canvas.height);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(0,canvas.height/2);
ctx.lineTo(canvas.width,canvas.height/2);
ctx.stroke();
ctx.restore();
}
</script>
</body>
</html>
添加回答
举报
0/150
提交
取消