https://www.xuanmo.xin/1260.html

canvas简易画板

发布于 分类: Html5 & CSS3案例 12 2182

路径移动部分代码:


    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展示

作者专栏:Xuanmo

前端爱好者,热爱前端开发,欢迎和我成为朋友。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

https://www.xuanmo.xin/wp-content/themes/xuan/expression.php
表情
贴图
表情加载中...

换一张

已经没有了!