canvas实例分享-CSDN论坛

⋅前端面试分享 ⋅canvas实例分享 ⋅HTML5版贪吃蛇 更多帖子 关注空间博客 tianma630 本版专家分：345 黄花 2013年4月 Java大版内专家分月排行榜第二 结帖率 87.5%: 自己最近学习canvas写的一些实例、游戏分享给大家，希望对想学习canvas的同学有所帮助，求置顶

11 2015-08-06 21:05:19

回复数 63 只看楼主引用举报楼主

⋅前端面试分享 ⋅canvas实例分享 ⋅HTML5版贪吃蛇 更多帖子 关注空间博客 tianma630 本版专家分：345 黄花 2013年4月 Java大版内专家分月排行榜第二

在线画图



<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

<canvas width="600" height="600" id="canvas" style="border:1px solid red;"></canvas>

<script>

    var canvas = document.getElementById('canvas');

    var cxt = canvas.getContext('2d');



    canvas.onmousedown = function(ev){

        var x = ev.clientX - canvas.offsetLeft;

        var y = ev.clientY - canvas.offsetTop;

        cxt.beginPath();

        cxt.moveTo(x, y);



        document.onmousemove = function(ev){

            var x = ev.clientX - canvas.offsetLeft;

            var y = ev.clientY - canvas.offsetTop;

            cxt.lineTo(x, y);

            cxt.stroke();

        };

    };



    document.onmouseup = function(){

        cxt.closePath();

        document.onmousemove = null;

    };



</script>

</body>

</html>

0 2015-08-06 21:28:44

只看TA 引用举报 #1 得分 0

图片合成，使用canvas，做一个漂亮的二维码分享一直以来就怕麻烦，就一直没写，刚好今天闲下来，就做了一个图片合成，使用的canvas，做了一个漂亮的二维码分享，二维码可以通过后台动态传输，非常简单，网上有很多，自己可以搜索，这里只做了一个图片二维码合成

⋅前端面试分享 ⋅canvas实例分享 ⋅HTML5版贪吃蛇 更多帖子 关注空间博客 tianma630 本版专家分：345 黄花 2013年4月 Java大版内专家分月排行榜第二

烟花效果



<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>烟花</title>

</head>

<body>

<div id="skelet">

    <canvas width="600" height="600" id="canvas" style="border:1px solid red;"></canvas>

    <script>



        var canvas = document.getElementById('canvas');

        var cxt = canvas.getContext('2d');



        var timer;

        var iStop = false;

        var fires = [];



        function draw(){

            var _fires = [];

            for(var i=0; i<fires.length; i++){

                cxt.save();

                cxt.translate(fires[i].x, fires[i].y);

                for(var j=0; j<12; j++){

                    cxt.save();

                    cxt.beginPath();

                    cxt.strokeStyle = 'rgba('+fires[i].color+', '+(fires[i].alpha--)/1000+')';

                    cxt.rotate(30*j*Math.PI/180+fires[i].offset);

                    cxt.translate(fires[i].radius++/10, 0);

                    cxt.rotate(45*Math.PI/180);

                    cxt.moveTo(0, 0);

                    cxt.lineTo(10, 0);

                    cxt.stroke();

                    cxt.closePath();

                    cxt.restore();

                }

                cxt.restore();



                if(fires[i].alpha > 0){

                    _fires.push(fires[i])

                }

            }

            fires = _fires;

        }



        function drawTip() {

            cxt.save();

            cxt.font="20px Verdana";

            cxt.fillStyle = 'skyblue';

            cxt.fillText('请单击页面！', 230, 290);

            cxt.restore();

        }



        function erase(){

            cxt.clearRect(0, 0, canvas.width, canvas.height);

        }



        canvas.onmousedown = function(e){

            var ev = e || window.event;



            var x = e.clientX - canvas.offsetLeft;

            var y = e.clientY - canvas.offsetTop;



            var r = Math.round(Math.random()*255);

            var g = Math.round(Math.random()*255);

            var b = Math.round(Math.random()*255);



            var offset = Math.round(Math.random()*45);



            fires.push({'radius':0,'alpha':1000,'x':x,'y':y,'color':r+','+g+','+b, 'offset':offset});

        };



        window.requestAnimationFrame =

                window.requestAnimationFrame ||

                window.mozRequestAnimationFrame ||

                window.webkitRequestAnimationFrame ||

                window.msRequestAnimationFrame;



        window.cancelRequestAnimationFrame =

                window.cancelRequestAnimationFrame ||

                window.mozCancelRequestAnimationFrame ||

                window.webkitCancelRequestAnimationFrame ||

                window.msCancelRequestAnimationFrame;



        function animate() {

            erase();

            draw();

            drawTip();

            if(iStop){

                cancelRequestAnimationFrame(timer);

            }else{

                timer = requestAnimationFrame(animate);

            }

        }



        animate();





    </script>

</div>

</body>

</html>

0 2015-08-06 21:30:59

只看TA 引用举报 #2 得分 0

canvas存图分享 h5存图分享 css属性可用于存图分享：-webkit-touch-callout:default; html： &lt;canvas id="myCanvas" style="display:none;"&gt; Your browser does not support the HTML5 canvas tag. &lt;/canvas&gt; &lt;img src="" id="img.

⋅前端面试分享 ⋅canvas实例分享 ⋅HTML5版贪吃蛇 更多帖子 关注空间博客 tianma630 本版专家分：345 黄花 2013年4月 Java大版内专家分月排行榜第二

时钟



<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>时钟</title>

</head>

<body>

    <canvas id="clock" width="500" height="500"></canvas>

    <script>

        var clock = document.getElementById('clock');

        var cxt = clock.getContext('2d');



        function drawClock(){



            var now = new Date();

            var sec = now.getSeconds();

            var min = now.getMinutes();

            var hour = now.getHours();

            hour = hour + min/60;

            hour = hour>12? hour-12: hour;



            // 清除画布

            cxt.clearRect(0, 0, 500, 500);

            // 表盘

            cxt.lineWidth = 10;

            cxt.strokeStyle = 'blue';

            cxt.beginPath();

            cxt.arc(250, 250, 200, 0, 360, false);

            cxt.closePath();

            cxt.stroke();

            // 刻度

            for(var i=0; i<12; i++){

                cxt.save();

                cxt.lineWidth = 7;

                cxt.strokeStyle = '#000';

                cxt.translate(250, 250);

                cxt.rotate(i * 30 * Math.PI/180);

                cxt.beginPath(0, 0);

                cxt.moveTo(0, -170);

                cxt.lineTo(0, -190);

                cxt.closePath();

                cxt.stroke();

                cxt.restore();

            }



            for(var i=0; i<60; i++){

                cxt.save();

                cxt.lineWidth = 5;

                cxt.strokeStyle = '#000';

                cxt.translate(250, 250);

                cxt.rotate(i * 6 * Math.PI/180);

                cxt.beginPath();

                cxt.moveTo(0, -180);

                cxt.lineTo(0, -190);

                cxt.closePath();

                cxt.stroke();

                cxt.restore();

            }



            // 时针

            cxt.save();

            cxt.lineWidth = 7;

            cxt.strokeStyle = '#000';

            cxt.translate(250, 250);

            cxt.rotate(30 * hour * Math.PI/180);

            cxt.beginPath();

            cxt.moveTo(0, -140);

            cxt.lineTo(0, 10);

            cxt.closePath();

            cxt.stroke();

            cxt.restore();



            // 分针

            cxt.save();

            cxt.lineWidth = 5;

            cxt.strokeStyle = '#000';

            cxt.translate(250, 250);

            cxt.rotate(6 * min * Math.PI/180);

            cxt.beginPath();

            cxt.moveTo(0, -160);

            cxt.lineTo(0, 15);

            cxt.closePath();

            cxt.stroke();

            cxt.restore();



            // 秒针

            cxt.save();

            cxt.lineWidth = 3;

            cxt.strokeStyle = 'red';

            cxt.translate(250, 250);

            cxt.rotate(6 * sec * Math.PI/180);

            cxt.beginPath();

            cxt.moveTo(0, -170);

            cxt.lineTo(0, 20);

            cxt.closePath();

            cxt.stroke();



            cxt.beginPath();

            cxt.arc(0, 0, 6, 0, 360, false);

            cxt.closePath();

            cxt.fillStyle = 'gray';

            cxt.fill();

            cxt.stroke();



            cxt.beginPath();

            cxt.arc(0, -150, 5, 0, 360, false);

            cxt.closePath();

            cxt.fillStyle = 'gray';

            cxt.fill();

            cxt.stroke();



            cxt.restore();

        }

        drawClock();

        setInterval(drawClock, 1000);

    </script>

