canvasベース・エントリー・インスタンス

核心思想.
現在のフレームを更新し続けることで、アニメーション効果が得られます.
canvasラベル
canvasはhtml 5のラベルで、2つの属性widthとheightがあり、jsで呼び出されるときは一般的にdocument.getElementById('canvas').widthを使用して取得または設定されます.
canvasについて
canvasのすべてのレンダリング動作はjavascriptに基づいています.つまり、対応するjavascriptを書くだけで効果が得られます.静的な基本形状、文字、画像を描くときは簡単ですが、canvasには使用する必要はありません.canvasが本当に夢中になっているのは、そのダイナミック効果canvasのダイナミック効果が非常に不思議であり、javascriptに基づいて単一の要素を操作するので、再配置を考慮する必要はなく、再描画自体だけでよく、効率的にはcss 3などよりはるかに高い
canvasアニメーションの原理
アニメーションはマルチフレームの静的ピクチャを切り替えて人の目をだますことで完成し、canvas自体はキャンバスであるため、javascriptでは自分の望むアニメーションを書くことでアニメーション効果を完成させることができる基本的な核心は、現在のフレームを絶えず再描画することである.
簡単なアニメーションを完成するには

アニメーションを記述するオブジェクト

/**
 *     
 * @param {boolean} animated        
 * @param {number} x     x
 * @param {number} y     y
 * @param {number} vx x     
 * @param {number} vy y     
 * @param {number} radius       
 * @param {array} color   
 * @param {number} time       
 */
function Circle(x, y, vx, vy, radius, color, time){
    this.animated = true
    this.x = x;
    this.y = y;
    this.vx = vx;
    this.vy = vy;
    this.radius = radius;
    this.time = time;
    this.color = ['LightPink', 'PaleVioletRed', 'DeepPink', 'MediumVioletRed', 
    'Magenta', 'DarkVoilet', 'SlateBlue','Navy', 
    'RoyalBlue', 'DarkSlateGray', 'Auqamarin', 'MintCream', 
    'Olive', 'Gold','Tomato', 'Red'];
    this.globalAlpha = 1;//   
    this.vglobalAlpha  = 0.02;//    
}

/**      
 * @param {number} x       x
 * @param {number} y       y 
 * @return {array}              
 */
Circle.prototype.create = function(x, y) {
    iscreate = false;
    var _this = this;
    var n = _this.random(20, 30);//    
    var circles = [];//  
    for(var i=0; i

ここでまず1つの円のコンストラクション関数を定義し、座標の生成、オフセット速度など、必要な円の属性を宣言します.この例では複数の円をレンダリングする必要があるため、円のオブジェクトをロードするために配列を書くのは簡単ですが、ここは複雑なアニメーションの始まりであり、複雑なアニメーションほど必要なパラメータが多くなります.この方面は自分で書くことができて、完全に宣言することができて、定義することができます.

静的オブジェクトをcanvasに入れる、すなわち、第1フレーム

を描画する.

/**
 *    
 * @param {array} circles       
 */
Circle.prototype.draw = function(circles, n){
    var _this = this;
    for(var i=0; i

ここであなたの円をすべてcanvasに入れて、カプセル化されたランダム関数を使っています.実際にはjavascriptを使うので、他の初期化方法もカスタマイズできます.

アニメーション効果

/**
 *       
 * @param {array} circles       
 */
Circle.prototype.animate = function( circles ) {
    var _this = this;
    window.cancelAnimationFrame(timer);
    timer = window.requestAnimationFrame(function(){
        _this.clearCanvas();
        for(var i=0; i

ここでは次のフレームを描く方法です.ここでは主に前のフレームの円の座標を少しずらして再レンダリングします.レンダリング速度が十分な場合、アニメーション効果を簡単に達成できます.

ユーザインタラクション

//canvas  
function mousedown(event) {
    var ex = event.point.x;//          
    var ey = event.point.y;//          
    window.cancelAnimationFrame(timer);
    c.create(ex, ey);
}

ここでイベントをバインドすればいい
ふろく
index.html

canvas_circle.js

//canvas_circle.js
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var timer;//   

/**
 *     
 * @param {boolean} animated        
 * @param {number} x     x
 * @param {number} y     y
 * @param {number} vx x     
 * @param {number} vy y     
 * @param {number} radius       
 * @param {array} color   
 * @param {number} time       
 */
function Circle(x, y, vx, vy, radius, color, time){
    this.animated = true
    this.x = x;
    this.y = y;
    this.vx = vx;
    this.vy = vy;
    this.radius = radius;
    this.time = time;
    this.color = ['LightPink', 'PaleVioletRed', 'DeepPink', 'MediumVioletRed', 
    'Magenta', 'DarkVoilet', 'SlateBlue','Navy', 
    'RoyalBlue', 'DarkSlateGray', 'Auqamarin', 'MintCream', 
    'Olive', 'Gold','Tomato', 'Red'];
    this.fps = 60;//  
    this.globalAlpha = 1;//   
    this.vglobalAlpha  = 0.02;//    
}

/**
 *      
 * @param {number} min   
 * @param {number} max   
 * @return {number}
 */
Circle.prototype.random = function( min, max ){
    return Math.random() * (max - min) + min;
}

//   
Circle.prototype.init = function() {
    this.render();
    //this.draw();
}

//  canvas
Circle.prototype.render = function() {
    canvas.width = window.innerWidth - 1;
    canvas.height = window.innerHeight - 1;
}

/**      
 * @param {number} x       x
 * @param {number} y       y 
 * @return {array}              
 */
Circle.prototype.create = function(x, y) {
    iscreate = false;
    var _this = this;
    var n = _this.random(20, 30);//    
    var circles = [];//  
    for(var i=0; i

canvas_tool.js

//canvas_tool.js
window.tool = {};   
window.tool.captureMT = function(element, touchStartEvent, touchMoveEvent, touchEndEvent) {   
    'use strict';   
    var isTouch = ('ontouchend' in document);   
    var touchstart = null;   
    var touchmove = null   
    var touchend = null;   
    if(isTouch){   
      touchstart = 'touchstart';   
      touchmove = 'touchmove';   
      touchend = 'touchend';   
    }else{   
      touchstart = 'mousedown';   
      touchmove = 'mousemove';   
      touchend = 'mouseup';   
    };   
  
    /*  Event  */   
    function getPoint(event) {   
      /*                   ，        element    */     event = event || window.event;
      var touchEvent = isTouch ? event.changedTouches[0]:event;
      var x = (touchEvent.pageX || touchEvent.clientX + document.body.scrollLeft + document.documentElement.scrollLeft);   
      x -= element.offsetLeft;   
  
      var y = (touchEvent.pageY || touchEvent.clientY + document.body.scrollTop + document.documentElement.scrollTop);   
      y -= element.offsetTop;   
  
      return {x: x,y: y};
    };
    if(!element) return;   
    /* element    touchstart  */   
    element.addEventListener(touchstart, function(event) {   
      event.point = getPoint(event);   
      touchStartEvent && touchStartEvent.call(this, event);   
    }, false);    
  
    /* element    touchmove  */   
    element.addEventListener(touchmove, function(event) {   
      event.point = getPoint(event);   
      touchMoveEvent && touchMoveEvent.call(this, event);   
    }, false);    
  
    /* element    touchend  */   
    element.addEventListener(touchend, function(event) {   
      event.point = getPoint(event);   
      touchEndEvent && touchEndEvent.call(this, event);   
    }, false);   
  };