前端Canvas学习

用js结合canvas

• canvas是一个画布

  (canvas id="mycanvas" style="background-color: white;">(/canvas>

• 做背景 跟浏览器等宽等高 不用css样式 100% 会变形 需要用js来设置

  var can = document.getElementById("mycanvas")
  var cnx = can.getContext("2d") //getContext() 方法返回一个用于在画布上绘图的环境。
  can.width = window.innerWidth
  can.height = window.innerHeight

• 画圆点

  //画圆  半径小成一个点
  function Cricle(x,y){
    cnx.save()        
    cnx.fillStyle="black"                  //颜色
    cnx.beginPath()                      //开始画
    cnx.arc(x,y,1,0,2*Math.PI,true)        //圆心坐标x,y ,半径,起始角度,终止角度 ,角度,逆/顺时针
    cnx.closePath()
    cnx.fill()
  }

• 运动 + 连线

    // 运动 + 连线
        !function draw(){ //浏览器自动运行这个匿名函数的，因为!+()这些符号的运算符是最高的，所以会先运行它们后面的函数
            cnx.clearRect(0,0,can.width,can.height)
            for(var i = 0 ; i < nums;i++){
                //如果到了边界取反
                if(date[i].x<0||date[i].x>can.width)date[i].cx *= -1;
                if(date[i].y<0||date[i].y>can.height)date[i].cy *= -1;
  
                date[i].x += date[i].cx
                date[i].y += date[i].cy
                Cricle(date[i].x,date[i].y)
                // 连接相邻的星星
                link(date[i].x, date[i].y)
            }
            setInterval(function(){
                draw();
            },10) 
        }();
        function link(x,y){
            for (var i = 0 ; i <nums ; i++) {  //找出附近谁跟自己最近
                var distance = Math.pow(Math.pow((x - date[i].x), 2) + Math.pow((y - date[i].y), 2), 0.5)
                if(distance < 50){
                    cnx.save()
                    cnx.beginPath()
                    cnx.moveTo(x,y)  //画笔移动到某处
                    cnx.lineTo(date[i].x,date[i].y) //与某点相连
                    cnx.strokeStyle = "#333333"
                    cnx.lineWidth = "0.3"
                    cnx.stroke()
                    cnx.restore()
                }
            }
        }

  鼠标事件

  can.addEventListener("mousemove",function(e){
            date.pop();
            date.push({
                x:e.clientX,
                y:e.clientY,
                cx:0,
                cy:0
            })
            link(e.clientX, e.clientY)
        })

  函数

  beginPath() 开始路径
  closePath() 闭合路径
  moveTo(x,y)将触笔移动到x,y点
  lineTo(x,y)绘制到x,y点
  stroke() 触笔方法画线 默认为黑色
  fill()填充方法
  rect(x,y,w,h)矩阵路径
  save()保存路径
  restore() 恢复路径

挺好的按钮样式