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

特此记录留着以后用，看来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. BZOJ2809 dispatching 【可并堆】

    题目分析: yy一下就知道了,合并用可并堆少个log. 代码: #include<bits/stdc++.h> using namespace std; ; int n,m; int b[ ...

  2. 用Python爬取"王者农药"英雄皮肤 原

    padding: 10px; border-bottom: 1px solid #d3d3d3; background-color: #2e8b57; } .second-menu-item { pa ...

  3. 「SPOJ6340」「BZOJ1939」ZUMA - ZUMA【记忆化搜索】

    题目链接 [洛谷传送门] 题解 \(f[i][j][k]\)表示在消除了\((i,j)\),在后面加上了\(k\)个珠子的总的珠子数. 考虑三种决策:(题目给出的\(k\)在下文表示成\(K\)) 决 ...

  4. C#解决方案生成工具(2)

    环境  VS2017 社区版 W10 Project类 : 在Microsoft.Build.Evaluation命名空间下,可使用Project类分析项目的.csproj文件 // 实例化对象,参数 ...

  5. asp.net处理事件

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

  6. Mysql 系统表

    Information_schema: 1. tables 提供表信息: 表所属数据库,表名,表类型,行数,最大自增数等等.

  7. 第十六篇-使用CheckBox实现多项选择

    话不多说,先上效果图 屏幕截图方法,全屏截图按键盘print screen就行,活动窗口截图,按住ALT+print screen. 图片默认保存在home/picture路径下.可以通过自带的图片处 ...

  8. 2019_01_16 sem_init

    sem_init() #include <semaphore.h> int sem_init(sem_t *sem, int pshared, unsigned int value); S ...

  9. 遍历List过程中同时修改

    public static void Main() { List<int> list = new List<int>(); ,,,,,,,,,}; list.AddRange( ...

  10. C语言进阶－－Day2

    今天主要讲解的是函数的压栈与出栈 1. 要实现一个数组的逆置,用栈的压栈出栈观点: reverseArr(int *parr,int i,int len) { if(i != len-1) rever ...