canvas涂抹效果

canvas涂抹效果

画布涂抹效果

html和css

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        canvas {
            z-index: 100;
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
</head>

<body>
    <canvas id="canvas" width="500" height="375">
    </canvas>
    <script type="text/javascript" src='erase.js'></script>
    <script type="text/javascript">
        erase('canvas');
    </script>
</body>

</html>

js

var erase = function (id) {
    var canvas = document.getElementById(id);
    var ctx = canvas.getContext('2d');
    var img = new Image();
    img.onload = function () {
        // alert('加载');
        ctx.drawImage(img, 0, 0);
    }
    img.src = "image/a.jpg";
    // 将图片画到canvas
    ctx.drawImage(img, 0, 0);
    var offsetX = canvas.offsetLeft;
    var offsetY = canvas.offsetTop;
    var mousedown = false;

    ctx.rect(0, 0, canvas.width, canvas.height);
    ctx.fill();
    // 在目标图像顶部显示源图像
    ctx.globalCompositeOperation = 'source-atop';

    function eventDown(e) {
        e.preventDefault();
        mousedown = true;
    }

    function eventUp(e) {
        e.preventDefault();
        mousedown = false;
    }

    function eventMove(e) {
        e.preventDefault();
        if (mousedown) {
            if (e.changedTouches) {
                e = e.changedTouches[e.changedTouches.length - 1];
            }
            var x = (e.clientX + document.body.scrollLeft || e.pageX) - offsetX || 0;
            var y = (e.clientY + document.body.scrollTop || e.pageY) - offsetY || 0;
            ctx.beginPath();
            ctx.fillStyle = "white";
            ctx.arc(x, y, 20, 0, Math.PI * 20);
            ctx.fill();
        }
    }

    canvas.addEventListener('touchstart', eventDown);
    canvas.addEventListener('touchend', eventUp);
    canvas.addEventListener('touchmove', eventMove);
    canvas.addEventListener('mousedown', eventDown);
    canvas.addEventListener('mouseup', eventUp);
    canvas.addEventListener('mousemove', eventMove);

}

这篇文章有 37 个评论

  1. Russell

    First off I want to say awesome blog! I had a quick question which I’d like to ask if you
    don’t mind. I was curious to know how you center yourself
    and clear your mind before writing. I have had difficulty clearing
    my thoughts in getting my thoughts out. I truly do enjoy writing however it just seems like the first 10 to
    15 minutes are generally wasted just trying to figure out how to begin. Any recommendations or hints?
    Thanks!

  2. Hello! I know this is kind of off topic but
    I was wondering if you knew where I could get a captcha plugin for my comment form?
    I’m using the same blog platform as yours and I’m having difficulty finding one?
    Thanks a lot!

  3. I will right away clutch your rss feed as I can not find your e-mail subscription hyperlink or e-newsletter service.

    Do you have any? Kindly allow me know so that I could subscribe.
    Thanks.

  4. takipçi satın al

    I do not even know how I stopped up right here, however I believed this put up was good.
    I don’t understand who you might be however certainly you
    are going to a well-known blogger for those who aren’t already.
    Cheers!

  5. takipçi satın al

    At this time it appears like Movable Type is the best blogging platform available right now.
    (from what I’ve read) Is that what you are using on your blog?

  6. takipçi satın al

    WOW just what I was looking for. Came here by searching for takipçi satın al

  7. The other day, while I was at work, my sister
    stole my iphone and tested to see if it can survive a 30 foot drop, just so she can be a youtube sensation. My iPad is
    now broken and she has 83 views. I know this is completely off topic but I had to share it with someone!

  8. instagram takipçi satın al

    Truly no matter if someone doesn’t be aware of then its up to
    other visitors that they will help, so here it happens.

  9. instagram takipçi satın al

    Hello to all, the contents existing at this web page are truly amazing for people experience, well, keep up the nice
    work fellows.

  10. instagram takipçi satın al

    Hello it’s me, I am also visiting this web site on a regular basis, this site is really nice and
    the people are really sharing fastidious thoughts.

  11. instagram takipçi satın al

    Hello There. I discovered your weblog the usage of
    msn. That is a really neatly written article. I will make sure to bookmark it and come back to learn extra of your helpful info.
    Thanks for the post. I will certainly comeback.

  12. Youtube Mp3

    The article is really excellent. Every time I read it, I get information again.
    The best article I’ve read in a long time.. Thank You.

  13. Youtube Mp3

    The article is really excellent. Every time I read it, I get information again.
    The best article I’ve read in a long timee.

  14. instagram takipçi satın al

    That is a good tip especially to those fresh to the blogosphere.

    Simple but very precise info… Many thanks for sharing this one.
    A must read article!

  15. stornobrzinol

    I view something truly special in this internet site.

  16. Youtube Mp3

    Nice post. I learn something totally new and challenging on websites
    I stumbleupon on a daily basis.
    It will always be helpful to read content from other authors and practice something from their

  17. Ucuz Takipci satin al

    Fastidious replies in return of this issue with solid arguments and describing everything about that.

  18. Numara Sorgulama

    Spot on with this write-up, I actually feel this
    website needs a great deal more attention. I’ll probably be returning to see
    more, thanks for the information!

  19. ilahi sözleri

    My relatives every time say that I am wasting my time here at net, however I
    know I am getting know-how all the time by reading thes
    good articles.

  20. film izle

    Spot on with this write-up, I actually feel this
    website needs a great deal more attention. I’ll probably be returning to see
    more, thanks for the information!

  21. instagram takipçi satın al

    Hi, I do think this is an excellent site. I stumbledupon it 😉 I’m going to
    revisit once again since i have book-marked it. Money and
    freedom is the greatest way to change, may you be rich and continue to help
    other people.

  22. ilahi sözleri

    My relatives every time say that I am wasting my time here at net, however I
    know I am getting know-how all the time by reading thes
    good articles.

  23. İlahi Evi

    My relatives every time say that I am wasting my time here at net, however I
    know I am getting know-how all the time by reading thes
    good articles.

  24. tiktok takipçi satın al

    Pretty section of content. I just stumbled upon your weblog and
    in accession capital to assert that I acquire actually enjoyed account your blog
    posts. Anyway I’ll be subscribing to your augment and
    even I achievement you access consistently quickly

  25. instagram takipçi satın al

    My brother recommended I might like this web site. He was entirely right.

    This post actually made my day. You can not imagine simply how
    much time I had spent for this information! Thanks!

  26. Takipçi satın al

    I don’t even understand how I finished up right here, however I thought
    this put up was good. I do not understand who you might be but definitely you are going to
    a well-known blogger if you happen to aren’t already.
    Cheers!

  27. beğeni hilesi

    Somebody necessarily assist to make severely
    posts I would state. This is the first time I frequented
    your website page and up to now? I amazed with the analysis you made to make this particular post amazing.
    Great task!

  28. Numara Sorgula

    My relatives every time say that I am wasting my time here at net, however I
    know I am getting know-how all the time by reading thes
    good articles.

  29. instagram takipci satin al

    Hi there, I read your blog like every week. Your humoristic
    style is awesome, keep doing what you’re doing!

  30. instagram takipci satin al

    It’s not my first time to go to see this web page, i am visiting this website dailly and
    take nice information from here daily.

  31. Gündem Haberleri

    Spot on with this write-up, I actually feel this
    website needs a great deal more attention. I’ll probably be returning to see
    more, thanks for the information!

  32. instagram takipci satin al

    Hi! I simply want to offer you a huge thumbs up for your excellent information you’ve got here on this post.
    I will be coming back to your web site for more soon.

  33. Numara Sorgula

    Thank you for this beautiful article. It’s really a good article

  34. instagram takipci satin al

    Hi great website! Does running a blog like this require a
    lot of work? I’ve no knowledge of coding but I was hoping to start my
    own blog soon. Anyway, if you have any ideas or tips for new blog owners please share.

    I know this is off subject however I simply needed to ask.
    Kudos!

  35. instagram takipçi satın al

    Hi, all is going nicely here and ofcourse every one
    is sharing data, that’s really excellent, keep up writing.

发表评论