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

canvas简易画板

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

路径移动部分代码:


    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
表情
贴图
表情加载中...

换一张

  • 徐永彬 北京市海淀区 联通

    回复

    你用的是ajax交互?

    • xuanmo 北京市 鹏博士长城宽带

      回复

      @徐永彬 交互用的都是wordpress的方法

  • 至尊宝 江苏省南京市 河海大学

    回复

    学长,你这个博客用的什么主题呀,,, /坏笑 /坏笑 /坏笑

  • 至尊宝 江苏省南京市 河海大学

    回复

    学长好,,, /吐舌头 /吐舌头 /吐舌头

  • QQ-85630782 浙江省杭州市 阿里云BGP数据中心

    回复

    学习带来乐趣,谢谢博主!

  • 孕妇护肤品 山西省晋中市 联通

    回复

    高端大气 网站很不错

  • xmoz 北京市 鹏博士长城宽带

    回复

    很不错哦 /你懂的

已经没有了!