Canvas軌跡

主要用到的就2個關鍵技術點:

ctx.globalAlpha = ‘0.85’; //設置主canvas的繪制透明度 臨時canvas備份主canvas的歷史圖像,再疊加到主canvas上。

這裡寫圖片描述

繪制過程:

首先需要知道動畫的起終點,然後繪制移動的圓,計算出中間的點的位置,定時繪制,每次繪制都移動一點位置,達到運動的效果,這是普通的運動的圓的效果。

繪制的時候設置當前canvas的透明度globalAlpha 為0.85
需要給運動中的圓加上運動過程的軌跡效果,這裡是用到一個臨時的canvas來配合,每次需要繪制一個新圓之前都把之前的圖像給繪制到臨時的canvas中,然後等新圓畫完後再把臨時canvas的圖像繪制回主canvas中,軌跡的效果。

這裡關鍵的就是由於設置瞭globalAlpha,每次繪制一次備份的canvas圖片都會把它的透明度設為0.85,達到瞭逐漸減小透明度的效果,直到為0,這樣整體看上去效果就是運動的圓的後面跟的圓逐個透明度減小,知道為0,達到瞭運動軌跡的效果。

movecircle.js

var canvas = document.querySelector('#canvas'),
    ctx = canvas.getContext('2d');

canvas.width = 400;
canvas.height = 400;

var backDom = document.createElement('canvas'),
    backCtx = backDom.getContext('2d');
backDom.width = canvas.width;
backDom.height = canvas.height;
document.body.appendChild(backDom); //測試使用

ctx.globalAlpha = 0.85; //關鍵

function draw(options) {
    backCtx.globalCompositeOperation = 'copy';
    backCtx.drawImage(canvas, 0, 0, canvas.width, canvas.height);

    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.beginPath();
    ctx.arc(options.x, options.y, options.r, 0, Math.PI * 2, true);
    ctx.closePath();
    ctx.fillStyle = 'rgba(7,120,249,1)';
    ctx.fill();

    ctx.drawImage( backDom, 0, 0, backDom.width, backDom.height);
}

var start = {
    x: 25,
    y: 25,
    r: 10
};

var end = {
    x: 300,
    y: 300,
    r: 10
};

function render() {
    if (start.x < end.x && start.y < end.y) {
        draw(start);
        start.x += 5;
        start.y += 5;
        setTimeout(arguments.callee, 50);
    }
}

render();

index.html

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
    html,body{
        padding:0;
        margin:0;
        background:#000;
    }
    #main{
        height:100%;
    }
    canvas {
        border:1px solid red;
    }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <script type="text/javascript" src="js/movecircle.js"> </script>
</body>
</html>

發佈留言