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

特此记录留着以后用，看来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. 洛谷P2320鬼谷子的钱袋.

    题目 这个题考察二进制分解. \(Code\) #include <bits/stdc++.h> #pragma GCC optimize(2) #pragma GCC optimize( ...

  2. CH0802 占卜DIY

    模拟 没怎么看题..直接deque模拟水过了.. 但是后来回过头看了下题意..如果再次拿到正面朝上的牌,应该是废操作..可能是数据太水了... #include <bits/stdc++.h&g ...

  3. 【XSY1551】往事 广义后缀数组 线段树合并

    题目大意 给你一颗trie树,令\(s_i\)为点\(i\)到根的路径上的字符组成的字符串.求\(max_{u\neq v}(LCP(s_u,s_v)+LCS(s_u,s_v))\) \(LCP=\) ...

  4. 将xml文件由格式化变为压缩字符串

    标签:去除xml文件的空格 有些时候解析xml文件,要求读取的字符串必须是压缩后的xml文件,不能有多余的空格.考虑到在<>标签内包含空格和大于号的情况,写了以下的转换方式. 传入的是压缩 ...

  5. MT【169】拉格朗日配方

    已知$x^2+y^2+z^2=1$求$3xy-3yz+2z^2$的最大值______ 答案:$3$ 提示:$3(x^2+y^2+z^2)-(3xy-3yz+2z^2)=3\left(y+\dfrac{ ...

  6. yarn如何全局安装命令以及和环境变量的关系

    npm全局安装 npm i -g xxx yarn 全局安装 yarn global add xxx 然而你可能会发现npm全局安装后的命令可以直接使用,而yarn却不行,这是为什么呢? 我们来查看下 ...

  7. [luogu3620][APIO/CTSC 2007]数据备份【贪心+堆+链表】

    题目描述 你在一家 IT 公司为大型写字楼或办公楼(offices)的计算机数据做备份.然而数据备份的工作是枯燥乏味的,因此你想设计一个系统让不同的办公楼彼此之间互相备份,而你则坐在家中尽享计算机游戏 ...

  8. asp.net处理事件

    从来不用也从来不研究这事件.但为了写那种CGI式的接口不得已研究一下. 环境  W10 VS2017 测试方法:写一个实现IHttpModule接口的类,在Init方法中加载所有事件然后打出日志,看看 ...

  9. 用foobar进行码率转换 适用与sacd-r转成低码率

    之前下载了不少高清音频,有黑胶转录的也有母带文件.这些高清音频大都是24bit,采样率96khz或者88.2khz或者更高.而我想将部分精品专辑刻录成cd.首先我需要将这些文件转换为16bit,44. ...

  10. A1030. Travel Plan

    A traveler's map gives the distances between cities along the highways, together with the cost of ea ...