精华内容
下载资源
问答
  • Canvas动画

    千次阅读 2019-07-23 14:02:36
    1:Canvas动画原理 快速切换的静态画面。 2:基本步骤 绘制 - 清空 - 绘制 - 清空 - 绘制 … 3:控制函数 setTimeout setInterval requestAnimationFrame 4:四种运动 线性运动 const canvas = document....

    1:Canvas动画原理

    快速切换的静态画面。

    2:基本步骤

    • 绘制 - 清空 - 绘制 - 清空 - 绘制 …

    3:控制函数

    • setTimeout
    • setInterval
    • requestAnimationFrame

    4:四种运动

    线性运动

        const canvas = document.getElementById('canvas');
            /* 获得 2d 上下文对象 */
            const ctx = canvas.getContext('2d');
        
            let radialGradient;
            let distance = -50;
            const speed = 5;
        
            const draw = (axisX) => {
                /* 清空画布(或部分清空) */
                ctx.clearRect(0, 0, 600, 600);
                radialGradient = ctx.createRadialGradient(distance, 300, 10, distance, 300, 50);
                radialGradient.addColorStop(0, "#FFFFFF");
                radialGradient.addColorStop(1, "#EA7F26");
                ctx.fillStyle = radialGradient;
        
                ctx.beginPath();
                ctx.moveTo(distance, 300);
                ctx.arc(distance, 300, 50, 0, 2 * Math.PI, false);
                ctx.fill();
                
                distance = distance + speed;
                
                if (distance > 650) distance = -50;
        
                requestAnimationFrame(draw);
            }
        
            requestAnimationFrame(draw);ctx.clearRect(0, 0, 600, 600);
        
        ctx.beginPath();
        ctx.moveTo(distance, 300);
        ctx.arc(distance, 300, 50, 0, 2 * Math.PI, false);
        ctx.fill();
        
        distance = distance + speed;
    

    从左到右匀速运动
    在这里插入图片描述

    变速运动

        const canvas = document.getElementById('canvas');
            /* 获得 2d 上下文对象 */
            const ctx = canvas.getContext('2d');
        
            let radialGradient;
            let distance = 50;
            const speed = 5;
        
            let count = 1;
        
            /*
            * h = 9.8 * (Math.pow(t, 2)) / 2
            */
        
            const draw = (axisX) => {
                /* 清空画布(或部分清空) */
                ctx.clearRect(0, 0, 600, 600);
                radialGradient = ctx.createRadialGradient(300, distance, 10, 300, distance, 50);
                radialGradient.addColorStop(0, "#FFFFFF");
                radialGradient.addColorStop(1, "#EA7F26");
                ctx.fillStyle = radialGradient;
        
                ctx.beginPath();
                ctx.moveTo(300, distance);
                ctx.arc(300, distance, 50, 0, 2 * Math.PI, false);
                ctx.fill();
        
                count += 1;
        
                distance = 9.8 * (Math.pow(count, 2)) / 100;
                if (distance > 650) {
                    distance = -50;
                    count = 1;
                }
        
                requestAnimationFrame(draw);
            }
        
            requestAnimationFrame(draw);
    

    从上到下模拟自由落体运动
    在这里插入图片描述

    函数运动(正弦)

        const canvas = document.getElementById('canvas');
            /* 获得 2d 上下文对象 */
            const ctx = canvas.getContext('2d');
        
            let radialGradient;
            let distance = 0;
            let axis = 300;
            const speed = 5;
        
            const range = 200;
        
            let angle = 0;
        
            const draw = (axisX) => {
                /* 清空画布(或部分清空) */
                // ctx.clearRect(0, 0, 600, 600);
                radialGradient = ctx.createRadialGradient(distance, axis, 10, distance, axis, 50);
                radialGradient.addColorStop(0, "#FFFFFF");
                radialGradient.addColorStop(1, "#EA7F26");
                ctx.fillStyle = radialGradient;
        
                ctx.beginPath();
                ctx.moveTo(distance, axis);
                ctx.arc(distance, axis, 50, 0, 2 * Math.PI, false);
                ctx.fill();
                
                axis = 300 + Math.sin(angle) * range;
        
                distance = distance + speed;
                if (distance > 650) {
                    distance = 0;
                    angle = -.1;
                }
        
                angle += .1;
                requestAnimationFrame(draw);
            }
        
            requestAnimationFrame(draw);
    

    在这里插入图片描述

    环形运动

        const canvas = document.getElementById('canvas');
            /* 获得 2d 上下文对象 */
            const ctx = canvas.getContext('2d');
            let radialGradient;
        
            let angle = 0.1;
            var scope = 20;
        
            let x = 300;
            let y = 100;
        
        const draw = (axisX) => {
        /* 清空画布(或部分清空) */
            ctx.clearRect(0, 0, 600, 600);
            radialGradient = ctx.createRadialGradient(x, y, 10, x, y, 50);
            radialGradient.addColorStop(0, "#FFFFFF");
            radialGradient.addColorStop(1, "#EA7F26");
            ctx.fillStyle = radialGradient;
            ctx.beginPath();
            ctx.moveTo(x, y);
            ctx.arc(x, y, 50, 0, 2 * Math.PI, false);
            ctx.fill();
        
            x = x + Math.cos(angle) * scope;
            y = y + Math.sin(angle) * scope;
            angle = angle + .1;
        
            requestAnimationFrame(draw);
            ctx.closePath();
        
            ctx.beginPath();
            ctx.arc(300, 300, 200, 0, 2 * Math.PI, false);
            ctx.stroke();
        }
        
        requestAnimationFrame(draw);
    

    在这里插入图片描述

    展开全文
  • canvas 动画

    千次阅读 2020-09-04 18:50:05
    canvas实现的动画 效果图: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body { background: #...

    canvas实现的动画

    效果图:
    在这里插入图片描述

    代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    		body {
    		  	background: #111;
    		  	padding:0;
    		  	margin:0;
    			overflow:hidden;
    		}
    	</style>
    </head>
    <body>
    	<div id="wrapper"></div>
    </body>
    <script>
    (function(){
    	'use strict';
    	let wrapper, canvas, ctx, width, height, 
    	Tau=Math.PI*2, PI180=Math.PI/180,
    	systems=[];
    
    /* PlanetarySystem */
    	let PlanetarySystem = function(id='pSys'){
    		Object.defineProperty(this, 'id',               { value:id, writable:true} );
    		Object.defineProperty(this, 'x',                { value:0, writable:true });
    		Object.defineProperty(this, 'y',                { value:0, writable:true });
    		Object.defineProperty(this, 'allBodies',        { value:[], writable:true });
    		Object.defineProperty(this, 'allBodiesLookup',  { value:{}, writable:true });    // fast id lookup for children
    		Object.defineProperty(this, 'numBodies',        { value:0, writable:true });
    	}
    	PlanetarySystem.prototype.addBody = function(vo) {
    		vo.parentSystem = this;
    		vo.parentBody = vo.parentBody === null ? this : this.allBodiesLookup[vo.parentBody];
    		let body = new PlanetaryBody(vo);
    		body.update();
    		this.allBodies.push(body);
    		this.allBodiesLookup[vo.id] = body;
    		this.numBodies += 1;
    	}
    	PlanetarySystem.prototype.setSpeedFactor = function(value){
    		let body;
    		for(let i=0; i<this.numBodies; i++){
    			body = this.allBodies[i];
    			body.setSpeedFactor(value);
    		}
    	}
    	PlanetarySystem.prototype.update = function(){
    		let body;
    		for(let i=0; i<this.numBodies; i++){
    			body = this.allBodies[i];
    			body.update();
    		}
    	}
    /* PlanetaryBody */
    	let PlanetaryBody = function(vo){
    		Object.defineProperty(this, 'id',					{ value:vo.id, writable:true} );
    		Object.defineProperty(this, 'diameter',				{ value:vo.diameter, writable:true });
    		Object.defineProperty(this, 'colour',				{ value:vo.colour, writable:true });
    		Object.defineProperty(this, 'x',					{ value:0, writable:true });
    		Object.defineProperty(this, 'y',					{ value:0, writable:true });
    		Object.defineProperty(this, 'vx',					{ value:0, writable:true });
    		Object.defineProperty(this, 'vy',					{ value:0, writable:true });
    		Object.defineProperty(this, 'degrees',				{ value:vo.degrees, writable:true });
    		Object.defineProperty(this, 'speedBase',			{ value:vo.speed, writable:true });
    		Object.defineProperty(this, 'speed',				{ value:vo.speed , writable:true });
    		Object.defineProperty(this, 'orbitalRadius',		{ value:vo.orbitalRadius, writable:true });
    		Object.defineProperty(this, 'parentSystem',			{ value:vo.parentSystem, writable:true });
    		Object.defineProperty(this, 'parentBody',			{ value:vo.parentBody, writable:true });
    
    		return this;
    	}
    	PlanetaryBody.prototype.update = function(){
    		let angle = this.degrees * PI180;
    		this.degrees += this.speed;
    		this.vx = this.orbitalRadius * Math.cos(angle);
    		this.vy = this.orbitalRadius * Math.sin(angle);
    		// update position
    		if(this.parentBody != null){
    			this.x = this.vx + this.parentBody.x;
    			this.y = this.vy + this.parentBody.y;
    		}
    	}
    
    /* init() */
    	function init(){
    		wrapper = document.querySelector('#wrapper');
    		canvas = createCanvas('canvas', width, height);
    		wrapper.appendChild(canvas);
    		ctx = canvas.getContext('2d');
    		setupEvents();
    		resizeCanvas();
    
    		/* Define new PlanetarySystem and set values */
    		let system1 = new PlanetarySystem('pSys1');
    		systems.push(system1);
    		system1.x = width * .5;
    		system1.y = height * .5;
    		system1.addBody({id:'sun', diameter:5, degrees:0, speed:0, colour:'#FDFE1D', orbitalRadius:0, parentBody:null});
    		for(let loop=30, i=0; i<loop; i+=1){
    			system1.addBody({	id:				'ball'+i,
    								diameter:		5,
    								degrees:		0,
    								speed:			2 + (loop * 0.15) - (i* 0.2),
    								colour:			'#FDFE1D',
    								orbitalRadius:	7*(i+1),
    								parentBody:		'sun'});
    		}
    	}
    	
    /* Methods */
    	function createCanvas(id, w, h){
    		let tCanvas = document.createElement('canvas');
    		tCanvas.width = w;
    		tCanvas.height = h;
    		tCanvas.id = id;
    		return tCanvas;
    	}
    
    	function setupEvents(){
    		window.onresize = resizeCanvas;
    	}
    	function resizeCanvas(){
    		let rect = wrapper.getBoundingClientRect();
    		width = window.innerWidth;
    		height = window.innerHeight - rect.top -2;
    		canvas.width = width;
    		canvas.height = height;
    		for(let i=0; i<systems.length; i++){
    			systems[i].x = width * .5;
    			systems[i].y = height * .5;
    		}
    	}
    
    	function update(){
    		for(let loop=systems.length, i=0; i<loop; i++){
    			systems[i].update();
    		}
    	}
    
    	function draw(){
    		let system;
    		let prev = null;
    		for(let i=0; i<systems.length; i++){
    			system = systems[i];
    			let planetaryBody;
    			for(let loop=system.numBodies, j=1; j<loop; j+=1) {
    				planetaryBody = system.allBodies[j];
    				ctx.beginPath();
    				ctx.arc(planetaryBody.x, planetaryBody.y, planetaryBody.diameter, 0, Tau, false);
    				ctx.fillStyle = planetaryBody.colour;
    				ctx.fill();
    				if(j>1){
    					ctx.strokeStyle = planetaryBody.colour;
    					ctx.lineWidth = 2;
    					ctx.beginPath();
    					ctx.moveTo(planetaryBody.x, planetaryBody.y);
    					ctx.lineTo(prev.x, prev.y);
    					ctx.stroke();
    				}
    				prev = {x:planetaryBody.x, y:planetaryBody.y};
    			}
    		}
    	}
    
    	function animate(){
    		ctx.fillStyle = 'rgba(0,0,0, .05)';
    		ctx.fillRect(0, 0, width, height);
    		update();
    		draw();
    		requestAnimationFrame(animate);
    	}
    	init();
    	animate();
    }());
    </script>
    </html>
    

    偶然发现的canvas实现的动画,很厉害是不是

    展开全文
  • // 炫酷渐变色背景粒子线条折线连接canvas动画 export const canvas = (val) => { var requestAnimationFrame = window.requestAnimationFrame || function (callback) { window.setTimeout(callback, ...

    博客地址:http://www.globm.top/blog/1/detail/34
    效果图:
    在这里插入图片描述
    1.新建canvas.js

    
    // 炫酷渐变色背景粒子线条折线连接canvas动画
    export const canvas = (val) => {
      var requestAnimationFrame = window.requestAnimationFrame || function (callback) {
        window.setTimeout(callback, 1000 / 60)
      }
    
      // var canvas = document.getElementsByTagName("canvas")[0];
      let canvas = val
      let ctx = canvas.getContext('2d')
      let maximumPossibleDistance
      let mousePositionX
      let mousePositionY
      let mouseElement
      let lines = 0
      let objects = []
      var initAnimation = function () {
        canvas.width = window.innerWidth
        canvas.height = window.innerHeight
        maximumPossibleDistance = Math.round(Math.sqrt((canvas.width * canvas.width) + (canvas.height * canvas.height)))
        Math.floor(canvas.width / 2)
        Math.floor(canvas.height / 2)
        objects.length = 0
        clearCanvas()
        createParticles()
      }
      window.addEventListener('resize', function () { initAnimation() }, false)
      // 线条参数配置
      var options = {
        // 初始线条数量
        particlesNumber: 80,
        // 圆点大小
        initialSize: 3,
        moveLimit: 50,
        durationMin: 50,
        durationMax: 300,
        drawConnections: true,
        mouseInteractionDistance: 150,
        mouseGravity: true,
        drawMouseConnections: true,
        // 图标色彩
        red: 25,
        green: 200,
        blue: 255,
        opacity: 1,
        // 已连接线条
        connectionRed: 255,
        connectionGreen: 255,
        connectionBlue: 255,
        connectionOpacity: 0.2,
        // 鼠标移动线条
        mouseConnectionRed: 255,
        mouseConnectionGreen: 255,
        mouseConnectionBlue: 255,
        mouseConnectionOpacity: 0.2
    
      }
      var getRandomBetween = function (a, b) {
        return Math.floor(Math.random() * b) + a
      }
      var getDistance = function (element1, element2) {
        var difX = Math.round(Math.abs(element1.positionX - element2.positionX))
        var difY = Math.round(Math.abs(element1.positionY - element2.positionY))
    
        return Math.round(Math.sqrt((difX * difX) + (difY * difY)))
      }
      function Particle (positionX, positionY, size, red, green, blue, opacity) {
        this.positionX = positionX
        this.positionY = positionY
        this.size = size
    
        this.duration = getRandomBetween(options.durationMin, options.durationMax)
        this.limit = options.moveLimit
        this.timer = 0
    
        this.red = red
        this.green = green
        this.blue = blue
        this.opacity = opacity
    
        this.color = 'rgba(' + this.red + ',' + this.green + ',' + this.blue + ',+' + this.opacity + ')'
      }
      function MouseParticle (positionX, positionY, size, red, green, blue, opacity) {
        this.positionX = mousePositionX
        this.positionY = mousePositionY
        this.size = size
    
        this.red = red
        this.green = green
        this.blue = blue
        this.opacity = opacity
    
        this.color = 'rgba(' + this.red + ',' + this.green + ',' + this.blue + ',+' + this.opacity + ')'
      }
      Particle.prototype.animateTo = function (newX, newY) {
        var duration = this.duration
    
        var animatePosition = function (newPosition, currentPosition) {
          if (newPosition > currentPosition) {
            var step = (newPosition - currentPosition) / duration
            newPosition = currentPosition + step
          } else {
            step = (currentPosition - newPosition) / duration
            newPosition = currentPosition - step
          }
    
          return newPosition
        }
    
        this.positionX = animatePosition(newX, this.positionX)
        this.positionY = animatePosition(newY, this.positionY)
    
        // generate new vector
    
        if (this.timer === this.duration) {
          this.calculateVector()
          this.timer = 0
        } else {
          this.timer++
        }
      }
      Particle.prototype.updateColor = function () {
        this.color = 'rgba(' + this.red + ',' + this.green + ',' + this.blue + ',+' + this.opacity + ')'
      }
      Particle.prototype.calculateVector = function () {
        var distance
        var newPosition = {}
        var particle = this
    
        var getCoordinates = function () {
          newPosition.positionX = getRandomBetween(0, window.innerWidth)
          newPosition.positionY = getRandomBetween(0, window.innerHeight)
    
          distance = getDistance(particle, newPosition)
        }
    
        // eslint-disable-next-line no-unmodified-loop-condition
        while ((typeof distance === 'undefined') || (distance > this.limit)) {
          getCoordinates()
        }
    
        this.vectorX = newPosition.positionX
        this.vectorY = newPosition.positionY
      }
      Particle.prototype.testInteraction = function () {
        if (!options.drawConnections) return
        var closestElement
        var distanceToClosestElement = maximumPossibleDistance
        for (var x = 0; x < objects.length; x++) {
          var testedObject = objects[x]
          var distance = getDistance(this, testedObject)
          if ((distance < distanceToClosestElement) && (testedObject !== this)) {
            distanceToClosestElement = distance
            closestElement = testedObject
          }
        }
        if (closestElement) {
          ctx.beginPath()
          ctx.moveTo(this.positionX + this.size / 2, this.positionY + this.size / 2)
          ctx.lineTo(closestElement.positionX + closestElement.size * 0.5, closestElement.positionY + closestElement.size * 0.5)
          ctx.strokeStyle = 'rgba(' + options.connectionRed + ',' + options.connectionGreen + ',' + options.connectionBlue + ',' + options.connectionOpacity + ')'
          ctx.stroke()
          lines++
        }
      }
      MouseParticle.prototype.testInteraction = function () {
        if (options.mouseInteractionDistance === 0) return
    
        var closestElements = []
        // var distanceToClosestElement = maximumPossibleDistance;
    
        for (var x = 0; x < objects.length; x++) {
          var testedObject = objects[x]
          var distance = getDistance(this, testedObject)
    
          if ((distance < options.mouseInteractionDistance) && (testedObject !== this)) {
            closestElements.push(objects[x])
          }
        }
    
        for (var i = 0; i < closestElements.length; i++) {
          if (options.drawMouseConnections) {
            var element = closestElements[i]
            ctx.beginPath()
            ctx.moveTo(this.positionX, this.positionY)
            ctx.lineTo(element.positionX + element.size * 0.5, element.positionY + element.size * 0.5)
            ctx.strokeStyle = 'rgba(' + options.mouseConnectionRed + ',' + options.mouseConnectionGreen + ',' + options.mouseConnectionBlue + ',' + options.mouseConnectionOpacity + ')'
            ctx.stroke()
            lines++
          }
          if (options.mouseGravity) {
            closestElements[i].vectorX = this.positionX
            closestElements[i].vectorY = this.positionY
          }
        }
      }
      Particle.prototype.updateAnimation = function () {
        this.animateTo(this.vectorX, this.vectorY)
        this.testInteraction()
        ctx.fillStyle = this.color
        ctx.fillRect(this.positionX, this.positionY, this.size, this.size)
      }
      MouseParticle.prototype.updateAnimation = function () {
        this.positionX = mousePositionX
        this.positionY = mousePositionY
        this.testInteraction()
      }
      var createParticles = function () {
        // create mouse particle
        mouseElement = new MouseParticle(0, 0, options.initialSize, 255, 255, 255)
        for (var x = 0; x < options.particlesNumber; x++) {
          var randomX = Math.floor((Math.random() * window.innerWidth) + 1)
          var randomY = Math.floor((Math.random() * window.innerHeight) + 1)
          var particle = new Particle(randomX, randomY, options.initialSize, options.red, options.green, options.blue, options.opacity)
          particle.calculateVector()
          objects.push(particle)
        }
      }
      var updatePosition = function () {
        for (var x = 0; x < objects.length; x++) {
          objects[x].updateAnimation()
        }
        // handle mouse
        mouseElement.updateAnimation()
      }
      window.onmousemove = function (e) {
        mousePositionX = e.clientX
        mousePositionY = e.clientY
      }
      var clearCanvas = function () {
        ctx.clearRect(0, 0, window.innerWidth, window.innerHeight)
      }
      var lastCalledTime
      var fps
      var averageFps
      var averageFpsTemp = 0
      var averageFpsCounter = 0
    
      function requestFps () {
        if (!lastCalledTime) {
          lastCalledTime = Date.now()
          fps = 0
          return
        }
        var delta = (new Date().getTime() - lastCalledTime) / 1000
        lastCalledTime = Date.now()
        fps = Math.floor(1 / delta)
    
        averageFpsTemp = averageFpsTemp + fps
        averageFpsCounter++
        if (averageFpsCounter === 5) {
          averageFps = Math.floor(averageFpsTemp / 5)
          averageFpsCounter = 0
          averageFpsTemp = 0
        }
        if (!averageFps) {
    
        } else if (averageFps < 10) {
    
        }
      }
      var loop = function () {
        clearCanvas()
        updatePosition()
        ctx.fillStyle = '#fff'
        // ctx.fillText("FPS: " + fps + " lines: " + lines + " Average FPS: " + averageFps , 10, 20);
        lines = 0
        requestAnimationFrame(loop)
        requestFps()
      }
      initAnimation()
      loop()
      return lines
    }
    
    

    2.引入canvas.js,实现效果

    <template>
      <div class="canvas-page">
        <canvas></canvas>
      </div>
    </template>
    <script>
    import { canvas } from '../plugins/canvas'
    export default {
      name: 'CanvasPage',
      mounted () {
        canvas(document.getElementsByTagName('canvas')[0])
      }
    }
    </script>
    <style lang="less" scoped>
    .canvas-page {
      height: 100vh;
      width: 100vw;
      background-size: cover;
      position: relative;
      background-color: #474747;
      background-image: radial-gradient(circle at 2% 60%, #27278f, transparent 100%),
        radial-gradient(circle at 98% 70%, #000c91, transparent 100%),
        radial-gradient(circle at 50% 50%, #ed68ed, transparent 100%);
      canvas {
        position: absolute;
        left: 0;
        top: 0;
        background: transparent;
        z-index: 15;
      }
    }
    </style>
    
    

    附:canvas速查表 http://canvas.migong.org/html5-canvas

    展开全文
  • canvas动画

    2017-04-05 17:59:50
    使用canvas实现太极运动效果。 css: body{ background:darkslategray; } .wenzi,.wenzi1{ position: absolute; top:60px; width:100px; height:500px; font-size:

    使用canvas实现太极运动效果。


    css:

       body{
    		    background:darkslategray;
    			}
    			.wenzi,.wenzi1{
    				position: absolute;
    				top:60px;
    				width:100px;
    				height:500px;
    				font-size:60px;
    				font-weight:600;
    				color:#fff;
    				font-family: "楷体";
    			}
    			.wenzi{
    				left:220px;
    			}
    			.wenzii{
    				position: absolute;
    				top:60px;
    				width:99px;
    				height:499px;
    				left:220px;
    				background:darkslategray;
    			}
    			.wenzzi{
    				position: absolute;
    				top:60px;
    				width:99px;
    				height:499px;
    				right:220px;
    				background:darkslategray;
    			}
    			.wenzi1{
    				right:220px;
    			}
    html:

      <canvas id = "cavas" width = "1000" height = "700">
    			您的浏览器不支持canvas标签!请尝试使用<a href="#">google浏览器</a>
    		</canvas>
    		<div class = "wenzi">两极生四象</div>
    		<div class = "wenzii"></div>
    		
    		<div class = "wenzi1">四象生八卦</div>
    		<div class = "wenzzi"></div>
    js:

      var canvas = document.getElementById("cavas");
    		var ctx = canvas.getContext("2d");
    		//小圆半径
    		var r = 75;
    		//定义角度
    		var deg = 0;
    		//最大半圆心坐标
    		var r1 = 700;
    		var r2 = 300;
    		function drowTaiji(){
    			
    		    //及时变化的坐标(让小圆跟着一起转动)
    			var x = Math.sin(deg)*r;
    			var y = Math.cos(deg)*r;
    			with(ctx){
    				//最大半圆两个
    				fillStyle="#fff";
    				beginPath(); 
    				arc(r1, r2, 150, 1.5*Math.PI + deg, Math.PI/2 + deg, false);
    				closePath();
    				fill();
    				fillStyle="#000";
    				beginPath(); 
    				arc(r1, r2, 150, Math.PI/2 + deg, 1.5*Math.PI + deg, false);
    				closePath();
    				fill();
    				//中间圆两个
    				fillStyle = "#fff";
    				beginPath();
    				arc(r1+x,r2-y,75,0,Math.PI*2,false);
    				closePath();
    				fill();
    				fillStyle = "#000";
    				beginPath();
    				arc(r1-x,r2+y,75,0,Math.PI*2,false);
    				closePath();
    				fill();
    				//最小圆两个
    				fillStyle = "#000";
    				beginPath();
    				arc(r1+x,r2-y,15,0,Math.PI*2,false);
    				closePath();
    				fill();
    				fillStyle = "#fff";
    				beginPath();
    				arc(r1-x,r2+y,15,0,Math.PI*2,false);
    				closePath();
    				fill();
    		        //外环圆
    				fillStyle = "#fff";
    				beginPath();
    				arc(r1+3*x,r2-3*y,15,0,Math.PI*2,false);
    				closePath();
    				fill();
    				fillStyle = "#000";
    				beginPath();
    				arc(r1-3*x,r2+3*y,15,0,Math.PI*2,false);
    				closePath();
    				fill();
    			}
    			deg+=0.05;
    		}
    		setInterval(drowTaiji,50);  //定时器调用函数  实现运动效果
    		$(function(){
    			$(".wenzii").animate({
    				"top":"400px"
    			},5000,function(){
    				$(".wenzzi").animate({
    					"top":"400px"
    				},5000)
    			})
    		})



    展开全文
  • canvas动画-星空效果动画
  • 用TypeScript编写的Canvas动画。 没有jQuery,也没有其他第三方依赖性。 您可能还对感兴趣。 逐步指南可以在找到 此回购包括盛开的花朵动画示例。 该花图是从得到启发和优化的。 项目结构 楷模 花 花中心 花瓣 点 ...
  • 构建canvas动画框架

    2021-03-02 09:14:19
    最近一直在做canvas动画效果,发现canvas这个东西做动画不是不可以。相对于flash,它太底层。如果有给力的编辑器或者给力的框架的话,它就能发挥出更大的威力。于是决定自己写一个简单一点的动画框架,以便能更方便...
  • 蝴蝶飞舞canvas动画特效是一款基于canvas绘制飞舞的蝴蝶,彩色的蝴蝶,漂亮的蝴蝶元素动画特效。
  • 密集气泡组成字母canvas动画是一款基于canvas 2d画布绘制无数个圆点气泡形成的英文字母动画特效。
  • 点和线连接Canvas动画

    2021-04-25 05:54:16
    点和线连接Canvas动画是一款鼠标移动推开粒子,适合当网页文字背景特效。
  • 蝴蝶飞舞canvas动画特效是一款基于canvas绘制飞舞的蝴蝶,彩色的蝴蝶,漂亮的蝴蝶元素动画特效。
  • canvas动画 - 背景线条

    2018-09-21 13:27:49
    canvas动画 - 背景线条 - 线条波动,很实用,作为动画背景,比静态背景图片效果更大气,更高端。
  • canvas动画气球

    2017-05-20 17:31:00
    canvas动画气球 canvas小球的动画我用canvas画布实现的小球动画效果,可以参考下 我用canvas画布实现的小球动画效果,可以参考下 我用canvas画布实现的小球动画效果,可以参考下 我用canvas画布...
  • 主要为大家详细介绍了JavaScript canvas动画实现时钟效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 本网页运用了大量的动画效果,如曲线运动、canvas动画
  • snanimation canvas 动画库 一个基于Canvas动画库,主要使用多帧精灵图以及修改精灵显示属性实现动画
  • 密集气泡组成字母canvas动画是一款基于canvas 2d画布绘制无数个圆点气泡形成的英文字母动画特效。
  • Canvas动画按钮

    2018-12-05 20:18:00
    Canvas动画按钮 在线演示 本地下载 posted @ 2018-12-05 20:18 栖息地 阅读(...) 评论(...) 编辑 收藏
  • 意大利面龙卷风canvas动画场景
  • 30种鼠标悬停按钮canvas动画特效
  • 点和线连接Canvas动画是一款鼠标移动推开粒子,适合当网页文字背景特效。
  • canvas动画-会舞动的树是一款左右摇摆的树 颜色会随摇摆变化
  • canvas动画文字效果

    2019-10-05 23:22:08
    canvas动画文字效果 Doughnut Chartvar c=document.getElementById("canvas");var ctx=c.getContext("2d");ctx.font="50px sans-serif";ctx.fillText...
  • h5canvas动画I’m trying to make the best out of these quarantine days, and learning new things has been my favorite pastime. A few days ago, I stumbled upon How to GraphQL while working through the ...
  • h5 canvas 动画

    2018-06-01 19:20:57
    html5使用canvas实现的圆形渐变进度条加载动画特效源码

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,933
精华内容 3,573
关键字:

canvas动画