瞎整本来是要点击编辑多张图片的，没想到弄成这样。这不是电视剧里的降龙十八掌吗

特此记录留着以后用，看来canvas做游戏特效都不错啊。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        body,div{

            margin:;

            padding:;

        }

        #d1{

            width:500px;

            height: 400px;

            border: 2px solid #00FFD1;

        }

    </style>

</head>

<body>

<script src="js/jquery-3.3.1.min.js"></script>

<div id="d1">

    <canvas id="myCanvas" width="" height="">

        <p>您的系统不支持此程序!</p>

    </canvas>

</div>

<img src="data:images/boss.png" alt="test01" id="img01" />

<img src="data:images/weixin.png" alt="test01" id="img02" />

<script>

    var canva=document.getElementById("myCanvas");

    var cansText=canva.getContext("2d");

    var imgs=new Array("images/boss.png","images/weixin.png");

    var img;

    var draw=new Array();

    var i=;

    $('#img01').on('click', function(){

        cansText.save();

        cansText.beginPath();

        img = new Image();

        img.src=imgs[];

        cansText.drawImage(img,,,,);

        cansText.closePath();

        cansText.fill();

        cansText.restore();

    });

    $('#img02').on('click', function(){

        cansText.save();

        cansText.beginPath();

        img = new Image();

        img.src=imgs[];

        cansText.drawImage(img,,,,);

        cansText.closePath();

        cansText.fill();

        cansText.restore();

    });

    ini();

    function ini(){

        img = new Image();

        img.src=imgs[];

        draw[i]=img;

        cansText.drawImage(draw[i],,,,);

    }

    //在事件外声明需要用到的变量

    let ax,ay,x,y;

    canva.onmousedown=function (e) {

        canva.onmousemove = function(e){

            x= e.clientX;y=e.clientY;

            //限制移动不能超出画布

            (x<)? ax= : ax=;

            (y<)? ay= : ay=;

            (x <  && x >)? x =e.clientX : x =ax;

            (y >  && y <) ? y=e.clientY : y=ay;

            //先清除之前的然后重新绘制,关键

           // cansText.clearRect(0,0,canva.width,canva.height);

            cansText.drawImage(img,x-,y-,,);

        };

        canva.onmouseup = function(){

            canva.onmousemove = null;

            canva.onmouseup = null;

        };

    }

</script>

</body>

</html>

canvas意料之外获得降龙十八掌的效果的更多相关文章

  1. HTML5在canvas中绘制复杂形状附效果截图

    HTML5在canvas中绘制复杂形状附效果截图 一.绘制复杂形状或路径 在简单的矩形不能满足需求的情况下,绘图环境提供了如下方法来绘制复杂的形状或路径. beginPath() : 开始绘制一个新路 ...

  2. 经典！HTML5 Canvas 模拟可撕裂布料效果

    这是一个模拟可撕裂布料效果的 HTML5 Canvas 应用演示,效果逼真.你会看到,借助 Canvas 的强大绘图和动画功能,只需很少的代码就能实现让您屏息凝神的效果. 温馨提示:为保证最佳的效果, ...

  3. 用HTML5 Canvas 做擦除及扩散效果

    2013年的时候曾经使用canvas实现了一个擦除效果的需求,即模拟用户在模糊的玻璃上擦除水雾看到清晰景色的交互效果.好在2012年的时候学习HTML5的时候研究过canvas了,所以在比较短的时间内 ...

  4. 浅谈canvas中的拖尾效果

    引言 很早就想了解以下 canvas 中的拖尾效果(如彗星,烟花等效果)是怎么实现的,但是一直没有深入了解,正巧在 codepen 上看到一个 demo,代码简单,效果炫酷,故有此文. 什么黑科技 在 ...

  5. 基于canvas的原生JS时钟效果

    概述 运用html5新增画布canvas技术,绘制时钟效果,无需引用任何插件,纯js. 详细 代码下载:http://www.demodashi.com/demo/11935.html 给大家介绍一个 ...

  6. canvas实现刮刮卡效果

    canvas实现刮刮卡效果 实现步骤: 设置页面背景图,即刮刮卡底部图片 绘制canvas 刮刮卡顶部图片drawImage 绑定事件 addEventListener  touchstart.tou ...

  7. canvas实现酷炫气泡效果

    canvas实现动画主要是靠设置定时器(setinterval())和定时清除画布里的元素实现,canvas动画上手很简单,今天可以自己动手来实现一个酷炫气泡效果. 气泡炸裂效果(类似水面波纹) 代码 ...

  8. 使用JavaScript和Canvas打造真实的雨滴效果

    使用JavaScript和Canvas打造真实的雨滴效果 寸志 · 1 年前 我最近搞了一个有趣的项目——rainyday.js .我认为这个项目并不怎么样,而且,事实上这是我第一次尝试接触一些比弹窗 ...

  9. vue+canvas实现炫酷时钟效果的倒计时插件（已发布到npm的vue2插件，开箱即用）

    前言: 此事例是在vue组件中,使用canvas实现倒计时动画的效果.其实,实现效果的逻辑跟vue没有关系,只要读懂canvas如何实现效果的这部分逻辑就可以了 canvas动画的原理:利用定时器,给 ...

