【javascript30】Day5------Fun with HTML5 canvas_综合

效果图如下：
在这里插入图片描述
最终的效果就是可以在页面上按照自己想要的线风格画图~

那这个效果是怎么做出来的呢？

首先，我们需要先了解一下canvas，可以参考下面这个博客：
(6条消息) Canvas 设置样式 lineWidth、lineCap、lineJoin、strokeStyle、fillStyle、setLineDash、getLineDash、lineDashOffset…_DevOps海洋的渔夫@专栏-CSDN博客

知道上面这些内容后，这个效果的实现就变得很简单了，因为canvas本身就可以供给我们作图，如果想要实现上面的效果我们只需要改变一些属性、样式就可以了~

接着，我们按照步骤来讨论实现：

首先，我们需要获取canvas标签，然后通过canvas的getContext(‘2d’)获取作图环境box，设置box的起始属性 box.lineWidth=50; box.lineJoin='round'; box.lineCap='round';（这些属性可以参考刚刚推荐的博客中的讲解）
因为我们需要从鼠标点击处开始作画，所以当鼠标开始移动时，我们需要获取鼠标的起始位置[lastX,lastY]，当鼠标不断移动时，我们开始绘图：（1）调用box的beginPath()表示开始作图（2）调用box的moveTo(lastx,lasty)表示我们的作图从该点开始（3）调用box的lineTo(e.offsetX,e.offsetY)表示我们画的线需要移动到该点[e.offsetX,e.offsetY]。这个e代表什么呢？它表示鼠标的移动函数传入的事件参数，可以通过该事件获取鼠标不断移动过程中的位置坐标。（4）最后调用box.stroke()表示开始画图。这样呢，我们基本的绘图就结束了~
接着，我们可以稍微完善一下我们的作图，比如在鼠标移动过程中修改线宽度，这个效果呢，可以通过设置一个变量dir，当dir为true时，令线宽度++，dir为false时，令线宽度–，那么什么时候修改dir呢？我们可以根据自己的喜好，当线宽度大于某一值或者小于某一值时，修改dir为!dir，这样就可以使改变不停的进行啦

其实这个效果的实现，首先需要了解canvas的基本属性，接着多加揣摩实现思路、过程就好啦，代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>html,body{
    margin:0;}</style>
</head>
<body><canvas id="can"></canvas><script>let can=document.getElementById("can");let box=can.getContext('2d');//记住这儿用window.innerWidthcan.width=window.innerWidth;can.height=window.innerHeight;let draw=false;let lastx=0,lasty=0;let num=0;let dir=true;box.lineWidth=50;box.lineJoin='round';box.lineCap='round';function fun(e){
    if(!draw){
    return}box.strokeStyle=`hsl(${
      num},100%,50%)`;box.beginPath();box.moveTo(lastx,lasty);box.lineTo(e.offsetX,e.offsetY);box.stroke();[lastx,lasty]=[e.offsetX,e.offsetY];num++;if(num>360){
    num=0;}if(box.lineWidth>=100 || box.lineWidth<=1){
    //这个地方的值只能大于等于线的初值，才会只进去一次，修改dir，否则会不停进入，不会产生效果// console.log("@@@")dir=!dir;}if(dir){
    box.lineWidth++;}else{
    box.lineWidth--;}}can.addEventListener("mousemove",fun);can.addEventListener("mousedown",(e)=>{
    draw=true;lastx=e.offsetX;lasty=e.offsetY;});can.addEventListener("mouseup",()=>{
    draw=false})can.addEventListener("mouseout",()=>{
    draw=false})</script>
</body>
</html>