js高手之路

永利皇宫402

总结运用前边所学,实现二个花团锦簇的小球动画,那个实例用到的知识点,在自己的博客全体都有,能够去这里查阅全体的canvas教程

 1 <head>
 2     <meta charset='utf-8' />
 3     <title>canvas炫彩小球 - By ghostwu</title>
 4     <style>
 5         #canvas {
 6             border: 1px dashed #aaa;
 7         }
 8     </style>
 9     <script>
10         function Ball(x, y, r, color) {
11             this.x = x || 0;
12             this.y = y || 0;
13             this.radius = r || 20;
14             this.color = color || '#09f';
15         }
16         Ball.prototype = {
17             constructor: Ball,
18             stroke: function (cxt) {
19                 cxt.strokeStyle = this.color;
20                 cxt.beginPath();
21                 cxt.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
22                 cxt.closePath();
23                 cxt.stroke();
24             },
25             fill: function (cxt) {
26                 cxt.fillStyle = this.color;
27                 cxt.beginPath();
28                 cxt.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
29                 cxt.closePath();
30                 cxt.fill();
31             },
32             update : function( balls ){
33                 this.x += this.vx;
34                 this.y += this.vy;
35                 this.radius--;
36                 if ( this.radius < 0 ) {
37                     for( var i = 0; i < balls.length; i++ ){
38                         if( balls[i] == this ) {
39                             balls.splice( i, 1 );
40                         }
41                     }
42                     return false;
43                 }
44                 return true;
45             }
46         }
47     </script>
48     <script>
49         window.onload = function () {
50             var oCanvas = document.querySelector("#canvas"),
51                 oGc = oCanvas.getContext('2d'),
52                 width = oCanvas.width, height = oCanvas.height,
53                 balls = [], n = 50;
54             function getRandColor() {
55                 return '#' + (function (color) {
56                     return (color += '0123456789abcdef'[Math.floor(Math.random() * 16)]) && (color.length == 6) ? color : arguments.callee(color);
57                 })('');
58             }
59             oCanvas.addEventListener( 'mousemove', function( ev ){
60                 var oEvent = ev || event;
61                 var ball = new Ball( oEvent.clientX, oEvent.clientY, 30, getRandColor());
62                 ball.vx = (Math.random() * 2 - 1) * 5;
63                 ball.vy = (Math.random() * 2 - 1) * 5;
64                 balls.push( ball );
65             }, false );
66 
67             ( function move(){
68                 oGc.clearRect( 0, 0, width, height );
69                 for( var i = 0; i < balls.length; i++ ){
70                     balls[i].update( balls ) && balls[i].fill( oGc );
71                 }
72                 requestAnimationFrame( move );
73             } )();
74         }
75     </script>
76 </head>
77 <body>
78     <canvas id="canvas" width="1200" height="600"></canvas>
79 </body>

 

<head> <meta charset=’utf-八’ /> <title>canvas光彩夺目小球

  • By ghostwu</title> <style> #canvas { border: 1px dashed
    #aaa; } </style> <script> function Ball(x, y, r, color) {
    this.x = x || 0; this.y = y || 0; this.radius = r || 20; this.color =
    color || ‘#09f’; } Ball.prototype = { constructor: Ball, stroke:
    function (cxt) { cxt.strokeStyle = this.color; cxt.beginPath();
    cxt.arc(this.x, this.y, this.radius, 0, 2 * Math.PI); cxt.closePath();
    cxt.stroke(); }, fill: function (cxt) { cxt.fillStyle = this.color;
    cxt.beginPath(); cxt.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
    cxt.closePath(); cxt.fill(); }, update : function( balls ){ this.x +=
    this.vx; this.y += this.vy; this.radius–; if ( this.radius < 0 ) {
    for( var i = 0; i < balls.length; i++ ){ if( balls[i] == this ) {
    balls.splice( i, 1 ); } } return false; } return true; } }
    </script> <script> window.onload = function () { var oCanvas
    = document.querySelector(“#canvas”), oGc = oCanvas.getContext(‘2d’),
    width = oCanvas.width, height = oCanvas.height, balls = [], n = 50;
    function getRandColor() { return ‘#’ + (function (color) { return
    (color += ‘0123456789abcdef'[Math.floor(Math.random() * 16)]) &&
    (color.length == 6) ? color : arguments.callee(color); })(”); }
    oCanvas.addEventListener( ‘mousemove’, function( ev ){ var oEvent = ev
    || event; var ball = new Ball( oEvent.clientX, oEvent.clientY, 30,
    getRandColor()); ball.vx = (Math.random() * 2 – 1) * 5; ball.vy =
    (Math.random() * 2 – 1) * 5; balls.push( ball ); }, false ); (
    function move(){ oGc.clearRect( 0, 0, width, height ); for( var i = 0; i
    < balls.length; i++ ){ balls[i].update( balls ) && balls[i].fill(
    oGc ); } requestAnimationFrame( move ); } )(); } </script>
    </head> <body> <canvas id=”canvas” width=”1200″
    height=”600″></canvas> </body>

run code

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图