</body>

</html>

1 2015-08-06 21:32:15

只看TA 引用举报 #3 得分 0

小程序canvas实现（分享朋友圈生成图片）业务场景：生成一个浮层图片实现思路：设置一个盒子，将canvas生成的图片和保存图片的按钮放里边，当有canvas生成图片的时候这个盒子显示，否则隐藏。这里需要注意的是，canvas画图片的时候，如果是线上路径就先要使用wx.getImageInfo获取图片的临时路径，使用这个路径就可以在真机上显示了前台代码： &lt;canvas canvas-...

⋅送积分了！如果再有一次机会让你选择，你还会选择程序员，选择前端吗？

⋅送积分了！！！一个前端如何让自己闪光？

⋅送400积分了！！！为了庆祝粉丝即将达到5000！只差40个了！

更多帖子

关注空间博客

业余草

本版专家分：21307

版主

GitHub 绑定GitHub第三方账户获取

优秀版主 2015年8月优秀小版主
2015年5月优秀小版主
2015年4月html5优秀版主

蓝花 2015年7月 Web 开发大版内专家分月排行榜第三: 恩恩，不错谢谢分享！

0 2015-08-07 11:11:10

只看TA 引用举报 #4 得分 0

小程序canvas绘制商品海报实现分享朋友圈小程序的canvas绘图绝对是整个小程序开发中坑最多的了。先上效果图：实现步骤就是点击生成图片在canvas画布中画出一张海报然后保存在本地在imags标签中展示，此处尽可能的把canvas组件隐藏但是不能用wx：if。用hidden或者display属性 &lt;button bindtap='gotoSubmit'&gt;生成图片&lt;/button&gt...

Amy安

本版专家分：193

GitHub 绑定GitHub第三方账户获取: 好东西～抱走
感谢分享

0 2015-08-07 14:57:49

只看TA 引用举报 #5 得分 0

xiaomayilj 本版专家分：20: 灰常感谢！

0 2015-08-07 15:29:42

只看TA 引用举报 #6 得分 0

uniApp用canvas实现小程序保存分享页面&二维码到本地相册之前分享了一篇 uniApp实现微信分享页面/二维码功能

lantianweishi9 本版专家分：0: 灰常感谢！灰常感谢！

0 2015-08-07 16:24:02

只看TA 引用举报 #7 得分 0

微信小程序自定义二维码分享图--Canvas画图及注意事项微信小程序自定义二维码分享图--Canvas画图，图片缓存及注意事项

⋅前端面试分享 ⋅canvas实例分享 ⋅HTML5版贪吃蛇 更多帖子 关注空间博客 tianma630 本版专家分：345 黄花 2013年4月 Java大版内专家分月排行榜第二

圆周运动



<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

<canvas width="600" height="600" id="race" style="border:1px solid red;"></canvas>

<script>

    var race = document.getElementById('race');

    var cxt = race.getContext('2d');



    var ang = 0;

    var speed = 1;

    var sAng = 0;



    function draw() {

        cxt.save();



        cxt.translate(300, 300);



        cxt.save();

        cxt.beginPath();

        cxt.fillStyle = '#CCA548';

        cxt.arc(0, 0, 220, 0, 360*Math.PI/180, false);

        cxt.fill();

        cxt.closePath();

        cxt.restore();



        cxt.save();

        cxt.beginPath();

        cxt.fillStyle = 'white';

        cxt.arc(0, 0, 200, 0, 360*Math.PI/180, false);

        cxt.fill();

        cxt.closePath();

        cxt.restore();



        cxt.save();

        cxt.rotate(ang*Math.PI/180);

        ang += speed;

        //speed += 1;

        cxt.fillStyle = '#CDC9A5';

        cxt.fillRect(210, -40, 40, 80);

        cxt.strokeRect(210, -40, 40, 80);



        cxt.fillStyle = 'white';

        cxt.fillRect(230, -20, 10, 10);

        cxt.fillRect(230, 10, 10, 10);



        cxt.save();

        cxt.translate(210, -20);

        cxt.fillStyle = '#000';

        cxt.beginPath();

        cxt.arc(0, 0,10, 0, 360*Math.PI/180, false);

        cxt.fill();

        cxt.closePath();



        cxt.fillStyle = 'white';

        cxt.beginPath();

        cxt.arc(0, 0, 2, 0, 360*Math.PI/180, false);

        cxt.fill();

        cxt.closePath();



        cxt.save();

        if(sAng > 360){

            sAng = 0;

        }

        cxt.rotate(sAng*Math.PI/180);

        sAng += 4;

        cxt.strokeStyle = 'white';

        cxt.strokeRect(-5*Math.sqrt(2), -5*Math.sqrt(2), 10*Math.sqrt(2), 10*Math.sqrt(2));

        cxt.restore();



        cxt.restore();



        cxt.save();

        cxt.translate(210, 20);

        cxt.fillStyle = '#000';

        cxt.beginPath();

        cxt.arc(0, 0,10, 0, 360*Math.PI/180, false);

        cxt.fill();

        cxt.closePath();



        cxt.save();

        cxt.rotate((sAng+45)*Math.PI/180);

        cxt.strokeStyle = 'white';

        cxt.strokeRect(-5*Math.sqrt(2), -5*Math.sqrt(2), 10*Math.sqrt(2), 10*Math.sqrt(2));

        cxt.restore();



        cxt.restore();



        cxt.beginPath();

        cxt.arc(210, 20, 2, 0, 360*Math.PI/180, false);

        cxt.fill();

        cxt.closePath();



        cxt.restore();



        cxt.restore();

    }



    //draw();



    function animate() {



        cxt.clearRect(0, 0, 600, 600);

        draw();



        requestAnimationFrame(animate);

    }



    requestAnimationFrame(animate);





</script>

</body>

</html>

0 2015-08-07 16:32:00

只看TA 引用举报 #8 得分 0

canvas实现整个页面画成一张图片并进行分享，解决获取线上图片报错问题最近项目中遇到将整个页面都分享给朋友的需求，我们都知道如果长按页面的话只能发送其中的一个图片。所以最终选择用canvas来画一张图片。这个是需求图使用canvas画图不难，网上有很多案例，我这里要说的是canvas的一个坑： canvas有同源策略的问题，这个之前还真的不知道，在这个需求中我需要获取个人的微信头像，但是当我在本地测试的时候会报错：也就是说c...

⋅前端面试分享 ⋅canvas实例分享 ⋅HTML5版贪吃蛇 更多帖子 关注空间博客 tianma630 本版专家分：345 黄花 2013年4月 Java大版内专家分月排行榜第二

浮动效果



<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>漂浮效果</title>

</head>

<body>

<div>

    <canvas width="1000" height="600" id="canvas" style="border:1px solid red;"></canvas>

    <script>



        var canvas = document.getElementById('canvas');

        var cxt = canvas.getContext('2d');



        var timer;

        var iStop = false;

        var radius = 50;

        var transX = 0;

        var step = -1;



        function draw(){



            cxt.save();

            cxt.translate(transX, 300);

            cxt.beginPath();

            cxt.moveTo(0, 0);

            for(var i=0; i<2160; i++){

                var y = radius*Math.sin(i*Math.PI/180);

                cxt.lineTo(i, y);

            }

            cxt.stroke();

            cxt.closePath();

            cxt.restore();



            cxt.save();

            cxt.strokeRect(50, 300-Math.abs(radius)-50, 900, 50);

            cxt.restore();



            radius += step;

            if(radius == 50 || radius == -50){

                step = -step;

            }

            transX -= 3;

            if(transX <= -1080){

                transX = 0;

            }

        }



        function erase(){

            cxt.clearRect(0, 0, canvas.width, canvas.height);

        }



        window.requestAnimationFrame =

                window.requestAnimationFrame ||

                window.mozRequestAnimationFrame ||

                window.webkitRequestAnimationFrame ||

                window.msRequestAnimationFrame;



        window.cancelRequestAnimationFrame =

                window.cancelRequestAnimationFrame ||

                window.mozCancelRequestAnimationFrame ||

                window.webkitCancelRequestAnimationFrame ||

                window.msCancelRequestAnimationFrame;



        function animate() {

            erase();

            draw();

            if(iStop){

                cancelRequestAnimationFrame(timer);

            }else{

                timer = requestAnimationFrame(animate);

            }

        }



        animate();

    </script>

