利用canvas来绘制一个会动的图画

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>绘制小人动画</title>
 6     <style>
 7         canvas{
 8             border: 1px solid green;
 9         }
10     </style>
11 </head>
12 <body>
13     <!-- 绘制小人动画 -->
14     <canvas width="400" height="600" id="canvas"></canvas>
15 </body>
16 <script>
17     var canvas = document.getElementById('canvas');
18     var ctx = canvas.getContext('2d');
19     function toAngle(radian){
20         return radian*180/Math.PI;
21     }
22     function toRadian(angle){
23         return angle*Math.PI/180;
24     }
25     function img(ctx,element,x0,y0){
26         var x = x0,
27             y = y0;
28         element.onload = function(){
29             var width = element.width/4,
30             height = element.height/4;
31             var i = 0,
32                 j = 0,
33                 a = 0;
34             setInterval(function(){
35                 //x = x   a;
36                 ctx.clearRect(x,y,width,height);
37                 ctx.drawImage(element,width*i,height*j,width,height,x,y,width,height);
38                 i   ;
39                 if(i == 4){
40                     setTimeout(function(){
41                         i = 0;
42                         if(j == 0){
43                             j =1;
44                             //a-=10;
45                         }else if(j == 1){
46                             j = 3;
47                         }else if(j == 2){
48                             j = 0;
49                         }else if(j == 3){
50                             j = 2;
51                             //a =10;
52                         }
53                     },20)
54                 }
55             },200)
56         }
57     };
58         var img1 = new Image();
59         img1.src = 'imgs/game1.png';
60         var img2 = new Image();
61         img2.src = 'imgs/game2.png';
62         var img3 = new Image();
63         img3.src = 'imgs/game3.png';
64         var img4 = new Image();
65         img4.src = 'imgs/game4.png';
66         var img5 = new Image();
67         img5.src = 'imgs/game5.png';
68         var img6 = new Image();
69         img6.src = 'imgs/game6.png';
70         var img7 = new Image();
71         img7.src = 'imgs/game7.png';
72         var img8 = new Image();
73         img8.src = 'imgs/game8.png';
74         var img9 = new Image();
75         img9.src = 'imgs/game9.png';
76         var img10 = new Image();
77         img10.src = 'imgs/game10.png';
78         var img11 = new Image();
79         img11.src = 'imgs/game11.png';
80         var img12 = new Image();
81         img12.src = 'imgs/game12.png';
82         img(ctx,img1,0,0);
83         img(ctx,img2,50,0);
84         img(ctx,img3,100,0);
85         img(ctx,img4,150,0);
86         img(ctx,img5,200,0);
87         img(ctx,img6,250,0);
88         img(ctx,img7,300,0);
89         img(ctx,img8,350,0);
90         img(ctx,img9,0,100);
91         img(ctx,img10,50,100);
92         img(ctx,img11,100,100);
93         img(ctx,img12,150,100);
94 </script>
95 </html>

/这边是自己封装了一个函数，其实从性能优化的角度来考虑，我们可以先在内存中创建一个canvas标签，将这个图画放在内存中的canvas里面，再将内存中创建好的canvas放到页面上的这个canvas标签上，这只是一个思路，希望大家可以往这方面考虑

更多专业前端知识，请上【猿2048】www.mk2048.com

利用canvas来绘制一个会动的图画相关推荐

HTML1个像素宽的代码,HTML5 Canvas中绘制一个像素宽的细线实现代码详情
正统的HTML5 Canvas中如下代码ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(10, 100); ctx.lineTo(300,100); ct ...
教你如何利用canvas画布绘制哆啦A梦
教你如何利用canvas画布绘制哆啦A梦最近一直在练习使用canvas画布标签,今天教大家如何使用canvas画布绘制哆啦A梦.如图: HTML代码: <canvas id="my_ ...
android canvas 画按钮,Android 用Canvas轻松绘制一个时钟
接下来这篇文章主要是结束如何轻松自定义一个View并使用Canvas绘制一个时钟的案例,话不多说先上图瞅瞅,一共实现了两种效果,一种是秒动(秒针一秒走一针).另一种是连动式的,秒针不会停会一直走动,话 ...
html绘制动态小人,JavaScript和html5 canvas如何绘制一个小人的代码
这篇文章主要介绍了JavaScript+html5 canvas绘制的小人效果,涉及JavaScript结合html5 canvas图形绘制及颜色随机填充的技巧,需要的朋友可以参考下本文实例讲述了J ...
利用C程序绘制一个正方形的矢量图形，不借助其他类库
为了在 C 语言中绘制一个正方形的矢量图形,你需要使用到 C 语言中的循环结构和字符串函数. 首先,你需要在程序中定义一个变量来表示正方形的边长.然后,使用一个循环结构,每次迭代输出一行字符串,字符串 ...
RE：利用爬虫技术制作一个看动漫新番的APP
作者:hwj3747 转载请注明简介在看动漫追番的时候,发现每一季度的新番都是被优酷,爱奇艺,哔哩哔哩,PPTV等各大视频厂商买了版权,导致我在手机上要装各种软件,并且很多番更是直接被广电禁掉了, ...
HTML5利用canvas画布绘制哆啦A梦
效果图: 源码如下: <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
无角正方形的绘制。利用turtle库函数绘制一个没有角的正方形。
程序练习题2.6 import turtle turtle.setup(650,500,200,200) turtle.pensize(15) turtle.pencolor("blue&q ...
六角形的绘制。利用turtle库绘制一个六角形。
# 程序练习题2.7 import turtle turtle.setup(650,350,200,200) turtle.pensize(15) turtle.pencolor("blue ...

利用canvas来绘制一个会动的图画

利用canvas来绘制一个会动的图画相关推荐

最新文章

热门文章