canvas

最新推荐文章于 2022-12-17 22:13:33 发布

thinkingw770s

最新推荐文章于 2022-12-17 22:13:33 发布

阅读量180

点赞数

本文链接：https://blog.csdn.net/thinkingw770s/article/details/81208181

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>



<canvas id="map" height="800" width="800" style="box-shadow:1px 2px 2px 1px gray ;"></canvas>
<input  type="button" value="点击" id="go">

<script>


      let map=document.getElementById("map");
      let ctx=map.getContext("2d");

      map.onmousedown=function (ev) {
          var event=window.event||ev;
          var left=event.clientX-map.offsetLeft;
          var top=event.clientY-map.offsetTop;
          ctx.beginPath();
          ctx.lineWidth="20";
          ctx.moveTo(left,top);
          map.onmousemove=function (ev) {
              var events=window.event||ev;
              var left1=events.clientX-map.offsetLeft;
              var top1=events.clientY-map.offsetTop;
              ctx.lineTo(left1,top1);
              ctx.stroke();
          }
          map.onmouseup=function () {
              ctx.closePath();
          }
      }


</script>
</body>
</html>

3.可下载的签名板:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<canvas width="500" height="400" id="canvas" style="box-shadow:1px 1px 1px 1px gray;">404</canvas>
<input type="button" value="save" id="input">
<a href=""  id="dian" download="qianming.png">
<img src="" id="tian">


<script>
    let canvas=document.getElementById("canvas");
    let ctx=canvas.getContext("2d");
    let as=document.getElementById("dian");
    let img=document.getElementById("tian");
    let input=document.getElementById("input");

    canvas.οnmοusedοwn=function (ev) {
        let evs=ev||window.evevt;
        let left=evs.clientX-canvas.offsetLeft;
        let top=evs.clientY-canvas.offsetTop;
        ctx.beginPath();
        ctx.lineWidth="5";
        ctx.moveTo(left,top);
        canvas.οnmοusemοve=function (ev) {
            let evss=ev||window.evevt;
            let left1=evss.clientX-canvas.offsetLeft;
            let top1=evss.clientY-canvas.offsetTop;
            ctx.lineTo(left1,top1);
            ctx.stroke();
        };
        canvas.οnmοuseup=function () {
            ctx.closePath();
        };
    };

    input.οnclick=function () {
        let imgs=canvas.toDataURL("image/png");
        as.href=imgs;
        img.src=imgs;
    };
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>



<canvas id="canvas"  width="800" height="800" style="border:1px solid black">遗憾。你的浏览器版本过低</canvas>

<input type="button" id="go" value="stop">


<script>
    let canvas=document.getElementById("canvas");
    let ctx=canvas.getContext("2d");
    let go=document.getElementById("go");
    let can=true;



    go.onclick=function () {
        if(can==true) {
            ctx.clearRect(0, 0, 800, 800);
            ctx.fillStyle = "yellow";
            ctx.strokeStyle = 'black';
            ctx.beginPath();
            ctx.arc(320, 240, 200, 0, Math.PI * 2, false);//在320 和240创建一个半径为200 的起始弧度为0 末尾弧度为360 的园；
            ctx.fill();
            // ctx.stroke();
            ctx.closePath();

            ctx.fillStyle = "white";
            ctx.beginPath();
            ctx.arc(270, 175, 30, 0, Math.PI * 2, true);
            ctx.fill();
            ctx.stroke();
            ctx.closePath();


            ctx.beginPath();
            ctx.arc(380, 175, 30, 0, Math.PI * 2, true);
            ctx.fill();
            ctx.stroke();
            ctx.closePath();

            ctx.fillStyle = "yellow";

            ctx.beginPath();
            ctx.arc(320, 240, 50, 0, -1 * Math.PI, true);
            ctx.fill();
            ctx.stroke();
            ctx.closePath();
            can=false;
        }
        else if(can==false){
            ctx.fillStyle="yellow";
            ctx.strokeStyle='black';
            ctx.beginPath();
            ctx.arc(320,240,200,0,Math.PI*2,false);//在320 和240创建一个半径为200 的起始弧度为0 末尾弧度为360 的园；
            ctx.fill();
            // ctx.stroke();
            ctx.closePath();

            ctx.fillStyle="white";


            ctx.beginPath();
            ctx.arc(270,175,30,0,Math.PI*2,true);
            ctx.fill();
            ctx.stroke();
            ctx.closePath();


            ctx.beginPath();
            ctx.arc(380,175,30,0,Math.PI*2,true);
            ctx.fill();
            ctx.stroke();
            ctx.closePath();

            ctx.fillStyle="yellow";

            ctx.beginPath();
            ctx.arc(320,240,150,0,-1*Math.PI,false);
            ctx.fill();
            ctx.stroke();
            ctx.closePath()
            can=true;
        }
    }
    // 默认是黑色；
    ctx.fillStyle="yellow";
    ctx.strokeStyle='black';
    ctx.beginPath();
    ctx.arc(320,240,200,0,Math.PI*2,false);//在320 和240创建一个半径为200 的起始弧度为0 末尾弧度为360 的园；
    ctx.fill();
    // ctx.stroke();
    ctx.closePath();

    ctx.fillStyle="white";


    ctx.beginPath();
    ctx.arc(270,175,30,0,Math.PI*2,true);
    ctx.fill();
    ctx.stroke();
    ctx.closePath();


    ctx.beginPath();
    ctx.arc(380,175,30,0,Math.PI*2,true);
    ctx.fill();
    ctx.stroke();
    ctx.closePath();

    ctx.fillStyle="yellow";

    ctx.beginPath();
    ctx.arc(320,240,150,0,-1*Math.PI,false);
    ctx.fill();
    ctx.stroke();
    ctx.closePath()





    //set get

    // 1:set：是默认对象出想时就会创建;
    // 2;set：是必须要有的；
    // 3;get改变不了前面的属性

    // class vo{
    //   constructor(name,age){
    //       this.name=name;
    //       this.age=age;
    //          this.rua="rua";
    //
    //   }
    //
    //   set rua(val){
    //          console,log("set rua")
    //   }
    //     get rua(){
    //          this.name="xihonh";
    //console.log("get rua");
    //     }
    // }
    // new vo("kak","13")
    // console.log(rua.name);



   // 2:Symbol;
   //  其特点：
   //  1:不同的字符串;
   //  2:
   //
   // obj={
   //     name:name,
   //     age:age,
   //     symbol:[symbol]//访问变量的方式[];
   // }
   // new obj()



    //3:工厂模式
    // function person(name,age,skill) {
    //     var o=new Object();
    //     o.name=name;
    //     o.age=age;
    //     o.skill=skill;
    //
    //     o.sayName=function () {
    //         alert(this.name)
    //     }
    //
    //     return o;
    // }
    //
    // var person1=person("liming","18","swim");
    // var person2=person("ac","18","run");
    // console.log(person1 instanceof Object);
    // console.log(person1.sayName() == person2.sayName());


    // 3;posmise();M, 9


</script>
</body>
</html>