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

特此记录留着以后用，看来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. [NOIP2017] 宝藏 【树形DP】【状压DP】

    题目分析: 这个做法不是最优的,想找最优解请关闭这篇博客. 首先容易想到用$f[i][S][j]$表示点$i$为根,考虑$S$这些点,$i$的深度为$j$情况的答案. 转移如下: $f[i][S][j ...

  2. Machine Schedule POJ - 1325(水归类建边)

    Machine Schedule Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 17457   Accepted: 7328 ...

  3. Python 面试题_未完

    基础部分 1. 为什么学习Python 家里有在这个IT圈子里面,也想让我接触这个圈子,然后给我建议学的Python, 然后自己通过百度和向有学过Python的同学了解了Python,Python这门 ...

  4. opencv图像融合（给人脸添加一个眼镜）

    基于dlib68点人脸检测的小功能实现 图像旋转找的现成的方法,稍稍麻烦点的地方就是mask处理,虽然目的达到了,但是效果一般 import numpy as np import cv2 as cv ...

  5. 【HDU-6146】Pokémon GO（dp）

    百度之星2017复赛1003 HDU-6146 Pokémon GO 题意 两行n列,只能到相邻格子,可以斜着.求遍历的方案数. 题解 dp[i]从一个点出发遍历长度i最后回到这一列的方案数 dp2[ ...

  6. Hdoj 2018.母牛的故事 题解

    Problem Description 有一头母牛,它每年年初生一头小母牛.每头小母牛从第四个年头开始,每年年初也生一头小母牛.请编程实现在第n年的时候,共有多少头母牛? Input 输入数据由多个测 ...

  7. 【BZOJ1152】歌唱王国（生成函数，KMP）

    [BZOJ1152]歌唱王国(生成函数,KMP) 题面 BZOJ 洛谷 题解 根据\(YMD\)论文来的QwQ. 首先大家都知道普通型生成函数是\(\displaystyle \sum_{i=0}^{ ...

  8. mac上安装ta-lib

    Now I am ready to start installing TA-Lib. Generally I followed the steps listed in here. 1. Install ...

  9. mysql5.6做单向主从复制Replication

    原理场景:MySQL从3.23版本开始提供复制功能.指的是将主数据库的DDL和DML操作通过二进制日志传到从服务器(也叫从库),然后在从库上对这些日志重新执行, 从而使得从库和主库的数据保持同步. 优 ...

  10. Tutorial: Build a Spring WebMVC App with Primefaces

    Tutorial: Build a Spring WebMVC App with Primefaces by Team Stormpath | September 7, 2016 | Java Pri ...