</div>

</body>

</html>

0 2015-08-07 16:45:17

只看TA 引用举报 #9 得分 0

微信小程序用canvas生成分享朋友圈的海报在公司遇到一个需求小程序分享到朋友圈，套路就是生成小程序的二维码图片，技术思路简单点直接下载小程序二维码的图但是这么简单就不用多BB写文章分享了，复杂点就是用canvas画出一张图片效果如下。说一下解决过程吧 1.小程序canvas画图自己一点点画需要不停的算东西而且小程序绘图API还是有点小多的对于一个刚接触的新手，功能又有时间限制的我来说无疑是崩溃的，为了不让自己被产品拿去祭天找到了一...

⋅前端面试分享 ⋅canvas实例分享 ⋅HTML5版贪吃蛇 更多帖子 关注空间博客 tianma630 本版专家分：345 黄花 2013年4月 Java大版内专家分月排行榜第二

仿微信游戏-见缝插针



<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>微信小游戏</title>

</head>

<body>

<div>

    <canvas width="600" height="600" id="canvas" style="border:1px solid red;"></canvas>

    <script>



        var canvas = document.getElementById('canvas');

        var cxt = canvas.getContext('2d');



        var timer;

        var iStop = false;

        var rotateSpeed = 0;

        var endLines = [{'deg':0},{'deg':90},{'deg':180},{'deg':270}];

        var runSpeed = 0;

        var runLines = [{'x1':300,'y1':600, 'x2':300, 'y2':500, 'speed':0}];



        function draw(){

            cxt.save();

            cxt.translate(300, 300);

            cxt.rotate(rotateSpeed*Math.PI/180);

            cxt.beginPath();

            cxt.arc(0, 0, 50, 0, 360*Math.PI/180, false);

            cxt.stroke();

            cxt.closePath();



            for(var i=0; i<endLines.length; i++){

                cxt.save();

                cxt.rotate(endLines[i].deg*Math.PI/180);

                cxt.beginPath();

                cxt.moveTo(50, 0);

                cxt.lineTo(150, 0);

                cxt.stroke();

                cxt.closePath();

                cxt.restore();

            }

            cxt.restore();



            for(var j=0; j<runLines.length; j++){

                cxt.save();

                cxt.beginPath();

                cxt.moveTo(runLines[j].x1, runLines[j].y1);

                cxt.lineTo(runLines[j].x2, runLines[j].y2);

                cxt.stroke();

                cxt.closePath();

                cxt.restore();

            }



            var _runLines = [];

            for(var k=0; k<runLines.length; k++){

                if(runLines[k].y2 < 450){

                    for(var m=0; m<endLines.length; m++){

                        if((endLines[m].deg + rotateSpeed)%360 == 90){

                            iStop = true;

                        }

                    }

                }

                if(runLines[k].y2 == 350){

                    endLines.push({'deg':90-rotateSpeed});

                }else{

                    runLines[k].y1 -= runLines[k].speed;

                    runLines[k].y2 -= runLines[k].speed;

                    _runLines.push(runLines[k]);

                }

            }

            runLines = _runLines;



            if((++rotateSpeed) == 360){

                rotateSpeed = 0;

            }



        }



        function erase(){

            cxt.clearRect(0, 0, canvas.width, canvas.height);

        }



        document.onmousedown = function(){

            runLines.push({'x1':300,'y1':600, 'x2':300, 'y2':500, 'speed':10});

        };



        window.requestAnimationFrame =

                window.requestAnimationFrame ||

                window.mozRequestAnimationFrame ||

                window.webkitRequestAnimationFrame ||

                window.msRequestAnimationFrame;



        window.cancelRequestAnimationFrame =

                window.cancelRequestAnimationFrame ||

                window.mozCancelRequestAnimationFrame ||

                window.webkitCancelRequestAnimationFrame ||

                window.msCancelRequestAnimationFrame;



        function animate() {

            erase();

            draw();

            if(iStop){

                cancelRequestAnimationFrame(timer);

            }else{

                timer = requestAnimationFrame(animate);

            }

        }



        animate();

    </script>

</div>

</body>

</html>

0 2015-08-07 16:47:37

只看TA 引用举报 #10 得分 0

程序员鼓励师 本版专家分：869: 学习

0 2015-08-08 06:06:07

只看TA 引用举报 #11 得分 0

小程序 canvas生成分享海报成品效果图：将二维码和图片拼合到一张图上。各位可以扫下面小程序码体验一下。位置在小程序首页-右上角-生成海报。我做了图片切换。 &lt;!--pages/test/canvas.wxml--&gt; &lt;block wx:if="{{urls}} ===../../../images/qrbg.png"&gt; &lt;image src='{{qrcode}}' cl...

五更琉璃 本版专家分：153: 0 2015-08-08 13:56:46

只看TA 引用举报 #12 得分 0

