学习一个字

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>学习一个字</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>

<canvas id="canvas"></canvas>

<!--按钮-->
<div id="command">
  <div class="color"></div>
  <div class="color"></div>
  <div class="color"></div>
  <div class="color"></div>
  <button class="button" id="restore"></button>
</div>

<script src="script.js"></script>

</body>
</html>

@charset "UTF-8";

body {
  background: #f8f8f8;
}
canvas{
  display: block;
  margin: 0 auto;
  max-height: 90vw;
  max-width: 90vw;
  
}

#command{
  margin: 5px;
}

#restore{
  text-align: left;
  
}

.color{
  float: left;
  margin: 4px;
  height: 40px;
  width: 40px;
  border-radius: 5px;
}
.button{
  float: right;
  height: 40px;
  width: 100px;
  border-radius: 5px;
}






const CANVAS_LENGTH=innerWidth*0.9*2;

const canvas=document.querySelector("#canvas")
const cxt=canvas.getContext("2d");

canvas.height=canvas.width=CANVAS_LENGTH;

var writing=false;

var lastLoc={x:0,y:0};
var curLoc={x:0,y:0};

var lastTime=0;
var curTime=0;

var lastWidth=-1;

//画背景
function drawGrid(){
  cxt.save();
  cxt.strokeStyle="red";

  cxt.beginPath();
  cxt.lineWidth=4;
  cxt.moveTo(6,6);
  cxt.lineTo(CANVAS_LENGTH-6,6);
  cxt.lineTo(CANVAS_LENGTH-6,CANVAS_LENGTH-6);
  cxt.lineTo(6,CANVAS_LENGTH);
  cxt.closePath();
  cxt.stroke();
  
  cxt.beginPath();
  cxt.lineWidth=2;
  cxt.setLineDash([10]);

  cxt.moveTo(6,CANVAS_LENGTH/2);
  cxt.lineTo(CANVAS_LENGTH-6,CANVAS_LENGTH/2);

  cxt.moveTo(CANVAS_LENGTH/2,6);
  cxt.lineTo(CANVAS_LENGTH/2,CANVAS_LENGTH-6);

  cxt.moveTo(6,6);
  cxt.lineTo(CANVAS_LENGTH-6,CANVAS_LENGTH-6);

  cxt.moveTo(CANVAS_LENGTH-6,6);
  cxt.lineTo(6,CANVAS_LENGTH-6);

  cxt.stroke();

  cxt.restore();
}
//获取canvas坐标
function pageToCanvas(x,y){
  var left=canvas.getBoundingClientRect().left
  var top=canvas.getBoundingClientRect().top
  return {
    x:Math.ceil((x-left)*2),
    y:Math.ceil((y-top)*2)};
  
}

//获取两点距离
function getDistance(a,b){
  var dx=Math.abs(a.x-b.x);
  var dy=Math.abs(a.y-b.y);
  //使用了勾股定理,sqart就是求平方根
  var ruselt=Math.sqrt(dx*dx+dy*dy);
  return ruselt;
}

//根据速度求出粗度
function getWidth(v){
  var result=0;

  if(v >= 10){
    result=1;
  }else if(v<=0.1){
    result=30;
  }else{
    result=30-(v-0.1)/(10-0.1)*(30-1);
  }
  //平滑处理
  if(lastWidth===-1)
    return result;
  return lastWidth*3/4+result*1/4;
}

drawGrid();
cxt.lineWidth=12;
cxt.lineCap="round";
cxt.lineJoin="round";

canvas.ontouchstart=function(e){
  e.preventDefault();
  writing=true;
  var touch=e.touches[0];
  var {x,y}=pageToCanvas(touch.pageX,touch.pageY);
  lastLoc={x,y};
  lastTime=new Date().getTime();
  
};
canvas.ontouchmove=function(e){
  e.preventDefault();
  if(writing){
    var touch=e.touches[0];

    var {x,y}=pageToCanvas(touch.pageX,touch.pageY)

    curLoc={x:x,y:y};
 
    curTime=new Date().getTime();
    var s=getDistance(curLoc,lastLoc);
    var t=curTime-lastTime;
    var width=getWidth(s/t);

    cxt.beginPath();
    cxt.lineWidth=width;
    cxt.moveTo(lastLoc.x,lastLoc.y);
    cxt.lineTo(curLoc.x,curLoc.y);
    cxt.stroke();

    //维护
    lastLoc=curLoc;
    lastTime=curTime;
    lastWidth=width;
  }
};
canvas.ontouchend=function(e){
  e.preventDefault();
  writing=false;
};
canvas.ontouchcancel=function(e){
  e.preventDefault();
  writing=false;
};

//处理按钮
var color=document.querySelectorAll(".color");
//颜色
var colorList=["black","red","blue","green"];

for(var i=0;i<color.length;i++){
  color[i].style.backgroundColor=colorList[i];
  //这里是为了解决闭包问题
  (function(i){
  color[i].onclick=function(e){
    e.preventDefault();
    cxt.strokeStyle=colorList[i];
  };})(i);
}

//清空
var restore=document.querySelector("#restore")

restore.textContent="清空";
restore.style.fontSize="1.4em";

restore.onclick=function(e){
  e.preventDefault();
  cxt.clearRect(0,0,CANVAS_LENGTH,CANVAS_LENGTH)
  drawGrid();
};



Full page Open in App

13 days ago

Pages


comments powered by Disqus