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

特此记录留着以后用，看来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. LOJ6436 [PKUSC2018] 神仙的游戏 【FFT】

    题目分析: 题目要求前后缀相同,把串反过来之后是一个很明显的卷积的形式.这样我们可以完成初步判断(即可以知道哪些必然不行). 然后考虑一下虽然卷积结果成立,但是存在问号冲突的情况. 箭头之间应当不存在 ...

  2. JOI 2018 Final 题解

    题目列表:https://loj.ac/problems/search?keyword=JOI+2018+Final T1 寒冬暖炉 贪心 暴力考虑每相邻两个人之间的间隔,从小到大选取即可 #incl ...

  3. wstngfw openVpn站点到站点连接示例（共享密钥）

    wstngfw openVpn站点到站点连接示例(共享密钥) 在本例中,将假设以下设置: 站点 A 站点 B 名称 Beijing Office(北京办公室) 名称 Shenzheng Office( ...

  4. windows 系统错误码总结

    windows 错误码大全: 操作成功完成. 功能错误. 系统找不到指定的文件. 系统找不到指定的路径. 系统无法打开文件. 拒绝访问. 句柄无效. 存储控制块被损坏. 存储空间不足,无法处理此命令. ...

  5. SDOI2017 Round1 简要题解

    我们 TM 怎么又要上文化课..我 哔哔哔哔哔哔 「SDOI2017」数字表格 题意 有 \(T\) 组数据,求 \[ \prod_{i = 1}^{n} \prod_{j = 1}^{m} fib[ ...

  6. JVM体系结构概述

    ClassLoader(类装载器) 负责加载class文件. class文件在文件开头有特定的文件标示,并且ClassLoader只负责class文件的加载,至于它是否可以运行,则由Execution ...

  7. FLAG区

    以下是一些flag(倒了我也不会怎么样): 更博客(对不起 您呼叫的flag是空号 请稍后再拨) CTS/APIO2019 Cu+ NOI2019 Ag+

  8. [CF438D]The Child and Sequence【线段树】

    题目大意 区间取模,区间求和,单点修改. 分析 其实算是一道蛮简单的水题. 首先线段树非常好解决后两个操作,重点在于如何解决区间取模的操作. 一开始想到的是暴力单点修改,但是复杂度就飙到了\(mnlo ...

  9. ELK部署详解--elasticsearch

    #Elasticsearch 是一个实时的分布式搜索和分析引擎,它可以用于全文搜索,结构化搜索以及分析.它是一个建立在全文搜索引擎 Apache Lucene 基础上的搜索引擎,使用 Java 语言编 ...

  10. centos7安装部署本地局域网yum源

    应用场景: 当Linux系统都是最小化安装的系统,又无法做到每台都能访问外网的情况下,安装常用工具或者依赖包的最好办法可能就是建立本地yum源了. 安装环境: 一台 centos 7.4 minima ...