微信小程序用canvas生成分享图片，微信朋友圈海报小程序的canvas画布绘图与h5的canvas有类似的功能，小程序的应用场景大多数是用于制作分享图，模块上是有文字、图片等等变量时，因为只有图片才能保存到相册，所以得先把模块合成为一张图片，此时canvas就能显示它的强大功能了。具体可查阅官方小程序[canvas组件的api]应用；本案例还增加了切换卡片的功能，可忽略，不过这里配合了canvas的操作，也可以参考一下；先看效果图： (个人...

P.Poet 本版专家分：0: 0 2015-08-08 22:25:51

只看TA 引用举报 #13 得分 0

Canvas绘图分享一： 1、创建画布： &lt;canvas id="canvas" width="500" height="500" style="background:#eee;"&gt;&lt;/canvas&gt; 注意： 1、画布宽，高只能使用HTML/JS属性来复制，不能使用CSS。 2、每个画布上有且只有

⋅前端面试分享 ⋅canvas实例分享 ⋅HTML5版贪吃蛇 更多帖子 关注空间博客 tianma630 本版专家分：345 黄花 2013年4月 Java大版内专家分月排行榜第二

贪吃蛇

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>贪吃蛇</title>

</head>

<body>

<canvas width="400" height="400" id="canvas" style="border:10px solid #A2CD5A;"></canvas>

<script>

    var canvas = document.getElementById('canvas');

    var cxt = canvas.getContext('2d');



    // 定时器

    var timer;

    // 游戏是否结束

    var iStop = false;

    var index = 0;

    // 蛇位置

    var snake_bodys = [{'x':20,'y':20},{'x':40,'y':20},{'x':60,'y':20}];

    // 一个方格的长度

    var snake_body_len = 20;

    // 蛇头位置

    var snake_head = {'x':20,'y':20};

    // 蛇前进方向

    var snake_direction = 's'; // east south west north

    // 虫子的位置

    var worm = {'x':200,'y':200};

    // 前进时被删除的蛇的最后一个方格

    var snake_last;

    // 得分 一个虫子得一分

    var score = 0;



    var snake_color = '#8FBC8F';

    var snake_border_color = 'red';

    var snake_eye_color = 'black';

    var worm_color = '#A0522D';



    // 清除画布

    function erase() {

        cxt.clearRect(0, 0, canvas.width, canvas.height)

    }



    // 画蛇

    function drawSnake() {

        cxt.save();

        cxt.strokeStyle = snake_border_color;

        cxt.fillStyle = snake_color;

        for(var i=0; i<snake_bodys.length; i++){

            cxt.fillRect(snake_bodys[i].x, snake_bodys[i].y, snake_body_len, snake_body_len);

            cxt.strokeRect(snake_bodys[i].x, snake_bodys[i].y, snake_body_len, snake_body_len);

        }

        cxt.restore();



        cxt.save();

        cxt.fillStyle = snake_eye_color;

        cxt.beginPath();

        cxt.arc(snake_head.x+10, snake_head.y+10, 5, 0, 360*Math.PI/180, false);

        cxt.fill();

        cxt.closePath();

        cxt.restore();

    }



    // 画虫子

    function drawWorm(){

        cxt.save();

        cxt.fillStyle = worm_color;

        cxt.fillRect(worm.x, worm.y, snake_body_len, snake_body_len);

        cxt.restore();

    }



    // 随机产生虫子

    function createWorm(){

        var r_x = Math.random();

        var r_y = Math.random();

        var x = Math.floor(r_x*20);

        var y = Math.floor(r_y*20);

        worm = {'x':x*20, 'y':y*20};

    }



    // 前进一步

    function step(){

        switch (snake_direction){

            case 'e':

                snake_head = {'x':snake_head.x + snake_body_len,'y':snake_head.y};

                break;

            case 's':

                snake_head = {'x':snake_head.x,'y':snake_head.y + snake_body_len};

                break;

            case 'w':

                snake_head = {'x':snake_head.x - snake_body_len,'y':snake_head.y};

                break;

            case 'n':

                snake_head = {'x':snake_head.x,'y':snake_head.y - snake_body_len};

                break;

            default :

                break;

        }



        // 是否吃到了虫子

        if(snake_head.x == worm.x && snake_head.y == worm.y){

            createWorm();

            snake_bodys.push(snake_last);

            score++;

        }



        snake_last = snake_bodys.pop();

        snake_bodys.unshift(snake_head);



        // 蛇碰到了自己的身体 游戏结束

        for(var i=1; i<snake_bodys.length; i++){

            if(snake_head.x == snake_bodys[i].x && snake_head.y == snake_bodys[i].y){

                iStop = true;

                break;

            }

        }



        // 蛇跑出了边界 游戏结束

        if(snake_head.x >= 400 || snake_head.x < 0 || snake_head.y >= 400 || snake_head.y< 0){

            iStop = true;

        }

    }



    // 画得分

    function drawScore() {

        cxt.save();

        cxt.font="20px Verdana";

        cxt.fillStyle = 'skyblue';

        cxt.fillText('得分：' + score, 300, 50);

        cxt.restore();

    }



    // 画游戏结束

    function drawOver() {

        cxt.save();

        cxt.font="20px Verdana";

        cxt.fillStyle = 'yellow';

        cxt.fillText('游戏结束！', 150, 190);

        cxt.restore();

    }



    var last = new Date();

    document.onkeydown = (function(e){

        var now = new Date();

        if(now.getTime() - last.getTime() < 100){

            return;

        }

        last = now;

        switch(e.which){

            case 39:

                if(snake_direction != 'w'){

                    snake_direction = 'e';

                }

                break;

            case 40:

                if(snake_direction != 'n') {

                    snake_direction = 's';

                }

                break;

            case 37:

                if(snake_direction != 'e') {

                    snake_direction = 'w';

                }

                break;

            case 38:

                if(snake_direction != 's') {

                    snake_direction = 'n';

                }

                break;

        }

    });



    window.requestAnimationFrame =

            window.requestAnimationFrame ||

            window.mozRequestAnimationFrame ||

            window.webkitRequestAnimationFrame ||

            window.msRequestAnimationFrame;



    window.cancelRequestAnimationFrame =

            window.cancelRequestAnimationFrame ||

            window.mozCancelRequestAnimationFrame ||

            window.webkitCancelRequestAnimationFrame ||

            window.msCancelRequestAnimationFrame;



    function animate() {

        index++;

        if(index%10 == 0){

            step();

        }

        erase();

        drawSnake();

        drawWorm();

        drawScore();



        if(iStop){

            cancelRequestAnimationFrame(timer);

            drawOver();

        }else{

            timer = requestAnimationFrame(animate);

        }

    }



    animate();



</script>

</body>

</html>

0 2015-08-09 21:00:24

只看TA 引用举报 #14 得分 0

使用canvas 绘制图文分享卡片, 保存在手机相册小程序api官网文档

⋅前端面试分享 ⋅canvas实例分享 ⋅HTML5版贪吃蛇 更多帖子 关注空间博客 tianma630 本版专家分：345 黄花 2013年4月 Java大版内专家分月排行榜第二

重力效果



<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>弹跳效果</title>

</head>

<body>

<canvas width="600" height="600" id="canvas" style="border:1px solid red;"></canvas>

<script>

    var canvas = document.getElementById('canvas');

    var cxt = canvas.getContext('2d');



    cxt.strokeStyle = 'red';



    var gravity = 0.98;

    var timer;

    var index = 0;

    var end = 550;

    var iStop = false;



    var blocks = [

        {'left':0,'top':0,'end':0,'speed':0,'startIndex':0},

        {'left':50,'top':0,'end':0,'speed':0,'startIndex':10},

        {'left':100,'top':0,'end':0,'speed':0,'startIndex':20},

        {'left':150,'top':0,'end':0,'speed':0,'startIndex':30},

        {'left':200,'top':0,'end':0,'speed':0,'startIndex':40},

        {'left':250,'top':0,'end':0,'speed':0,'startIndex':50},

        {'left':300,'top':0,'end':0,'speed':0,'startIndex':60},

        {'left':350,'top':0,'end':0,'speed':0,'startIndex':70},

        {'left':400,'top':0,'end':0,'speed':0,'startIndex':80},

        {'left':450,'top':0,'end':0,'speed':0,'startIndex':90},

        {'left':500,'top':0,'end':0,'speed':0,'startIndex':100},

        {'left':550,'top':0,'end':0,'speed':0,'startIndex':110}

    ];



    function erase() {

        cxt.clearRect(0, 0, canvas.width, canvas.height)

    }



    function draw() {

        for(var i=0; i<blocks.length; i++){

            if(blocks[i].startIndex <= index){

                cxt.fillRect(blocks[i].left, blocks[i].top, 50, 50);

                cxt.strokeRect(blocks[i].left, blocks[i].top, 50, 50);

                if(blocks[i].top >= end){

                    blocks[i].top = end;

                }else{

                    blocks[i].top += blocks[i].speed;

                    blocks[i].speed += gravity;

                }

            }

        }

    }



    function animate() {

        erase();

        draw();

        index ++;

        if(iStop){

            cancelRequestAnimationFrame(timer);

        }else{

            timer = requestAnimationFrame(animate);

        }

    }



    animate();

    //requestAnimationFrame(animate);



</script>

</body>

</html>

0 2015-08-10 02:15:34

只看TA 引用举报 #15 得分 0

⋅前端面试分享 ⋅canvas实例分享 ⋅HTML5版贪吃蛇 更多帖子 关注空间博客 tianma630 本版专家分：345 黄花 2013年4月 Java大版内专家分月排行榜第二

图片移动变形



<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        *{padding: 0;margin: 0;list-style: none;}

        #canvas{border:1px solid #000;}

    </style>

</head>

<body>

    <canvas id="canvas" width="800" height="560"></canvas>

    <script>

        var canvas =  document.getElementById('canvas'),

            cxt = canvas.getContext('2d');



        var enlargePointOrigin = {x:0,y:0};

        var enlargePoint = {x:0,y:0};

        var imgPositionOrigin = {x:0, y:0, w:0, h:0};

        var imgPosition = {x:0, y:0, w:0, h:0};

        var isLoad = false;



        var img = new Image();

        img.src = 'image/mine.png';

        img.onload = function(){

            isLoad = true;

            imgPosition.w = img.width;

            imgPosition.h = img.height;

            imgPositionOrigin.w = img.width;

            imgPositionOrigin.h = img.height;

            enlargePoint.x = img.width;

            enlargePointOrigin.x = img.width;

        };



        function draw(){



            if(isLoad){

                cxt.drawImage(img, 0, 0, img.width, img.height, imgPosition.x, imgPosition.y, imgPosition.w, imgPosition.h);



                cxt.beginPath();

                cxt.moveTo(enlargePoint.x, enlargePoint.y);

                cxt.lineTo(enlargePoint.x, enlargePoint.y + 10);

                cxt.lineTo(enlargePoint.x - 10, enlargePoint.y);

                cxt.closePath();

                cxt.stroke();

            }

        }



        function erase(){

            cxt.clearRect(0, 0, canvas.width, canvas.height);

        }



        window.requestAnimationFrame =

                window.requestAnimationFrame ||

                window.mozRequestAnimationFrame ||

                window.webkitRequestAnimationFrame ||

                window.msRequestAnimationFrame;



        window.cancelRequestAnimationFrame =

                window.cancelRequestAnimationFrame ||

                window.mozCancelRequestAnimationFrame ||

                window.webkitCancelRequestAnimationFrame ||

                window.msCancelRequestAnimationFrame;



        function animate() {

            erase();

            draw();

            requestAnimationFrame(animate);

        }



        animate();



        var _downX = 0;

        var _downY = 0;

        canvas.onmousedown = function(ev){

            _downX = ev.clientX - canvas.offsetLeft;

            _downY = ev.clientY - canvas.offsetTop;



            if(_downX >= enlargePoint.x - 10 && _downX <= enlargePoint.x &&

                    _downY >= enlargePoint.y && _downY <= enlargePoint.y + 10){



                document.onmousemove = function(ev){

                    var x = ev.clientX - canvas.offsetLeft;

                    var y = ev.clientY - canvas.offsetTop;

                    if(x - _downX < 0 && y - _downY > 0){

                        imgPosition.y = y;

                        imgPosition.w = imgPositionOrigin.w - Math.abs(x - _downX);

                        imgPosition.h = imgPositionOrigin.h - Math.abs(y - _downY);



                        enlargePoint.x = enlargePointOrigin.x - Math.abs(x - _downX);

                        enlargePoint.y = enlargePointOrigin.y + Math.abs(y - _downY);

                    }else if(x - _downX > 0 && y - _downY < 0){

                        imgPosition.y = y;

                        imgPosition.w = imgPositionOrigin.w + Math.abs(x - _downX);

                        imgPosition.h = imgPositionOrigin.h + Math.abs(y - _downY);



                        enlargePoint.x = enlargePointOrigin.x + Math.abs(x - _downX);

                        enlargePoint.y = enlargePointOrigin.y - Math.abs(y - _downY);

                    }

                };

            }else if(_downX > imgPosition.x && _downX < imgPosition.x + imgPosition.w &&

                        _downY > imgPosition.y && _downY < imgPosition.y + imgPosition.h){

                document.onmousemove = function(ev) {

                    var x = ev.clientX - canvas.offsetLeft;

                    var y = ev.clientY - canvas.offsetTop;



                    imgPosition.x = imgPositionOrigin.x + (x - _downX);

                    imgPosition.y = imgPositionOrigin.y + (y - _downY);



                    enlargePoint.x = enlargePointOrigin.x + (x - _downX);

                    enlargePoint.y = enlargePointOrigin.y + (y - _downY);

                }

            }

        };



        document.onmouseup = function(){

            imgPositionOrigin.x = imgPosition.x;

            imgPositionOrigin.y = imgPosition.y;

            imgPositionOrigin.w = imgPosition.w;

            imgPositionOrigin.h = imgPosition.h;

            enlargePointOrigin.x = enlargePoint.x;

            enlargePointOrigin.y = enlargePoint.y;

            _downX = 0;

            _downY = 0;

            document.onmousemove = null;

        };





    </script>

</body>

</html>

0 2015-08-10 02:18:10

只看TA 引用举报 #16 得分 0

微信小程序canvas合成图片分享先要获取图片的信息然后将需要合成的内容用canvas绘制出来，得到一个合成好的画布，接下来用 wx.canvasToTempFilePath 把当前画布指定区域的内容导出生成指定大小的图片，并返回文件路径。这个时候的路径是微信的临时路径，浏览器是访问不了的，因此需要请求服务器用 wx.uploadFile 将本地资源上传到开发者服务器。在页面的wxml中加入canvas组件如下： ...

⋅【国际惯例陞星散分】 ⋅【散分贴】 ⋅【国际惯例】生星散分... 更多帖子 关注空间博客 hookee 本版专家分：188145 进士 2009年总版技术专家分年内排行榜第七 金牌 2009年9月总版技术专家分月排行榜第一 银牌 2009年8月总版技术专家分月排行榜第二 红花 2011年11月 Web 开发大版内专家分月排行榜第一 2009年10月 Web 开发大版内专家分月排行榜第一 2009年9月 Web 开发大版内专家分月排行榜第一 2009年8月 Web 开发大版内专家分月排行榜第一 2009年7月 Web 开发大版内专家分月排行榜第一 2009年6月 Web 开发大版内专家分月排行榜第一 2007年7月 Web 开发大版内专家分月排行榜第一 2007年6月 Web 开发大版内专家分月排行榜第一: 支持一下~~

0 2015-08-10 13:56:31

只看TA 引用举报 #17 得分 0

小程序中使用canvas 生成推广图片——wepy框架现在小程序不能直接分享到朋友圈，所以另辟蹊径的有了生成 ‘推广图’ 让用户分享到朋友圈的方式就出来了。使用canvas 进行绘图的时候主要用了 ctx.drawImage() API进行绘画，但是ctx.drawImage()只支持本地形式的图片，所以我们要先将网络图片转化成本地图片 1.将网络图片转化成本地图片 wx.downloadFile({ url: 'https:/...

⋅求助 ⋅有没有人做过抓取网页内容后，在移动端优化排版的功能 ⋅人最怕的是什么？ 更多帖子 关注空间博客 spidermanlhg10 本版专家分：0

引用 1 楼 tianma630 的回复:

在线画图



<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

<canvas width="600" height="600" id="canvas" style="border:1px solid red;"></canvas>

<script>

    var canvas = document.getElementById('canvas');

    var cxt = canvas.getContext('2d');



    canvas.onmousedown = function(ev){

        var x = ev.clientX - canvas.offsetLeft;

        var y = ev.clientY - canvas.offsetTop;

        cxt.beginPath();

        cxt.moveTo(x, y);



        document.onmousemove = function(ev){

            var x = ev.clientX - canvas.offsetLeft;

            var y = ev.clientY - canvas.offsetTop;

            cxt.lineTo(x, y);

            cxt.stroke();

        };

    };



    document.onmouseup = function(){

        cxt.closePath();

        document.onmousemove = null;

    };



</script>

</body>

</html>

好高级

0 2015-08-10 14:26:31

只看TA 引用举报 #18 得分 0

【小案例分享】7组超炫酷的 HTML5 Canvas 全屏动画背景今天来个大的栗子,分享一款超炫酷的HTML5 Canvas全屏动画背景，一共有7组Canvas动画。如果网页需要一种类似屏保动画的特效，那么这款HTML5 Canvas动画可以很好的满足你的需求。大神发的,觉得很炫酷,很强大,所以拿出来给大家分享! 效果图预览:http://blog.csdn.net/love_xiolan/article/details/52711874

⋅求助 ⋅有没有人做过抓取网页内容后，在移动端优化排版的功能 ⋅人最怕的是什么？ 更多帖子 关注空间博客 spidermanlhg10 本版专家分：0

引用 18 楼 spidermanlhg 的回复:

Quote: 引用 1 楼 tianma630 的回复:

在线画图



<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

<canvas width="600" height="600" id="canvas" style="border:1px solid red;"></canvas>

<script>

    var canvas = document.getElementById('canvas');

    var cxt = canvas.getContext('2d');



    canvas.onmousedown = function(ev){

        var x = ev.clientX - canvas.offsetLeft;

        var y = ev.clientY - canvas.offsetTop;

        cxt.beginPath();

        cxt.moveTo(x, y);



        document.onmousemove = function(ev){

            var x = ev.clientX - canvas.offsetLeft;

            var y = ev.clientY - canvas.offsetTop;

            cxt.lineTo(x, y);

            cxt.stroke();

        };

    };



    document.onmouseup = function(){

        cxt.closePath();

        document.onmousemove = null;

    };



</script>

</body>

</html>

好高级

学习

0 2015-08-10 14:27:13

只看TA 引用举报 #19 得分 0

Canvas绘制Bitmap 友盟分享纯图片至微信好友 1.需求场景Android开发中，有将带有二维码的纯图片分享给微信需求，左是分享一张内容固定图片，右是需求实现图片目前，我们有一个需求是不同用户报名活动成功后分享出去的图片会带有（红框部分）信息 2.需求分析查看友盟开发文档new ShareAction(ShareActivity.this).withText("hello").withMed...

glzxe 本版专家分：0: 谢谢！学习！

0 2015-08-12 10:57:22

只看TA 引用举报 #21 得分 0

微信小程序-使用canvas生成含有微信头像的图片并分享我们的需求是动态生成一个含有微信头像的图片作为分享图片。我们在页面中添加cancas &lt;view style='position:absolute;left:400rpx;'&gt;&lt;canvas canvas-id='ttcanvas' style='height:240px;width:320px;position:absolute;left:400rpx;'&gt; ...

lzh3ng 本版专家分：6: 0 2015-08-12 13:26:48

只看TA 引用举报 #22 得分 0

小程序 Canvas base64 二维码分享做小程序二维码分享的时候遇到的问题。因为时间关系公司也没做文件服务器所以没有指定的文件路径没有办法使用最简单的在线读取文件。所以小程序码是使用一次生成一次的后端是使用java（我自己）访问小程序接口获取小程序二维码然后转换成base64返回给前端(还是我自己)。显示的时候是没有问题的，小程序的图片显示本身也支持base64，但是在绘制的时候问题就出现了，Canvas不支持base64，然后我...

⋅送积分了！如果再有一次机会让你选择，你还会选择程序员，选择前端吗？

⋅送积分了！！！一个前端如何让自己闪光？

⋅送400积分了！！！为了庆祝粉丝即将达到5000！只差40个了！

更多帖子

关注空间博客

业余草

本版专家分：21307

版主

GitHub 绑定GitHub第三方账户获取

优秀版主 2015年8月优秀小版主
2015年5月优秀小版主
2015年4月html5优秀版主

蓝花 2015年7月 Web 开发大版内专家分月排行榜第三: 恩，很不错，多多的分享

0 2015-08-12 13:31:52

只看TA 引用举报 #23 得分 0

uniapp canvas绘图生成海报组件：tki-qrcode.vue 交流群：836383650 <template> <view class="content"> <button type="primary" @tap="saveToAlbum">保存</button> <view class="post"> <tki-qrcode ref=...

⋅Android 蓝牙耳机没声音 ⋅我导入koral--/android-gif-drawable又问题，怎么解决 ⋅android-gif-drawable在android studio上怎么配置 更多帖子 关注空间博客 ldmlm 本版专家分：0: 我最最近需做一个这样的布局，该怎么画

0 2015-08-12 17:29:48

只看TA 引用举报 #24 得分 0

微信小程序之生成图片分享二维码分享 canvas绘制如果本文对你有用，请爱心点个赞，提高排名，帮助更多的人。谢谢大家！❤ 如果解决不了，可以在文末进群交流。添加画布首先，在小程序里进行绘图操作需要用到<canvas>组件，步骤大致分为以下3个部分：一张大的背景图，一段动态的文字（‘标题用户名及其他信息’），以及一个小程序码图片。那我们就先在我们的wxml代码中放入如下的<canvas>： &lt...

⋅前端面试分享 ⋅canvas实例分享 ⋅HTML5版贪吃蛇 更多帖子 关注空间博客 tianma630 本版专家分：345 黄花 2013年4月 Java大版内专家分月排行榜第二

加载效果



<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>加载效果</title>

</head>

<body>

<canvas width="600" height="600" id="canvas" style="border:1px solid red;"></canvas>

<input type="button" id="start" value="start">

<input type="button" id="stop" value="stop">

<script>

    (function(window){



        var timer;

        var iStop = true;

        var degree = 0;



        var cxt = null;

        var _x = 0;

        var _y = 0;



        var fillStyles = [

            'rgba(255, 0, 0, 1)',

            'rgba(255, 0, 0, 0.6)',

            'rgba(255, 0, 0, 0.3)',

            'rgba(255, 0, 0, 0.1)',

            'rgba(0, 0, 255, 1)',

            'rgba(0, 0, 255, 0.6)',

            'rgba(0, 0, 255, 0.3)',

            'rgba(0, 0, 255, 0.1)'

        ];



        function draw() {

            for(var i=0; i<8; i++){

                cxt.save();

                cxt.beginPath();

                cxt.translate(_x, _y);

                cxt.rotate(-degree*Math.PI/180);

                cxt.moveTo(0, 0);

                cxt.fillStyle = fillStyles[i];

                cxt.arc(0, 0, 100, i*45*Math.PI/180, (i+1)*45*Math.PI/180, false);

                cxt.closePath();

                cxt.fill();

                cxt.restore();



                if(degree++ == 360){

                    degree = 0;

                }

            }



            cxt.save();

            cxt.beginPath();

            cxt.fillStyle = 'white';

            cxt.arc(_x, _y, 60, 0, 360*Math.PI/180, false);

            cxt.closePath();

            cxt.fill();

            cxt.restore();

        }



        function erase() {

            cxt.clearRect(0, 0, canvas.width, canvas.height)

        }



        function animate() {

            erase();

            draw();

            if(iStop){

                cancelRequestAnimationFrame(timer);

            }else{

                timer = requestAnimationFrame(animate);

            }

        }



        window.Ykload = function(canvas){

            cxt = canvas.getContext('2d');



            _x = canvas.width/2;

            _y = canvas.height/2;

        };



        window.Ykload.prototype.start = function(){

            if(iStop == true) {

                iStop = false;

                animate();

            }

        };



        window.Ykload.prototype.end = function(){

            iStop = true;

        };

    })(window);





    var canvas = document.getElementById('canvas');



    var ykload = new Ykload(canvas);



    document.getElementById('start').onclick = function(){

        ykload.start();

    };



    document.getElementById('stop').onclick = function(){

        ykload.end();

    };



</script>

</body>

</html>



<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

<canvas width="600" height="600" id="canvas" style="border:1px solid red;"></canvas>

<script>

    var canvas = document.getElementById('canvas');

    var cxt = canvas.getContext('2d');



    var timer;

    var index = 0;

    var degree = 0;



    function erase() {

        cxt.clearRect(0, 0, canvas.width, canvas.height)

    }



    function draw() {

        for(var i=0; i<36; i++){

            cxt.save();

            cxt.beginPath();

            cxt.translate(300, 300);

            cxt.rotate(degree*Math.PI/180);

            cxt.moveTo(0, 0);

            cxt.fillStyle = 'rgba(255, 0, 0, '+1/36*i+')';

            cxt.arc(0, 0, 50, i*10*Math.PI/180, (i+1)*10*Math.PI/180, false);

            cxt.closePath();

            cxt.fill();

            cxt.restore();

        }



        cxt.save();

        cxt.beginPath();

        cxt.fillStyle = 'white';

        cxt.arc(300, 300, 20, 0, 360*Math.PI/180, false);

        cxt.closePath();

        cxt.fill();

        cxt.restore();



        degree += 5;

        if(degree == 360){

            degree = 0;

        }

    }



    function animate() {

        erase();

        draw();

        index ++;

        timer = requestAnimationFrame(animate);

    }



    animate();

    //requestAnimationFrame(animate);



</script>

</body>

</html>

0 2015-08-13 02:36:32

只看TA 引用举报 #25 得分 0

⋅前端面试分享 ⋅canvas实例分享 ⋅HTML5版贪吃蛇 更多帖子 关注空间博客 tianma630 本版专家分：345 黄花 2013年4月 Java大版内专家分月排行榜第二

像素效果



<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>像素操作</title>

</head>

<body>

<canvas width="400" height="400" id="canvas" style="border:1px solid red;"></canvas>

<script>



    var canvas = document.getElementById('canvas');

    var cxt = canvas.getContext('2d');



    var timer;

    var iStop = false;



    function draw(){



        cxt.save();

        cxt.font="80px Verdana";

        cxt.fillStyle = 'red';

        cxt.fillText('游戏结束！', 25, 200);

        cxt.restore();



        var oImg = cxt.getImageData(0,0, canvas.width, canvas.height);

        //var oImg = cxt.createImageData(canvas.width, canvas.height);





        for(var i=0; i<oImg.width*oImg.height; i++){



            if(Math.random() >= 0.5){

                oImg.data[4*i+3] = 0;

            }

        }



        cxt.putImageData(oImg,0,0);

    }



    function erase(){

        cxt.clearRect(0, 0, canvas.width, canvas.height);

    }



    window.requestAnimationFrame =

            window.requestAnimationFrame ||

            window.mozRequestAnimationFrame ||

            window.webkitRequestAnimationFrame ||

            window.msRequestAnimationFrame;



    window.cancelRequestAnimationFrame =

            window.cancelRequestAnimationFrame ||

            window.mozCancelRequestAnimationFrame ||

            window.webkitCancelRequestAnimationFrame ||

            window.msCancelRequestAnimationFrame;



    function animate() {

        //erase();

        draw();

        /*if(iStop){

            cancelRequestAnimationFrame(timer);

        }else{

            timer = requestAnimationFrame(animate);

        }*/

    }



    animate();





</script>

</body>

</html>

0 2015-08-13 02:38:17

只看TA 引用举报 #26 得分 0

微信小程序采坑记录 ------- canvas 生成带小程序码的微信朋友圈分享图最近做了一个问卷类的小程序，其中的结果页想让用户进行朋友圈分享转发，网上搜索资料，得出解决思路，用 canvas 将页面绘制生成图片，然后保存到手机相册，最终效果如下：在这里我只写页面里关于 canvas 生成图片并进行保存这个流程的相关代码，并且会在我踩过的坑那里进行具体的讲述。废话不多说直接上干货 wxml &amp;amp;amp;amp;amp;lt;!-- 调用canvas图片绘制方法按...

⋅前端面试分享 ⋅canvas实例分享 ⋅HTML5版贪吃蛇 更多帖子 关注空间博客 tianma630 本版专家分：345 黄花 2013年4月 Java大版内专家分月排行榜第二

赛车



<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>赛车</title>

    <style>

        #btn{

            width: 60px;

            height: 30px;

            line-height: 30px;

            background: #7EC0EE;

            border: 2px solid #8A2BE2;

            font-size: 20px;

            text-align: center;

            font-weight: bold;

            border-radius: 5px;

            box-shadow: 0 2px 2px #8A2BE2;

            display: block;

            position: absolute;

            top:30px;

            left: 140px;

            cursor: pointer;

        }



        #sd{

            position: absolute;

            top:30px;

            left: 30px;

            border: 2px solid #8A2BE2;

            width: 100px;

            height: 30px;

            line-height: 30px;

            border-radius: 5px;

            font-size: 20px;

            text-align: center;

        }

    </style>

</head>

<body>

<canvas width="200" height="500" id="canvas" style="border:10px solid #A2CD5A;"></canvas>

<input type="text" placeholder="难度(1-5)" id="sd">

<div id="btn">开始</div>

<script>

    var canvas = document.getElementById('canvas');

    var cxt = canvas.getContext('2d');



    // 定时器

    var timer;

    // 游戏是否结束

    var iStop;

    // 赛车

    var car;

    // 障碍物

    var blocks;

    // 障碍物速度

    var speed;



    // 清除画布

    function erase(){

        cxt.clearRect(0, 0, canvas.width, canvas.height);

    }



    function init(){

        iStop = false;

        // 赛车

        car = {'x':0,'y':450,'width':50, 'height':50};

        // 障碍物

        blocks = [

            {'x':-0,'y':-50,'width':50, 'height':50},

            {'x':50,'y':-50,'width':50, 'height':50},

            {'x':100,'y':-50,'width':50, 'height':50},

            {'x':0,'y':250,'width':50, 'height':50},

            {'x':50,'y':250,'width':50, 'height':50},

            {'x':150,'y':250,'width':50, 'height':50}

        ];

        speed = 2;

    }



    // 绘图

    function draw(){

        cxt.save();

        cxt.fillRect(car.x, car.y, car.width, car.height);

        for(var i=0;i<blocks.length;i++){

            cxt.fillRect(blocks[i].x, blocks[i].y, blocks[i].width, blocks[i].height);

            if(blocks[i].y > 400 && blocks[i].x == car.x){

                iStop = true;

            }

        }

        cxt.restore();

    }



    // 障碍物前进

    function step(){

        var _blocks = [];



        for(var i=0;i<blocks.length;i++){

            blocks[i].y += speed;

            if(blocks[i].y < 500){

                _blocks.push(blocks[i]);

            }

        }



        if(_blocks.length == 3){

            var out = Math.round(Math.random()*3);

            for(var j=0; j<4; j++){

                if(j != out){

                    _blocks.push({'x':(50*j),'y':-50,'width':50, 'height':50});

                }

            }

        }



        blocks = _blocks;

    }



    function drawOver() {

        cxt.save();

        cxt.font="20px Verdana";

        cxt.fillStyle = 'yellow';

        cxt.fillText('游戏结束！', 75, 200);

        cxt.restore();

    }



    // 键盘控制赛车左右(<-、->)运动

    var last = new Date();

    document.onkeydown = (function(e){

        var now = new Date();

        if(now.getTime() - last.getTime() < 100){

            return;

        }

        last = now;

        switch(e.which){

            case 39:

                if(car.x < 150){

                    car.x += 50;

                }

                break;

            case 37:

                if(car.x > 0){

                    car.x -= 50;

                }

                break;

        }

    });



    window.requestAnimationFrame =

            window.requestAnimationFrame ||

            window.mozRequestAnimationFrame ||

            window.webkitRequestAnimationFrame ||

            window.msRequestAnimationFrame;



    window.cancelRequestAnimationFrame =

            window.cancelRequestAnimationFrame ||

            window.mozCancelRequestAnimationFrame ||

            window.webkitCancelRequestAnimationFrame ||

            window.msCancelRequestAnimationFrame;



    function animate() {

        erase();

        draw();

        step();

        if(iStop){

            cancelRequestAnimationFrame(timer);

            drawOver();

        }else{

            timer = requestAnimationFrame(animate);

        }

    }



    //animate();



    document.querySelector('#btn').onclick = function(){

        if(this.innerHTML == '开始'){

            init();



            var s = document.querySelector('#sd').value;

            if(s != ''){

                speed = parseInt(s);

            }



            animate();

            this.innerHTML = '结束';

        }else{

            cancelRequestAnimationFrame(timer);

            this.innerHTML = '开始';

        }

    }



</script>

</body>

</html>

0 2015-08-13 02:40:06

只看TA 引用举报 #27 得分 0

刮刮卡，大转盘，canvas实例，localstorage源码逐步搞懂html5,分享几个实例应用。案例成熟，可以实际项目运用。刮刮卡，大转盘，canvas实例，localstorage源码

cattpon 本版专家分：206: 好好研究~感谢分享

0 2015-08-13 07:52:02

只看TA 引用举报 #28 得分 0

react-native 画一画和保存为图片分享及保存。本文主要使用知识webview和rn通讯；html 中的canvas画布保存为base64地址回掉给rn；本篇为本人亲自写的一个项目活动，现在分享给大家；1.ValentinesDay.js文件/** * Sample React Native App * https://github.com/facebook/react-native * @flow */import React, { Comp...

⋅前端面试分享 ⋅canvas实例分享 ⋅HTML5版贪吃蛇 更多帖子 关注空间博客 tianma630 本版专家分：345 黄花 2013年4月 Java大版内专家分月排行榜第二

射击游戏



<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>飞碟射击</title>

</head>

<body>

<canvas width="600" height="400" id="canvas" style="border:1px solid red;"></canvas>

<script>

    var canvas = document.getElementById('canvas');

    var cxt = canvas.getContext('2d');



    // 射击角度

    var ang = 0;

    // 子弹

    var bullets = [];

    // 飞碟

    var fly = {'x':100, 'y':100};

    // 得分

    var score = 0;



    // 清除画布

    function erase() {

        cxt.clearRect(0, 0, canvas.width, canvas.height)

    }



    // 画炮台

    function draw() {

        cxt.save();

        cxt.beginPath();

        cxt.translate(300, 400);

        cxt.arc(0, 0, 100, 0, -180*Math.PI/180, true);

        cxt.stroke();

        cxt.closePath();

        cxt.restore();



        cxt.save();

        cxt.translate(300, 400);

        cxt.rotate(ang);

        cxt.fillRect(-10, -100, 20, 80);

        cxt.restore();

    }



    // 画飞碟

    function drawFly(){

        cxt.save();

        cxt.fillStyle = 'red';

        cxt.beginPath();

        cxt.arc(fly.x, fly.y, 10, 0, 360*Math.PI/180, true);

        cxt.fill();

        cxt.closePath();

        cxt.restore();

    }



    // 画子弹

    function drawBullet(){

        for(var i=0; i<bullets.length; i++){

            cxt.save();

            cxt.translate(300, 400);

            cxt.rotate(bullets[i].ang);

            cxt.fillStyle = 'grey';

            cxt.beginPath();

            cxt.arc(bullets[i].x, bullets[i].y, 10, 0, 360*Math.PI/180, true);

            cxt.fill();

            cxt.closePath();

            cxt.restore();

        }

    }



    // 随机飞碟

    function randomBullet(){

        var x = Math.round(Math.random()*580) + 10;

        var y = Math.round(Math.random()*190) + 10;

        fly.x = x;

        fly.y = y;

    }



    // 子弹运行

    function step(){

        var _bullets = [];

        for(var i=0; i<bullets.length; i++){



            var x = 300 - Math.sin(bullets[i].ang)*bullets[i].y;

            var y = 400 - Math.abs(Math.cos(bullets[i].ang)*bullets[i].y);



            if(Math.sqrt((fly.x-x)*(fly.x-x)+(fly.y-y)*(fly.y-y)) < 20){

                score ++;

                randomBullet();

            }



            bullets[i].y -= 5;

            if(bullets[i].y > -500 && bullets[i].x > -300 && bullets[i].x < 300){

                _bullets.push(bullets[i]);

            }

        }

        bullets = _bullets;

    }



    // 画得分

    function drawScore() {

        cxt.save();

        cxt.font="20px Verdana";

        cxt.fillStyle = 'skyblue';

        cxt.fillText('得分：' + score, 500, 50);

        cxt.restore();

    }



    // 鼠标移动控制炮台

    canvas.onmousemove = function(e){

        var ev = e || window.event;

        var _x = ev.clientX - canvas.offsetLeft;

        var _y = ev.clientY - canvas.offsetTop;

        if(Math.sqrt((_x-300)*(_x-300)+(_y-400)*(_y-400)) <=100){

            ang = Math.atan((_x - 300)/(400 - _y));

        }

    };



    // 单击鼠标进行射击

    var lastTime = 0;

    canvas.onclick = function(){

        var nowDate = new Date();

        if(nowDate.getTime() - lastTime < 200){

            return;

        }

        lastTime = nowDate.getTime();

        var bullet = {'x':0,'y':-110,'ang':ang};

        bullets.push(bullet);

    };



    function animate() {

        erase();

        draw();

        drawFly();

        drawBullet();

        step();

        drawScore();

        timer = requestAnimationFrame(animate);

    }



    animate();



</script>

</body>

</html>

0 2015-08-17 02:46:14

只看TA 引用举报 #29 得分 0

canvas的简单实例集合这里讲解一些canvas的实例demo，大家可以参考着看看，希望对你有一定的帮助。这里的demo主要是：canvas 绘制路径、绘制矩形、绘制文本、绘制圆形和扇形、设置渐变色、设置渐变色、图像处理方法、动画HTML代码<canvas id="myCanvas" width="400" height="200"> 您的浏览器不支持canvas！ </canva

⋅前端面试分享 ⋅canvas实例分享 ⋅HTML5版贪吃蛇 更多帖子 关注空间博客 tianma630 本版专家分：345 黄花 2013年4月 Java大版内专家分月排行榜第二

太阳系效果



<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>太阳系</title>

</head>

<body>

<canvas width="1000" height="1000" id="solar" style="background: #000000"></canvas>

<script>

    var solar = document.getElementById('solar');

    var cxt = solar.getContext('2d');



    // 轨道

    function drawTrack(){

        for(var i=0; i<8; i++){

            cxt.beginPath();

            cxt.arc(500, 500, (i+1)*50, 0, 360, false);

            cxt.closePath();

            cxt.strokeStyle = 'white';

            cxt.stroke();

        }

    }



    drawTrack();



    function drawStar(x, y, radius, cycle, sColor, eColor) {

        this.x = x;

        this.y = y;

        this.radius = radius;

        this.cycle = cycle;

        this.sColor = sColor;

        this.eColor = eColor;

        this.color = null;

        this.time =0;

        this.draw = function(){

            cxt.save();

            cxt.translate(500, 500);

            cxt.rotate(this.time*(360/this.cycle)*Math.PI/180);

            cxt.beginPath();

            cxt.arc(this.x, this.y, this.radius, 0, 360, false);

            cxt.closePath();

            this.color = cxt.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.radius);

            this.color.addColorStop(0, this.sColor);

            this.color.addColorStop(1, this.eColor);

            cxt.fillStyle = this.color;

            cxt.fill();

            cxt.restore();



            this.time += 1;

        }

    }



    function Sun(){

        drawStar.call(this, 0, 0, 20, 0, '#f00', '#f90');

    }



    function Mercury(){

        drawStar.call(this, 0, -50, 10, 87.70, '#a69697', '#5c3e40');

    }



    function Venus(){

        drawStar.call(this, 0, -100, 10, 224.701, '#c4bbac', '#1f1315');

    }



    function Earth(){

        drawStar.call(this, 0, -150, 10, 365.224, '#78b1e8', '#050c12');

    }



    function Mars(){

        drawStar.call(this, 0, -200, 10, 686.98, '#cec9b6', '#76422d');

    }



    function Jupiter(){

        drawStar.call(this, 0, -250, 10, 4332.589, '#c0a48e', '#322222');

    }



    function Saturn(){

        drawStar.call(this, 0, -300, 10, 10759.5, '#f7f9e3', '#5c4533');

    }



    function Uranus(){

        drawStar.call(this, 0, -350, 10, 30799.095, '#a7e1e5', '#19243a');

    }



    function Neptune(){

        drawStar.call(this, 0, -400, 10, 60152, '#0661b2', '#1e3b73');

    }

    var sun = new Sun();





    var mercury = new Mercury();





    var venus = new Venus();





    var earth = new Earth();





    var mars = new Mars();





    var jupiter = new Jupiter();





    var saturn = new Saturn();





    var uranus = new Uranus();





    var neptune = new Neptune();





    function move(){

        cxt.clearRect(0, 0, 1000, 1000);

        drawTrack();

        sun.draw();

        mercury.draw();

        venus.draw();

        earth.draw();

        mars.draw();

        jupiter.draw();

        saturn.draw();

        uranus.draw();

        neptune.draw();

    }



    setInterval(move, 20);



</script>

</body>

</html>

0 2015-08-17 02:50:20

只看TA 引用举报 #30 得分 0

⋅前端面试分享 ⋅canvas实例分享 ⋅HTML5版贪吃蛇 更多帖子 关注空间博客 tianma630 本版专家分：345 黄花 2013年4月 Java大版内专家分月排行榜第二

弹跳效果



<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>弹跳效果</title>

</head>

<body>

<div id="skelet">

    <canvas width="600" height="600" id="canvas"></canvas>

    <script>



        var canvas = document.getElementById('canvas');

        var cxt = canvas.getContext('2d');



        var timer;

        var gravity = 1;

        var buffer = 5;



        var iStop = false;



        var boxes = [

            {'startSpeed':-20,'currentSpeed':-20,'boxTop':500,'boxLeft':0},

            {'startSpeed':-10,'currentSpeed':-10,'boxTop':500,'boxLeft':100},

            {'startSpeed':-30,'currentSpeed':-30,'boxTop':500,'boxLeft':200},

            {'startSpeed':-10,'currentSpeed':-10,'boxTop':500,'boxLeft':300},

            {'startSpeed':-20,'currentSpeed':-20,'boxTop':500,'boxLeft':400}

        ];



        function draw(){

            for(var i=0; i<boxes.length; i++){

                boxes[i].currentSpeed += gravity;

                boxes[i].boxTop += boxes[i].currentSpeed;

                if(boxes[i].boxTop > 500){

                    boxes[i].boxTop -= boxes[i].currentSpeed;

                }



                cxt.fillRect(boxes[i].boxLeft, boxes[i].boxTop, 100, 100);

                if(boxes[i].boxTop >= 500){

                    boxes[i].startSpeed += buffer;

                    boxes[i].currentSpeed = boxes[i].startSpeed;

                }

            }

        }



        function erase(){

            cxt.clearRect(0, 0, 600, 600);

        }



        window.requestAnimationFrame =

                window.requestAnimationFrame ||

                window.mozRequestAnimationFrame ||

                window.webkitRequestAnimationFrame ||

                window.msRequestAnimationFrame;



        window.cancelRequestAnimationFrame =

                window.cancelRequestAnimationFrame ||

                window.mozCancelRequestAnimationFrame ||

                window.webkitCancelRequestAnimationFrame ||

                window.msCancelRequestAnimationFrame;



        function animate() {

            erase();

            draw();



            if(iStop){

                cancelRequestAnimationFrame(timer);

            }else{

                timer = requestAnimationFrame(animate);

            }

        }



        animate();





    </script>

</div>

</body>

</html>