canvas简易画板

Xuanmo  发表于: 2016-10-24 22:31:51  分类: 实战案例  3352  12

路径移动部分代码:


    canvas.onmousedown = function(ev){
      ev = ev || window.event;
      _x = ev.clientX , _y = ev.clientY;
      // 路径开始
      cxt.beginPath();
      cxt.moveTo(_x - canvas.offsetLeft , _y - canvas.offsetTop);
      this.onmousemove = function(ev){
        ev = ev || window.event;
        x = ev.clientX , y = ev.clientY;
        // 路径移动
        cxt.lineTo(x - canvas.offsetLeft , y - canvas.offsetTop);
        cxt.stroke();
      }
      // 路径结束
      this.onmouseup = function(){
        this.onmousemove = null;
      }
    }
    clear.onclick = function(){
      cxt.clearRect(0,0,canvas.width,canvas.height);
    }

DEMO展示

  • 22人 Love
  • 0人 Haha
  • 1人 Wow
  • 0人 Sad
  • 0人 Angry
canvas、canvas画板

作者简介:Xuanmo

打赏

生命的意义在于折腾。

共 12 条评论关于 “canvas简易画板”