<!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>
canavs學(xué)寫一個字按清除鍵為什么出現(xiàn)這種樣子呢？怎么解決呢？
realwds
2017-11-25 13:36:02
