论坛 › Web密训营 › 技法53 (◐‿◑) 利用Canvas画一个“吃豆人”

不二如是 发表于 2017-6-26 07:07:10

技法53 (◐‿◑) 利用Canvas画一个“吃豆人”

http://xxx.fishc.com/forum/201705/05/225545py2j222x5z6x55n2.png

按照提示，完成代码，秀秀你的编程能力！

不许看答案，否则打屁屁



程序分析：
利用定时器，绘制两个图案，图像各个表情用Cavas函数绘制       

源代码：
**** Hidden Message *****




○面试题索引贴●
如果喜欢，请订阅{:10_303:} ：
HTML5 - 庖丁解牛 + JavaScript - 庖丁解牛

李金龙 发表于 2017-6-26 08:51:31

{:10_254:}我要看代码

不二如是 发表于 2017-6-26 18:46:57

李金龙 发表于 2017-6-26 08:51
我要看代码


热烈欢迎李总～

李金龙 发表于 2017-6-26 19:13:41

不二如是 发表于 2017-6-26 18:46
热烈欢迎李总～

然后我点击打开了，瞬间我就关闭了，我怕心里有阴影

yangtianyu 发表于 2017-10-28 23:05:26

想看代码

佳阳 发表于 2017-11-18 10:05:35

好奇

木偶 发表于 2017-12-21 13:24:32

{:5_91:}

lh625243422 发表于 2017-12-26 20:38:51

看看大神怎么写

joker.... 发表于 2018-1-2 21:42:59

{:5_106:}

Evan.yin 发表于 2018-3-18 09:21:38

看看

Summoniyin 发表于 2018-3-19 17:57:02

我丢了一匹码

向一朵朵鲜花 发表于 2018-5-5 08:54:47

读下代码．

dsa159245 发表于 2018-7-6 01:11:09

<script>
                        var c = c1.getContext('2d');
                       
                        function a(){
                                c.beginPath();
                                c.arc(333,333,150,0,Math.PI*2);
                                c.stroke();
                               
                                c.beginPath();
                                c.arc(350,250,40,0,Math.PI*2);
                                c.fillStyle = "blue";
                                c.fill();
                                c.stroke();
                               
                                c.beginPath();
                                c.arc(370,235,10,0,Math.PI*2);
                                c.fillStyle = "#fff";
                                c.fill();
                                c.stroke();
                               
                               
                                c.moveTo(333,333);
                                c.lineTo(483,333);
                                c.stroke();
                        }
                        var cool = Math.PI/180;
                        function b(){
                                c.beginPath();
                                c.moveTo(333,333);
                                c.closePath();
                                c.arc(333,333,150,45*cool,315*cool);
                                c.closePath();
                                c.stroke();
                               
                                c.beginPath();
                                c.arc(350,250,40,0,Math.PI*2);
                                c.fillStyle = "blue";
                                c.fill();
                                c.stroke();
                               
                                c.beginPath();
                                c.arc(370,235,10,0,Math.PI*2);
                                c.fillStyle = "red";
                                c.fill();
                                c.stroke();
                        }
                        var n = 1;
                        var t = setInterval(function(){
                                c.clearRect(0,0,666,666);
                                if(n == 1){
                                        b();
                                        n = 2;
                                }else{
                                        a();
                                        n = 1;
                                }
                               
                               
                               
                        },1000);
                       
                       
                </script>

旭儿大大 发表于 2018-8-28 19:12:47

看代码

#NEVER 发表于 2018-9-4 16:41:53

看一下

边逗比大人 发表于 2018-9-7 18:51:45

JHGJ

a211827754 发表于 2018-9-25 17:03:52

good job

我叫MD 发表于 2019-8-9 19:56:47

过来学习ia

良辰学习找女友 发表于 2019-8-10 15:41:54

不会哈哈哈

Lfssst 发表于 2019-10-24 15:20:14

回复

查看完整版本: 技法53 (◐‿◑) 利用Canvas画一个“吃豆人”