随机推荐

  1. Kindle支持文档类型

    Kindle支持文档类型 Kindle个人文档服务目前只能转换并发送以下类型的文档:Microsoft Word (.doc, .docx) RTF文件(.rtf) HTML(.htm, .html) ...

  2. 允许外网访问MySQL

    1:设置mysql的配置文件     /etc/mysql/my.cnf     找到 bind-address  =127.0.0.1  将其注释掉://作用是使得不再只允许本地访问:  重启mys ...

  3. 洛谷CF1071E Rain Protection（计算几何，闵可夫斯基和，凸包，二分答案）

    洛谷题目传送门 CF题目传送门 对于这题,我无力吐槽. 虽然式子还是不难想,做法也随便口胡,但是一些鬼畜边界情况就是判不对. 首先显然二分答案. 对于每一个雨滴,它出现的时刻我们的绳子必须落在它上面. ...

  4. 多项式细节梳理&模板（多项式）

    基础 很久以前的多项式总结 现在的码风又变了... FFT和NTT的板子 typedef complex<double> C; const double PI=acos(-1); void ...

  5. HAOI2018 简要题解

    这套题是 dy, wearry 出的.学长好强啊,可惜都 \(wc\) 退役了.. 话说 wearry 真的是一个计数神仙..就没看到他计不出来的题...每次考他模拟赛总有一两道毒瘤计数TAT 上午的 ...

  6. 【Luogu4781】【模板】拉格朗日插值

    [Luogu4781][模板]拉格朗日插值 题面 洛谷 题解 套个公式就好 #include<cstdio> #define ll long long #define MOD 998244 ...

  7. LOJ#6285. 数列分块入门 9

    有点难..... 要求区间众数,所以我可以先把区间分块,然后我预处理出从第 i 块到第 j 块的众数,用dp[i][j]记录下来. 因为需要知道众数的num值, 所以我可以用一个vector来保存每个 ...

  8. LVS+Keepalived搭建高可用负载均衡

    应用环境: LVS负责多台WEB端的负载均衡(LB):Keepalived负责LVS的高可用(HA),这里介绍主备模型. 测试环境: 配置步骤: 1. 安装软件 在LVS-1和LVS-2两台主机上安装 ...

  9. kvm虚拟化管理

    虚拟化 KVM (kernel-based virtual machine) 常见的一些虚拟化的软件xen kvm vmware esx openVZ Oracle VM VirtualBox vsp ...

  10. return break continue的区别 js java

    return :结束函数的执行, return后面的所有代码都不再执行 break: 结束循环, 执行循环后面的代码(如果有的话) continue: 结束本次循环, 循环变量继续递增或递减, 开始下 ...