canvas动画

无知的小菜鸡

于 2021-07-08 19:35:38 发布

阅读量1k

点赞数 1

分类专栏：可视化

本文链接：https://blog.csdn.net/weixin_41897680/article/details/118557595

版权

可视化专栏收录该内容

26 篇文章 8 订阅

订阅专栏

方法

save():保存当前的绘图状态。
restore():恢复之前保存的绘图状态。
translate():平移

静态

平移

示例：绘制小伞

绘制伞顶

function drawTop(cx) {
	cx.fillStyle = 'blue' //填充样式
	cx.beginPath()
	cx.arc(100, 100, 30, 0, Math.PI, true)
	cx.fill()
}

绘制伞柄

//绘制伞柄
function drawBottom(cx) {
	cx.strokeStyle = 'blue' //填充样式
	cx.beginPath()
	//先绘制一条直线
	cx.moveTo(100, 100) //起点是圆心
	cx.lineTo(100, 160)
	//绘制一个半圆
	cx.strokeStyle = 'blue' //填充样式
	cx.arc(90, 160, 10, 0, Math.PI)
	cx.stroke()
}

完整代码

<canvas id="myCanvs" width="500px" height="500px" style="border: solid 1px;"></canvas>
<script>
	let c = document.getElementById('myCanvs')
	let context = c.getContext('2d')

	//绘制伞顶
	function drawTop(cx) {
		cx.fillStyle = 'blue' //填充样式
		cx.beginPath()
		cx.arc(100, 100, 30, 0, Math.PI, true)
		cx.fill()
	}

	//绘制伞柄
	function drawBottom(cx) {
		//	cx.save()   //保存当前的绘图（伞顶）
		cx.strokeStyle = 'blue' //填充样式
		cx.beginPath()
		//先绘制一条直线
		cx.moveTo(100, 100) //起点是圆心
		cx.lineTo(100, 160)
		//绘制一个半圆
		cx.strokeStyle = 'blue' //填充样式
		cx.arc(90, 160, 10, 0, Math.PI)
		cx.stroke()
	}
	
	function draw(){
		for(var i=0;i<5;i++){
			context.translate(60,0)
			drawTop(context)
			drawBottom(context)
		}
	}
         
    draw()
	
</script>

在这里插入图片描述
旋转

context.translate(300, 180);
function draw() {
	for (var i = 0; i < 5; i++) {
		context.save();
		context.rotate(Math.PI / 3)
		drawTop(context)
		drawBottom(context)
	}
}

在这里插入图片描述
缩放

let c = document.getElementById('myCanvs')
let context = c.getContext('2d')

context.translate(100, -100)

function draw() {
	for (var i = 0; i < 60; i++) {
		//绘制圆
		context.beginPath() //每次都重新创建一条路径
		context.fillStyle = 'red' //填充的颜色
		context.globalAlpha = "0.4";
		context.arc(250, 200, 50, 0, 2 * Math.PI)
		context.fill()
		//平移圆
		context.translate(100, 5)
		//缩放圆
		context.scale(0.95, 0.95);
		//旋转圆
		context.rotate(Math.PI / 12)
	}
}
draw()

在这里插入图片描述
裁剪

//裁剪一个200*100的矩形
context.strokeStyle="yellowgreen";
context.rect(50,50,200,100);
context.stroke();
context.clip();
//绘制一个红色矩形，只能在被裁剪区域内可见
context.fillStyle="red";
context.fillRect(0,0,150,100);

在这里插入图片描述

动态

示例1

<script>
let c = document.getElementById('myCanvs')
let context = c.getContext('2d')

let w = c.width //画布宽度
let h = c.height //画布高度
let i = 0

function draw() {
	//清空画布
	context.clearRect(0, 0, w, h);
	context.fillStyle = 'red'
	context.fillRect(i, 0, 50, 30)
	i = i + 20
}

var time = setInterval(function() {
	draw();
	console.log(i)
	if (i >= w + 20) {
		clearInterval(time)
	}
}, 100)
</script>

在这里插入图片描述
时钟

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>HTML5 时钟</title>
        <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
      <style>
        .clocks {
          height: 500px;
          margin: 25px auto;
          position: relative;
          width: 500px;
        }
      </style>
    </head>
    <body>
        <header>
            <h2>HTML5 时钟</h2>
        </header>
        <div class="clocks">
            <canvas id="canvas" width="500" height="500"></canvas>
        </div>
    </body>
    <script type="text/javascript">
    	// inner variables
var canvas, ctx;
var clockRadius = 250;
var clockImage;

// draw functions :
function clear() { // clear canvas function
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}

function drawScene() { // main drawScene function
    clear(); // clear canvas

    // get current time
    var date = new Date();
    var hours = date.getHours();
    var minutes = date.getMinutes();
    var seconds = date.getSeconds();
    hours = hours > 12 ? hours - 12 : hours;
    var hour = hours + minutes / 60;
    var minute = minutes + seconds / 60;

    // save current context
    ctx.save();

    // draw clock image (as background)
    ctx.drawImage(clockImage, 0, 0, 500, 500);

    ctx.translate(canvas.width / 2, canvas.height / 2);
    ctx.beginPath();

    // draw numbers
    ctx.font = '36px Arial';
    ctx.fillStyle = '#000';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    for (var n = 1; n <= 12; n++) {
        var theta = (n - 3) * (Math.PI * 2) / 12;
        var x = clockRadius * 0.7 * Math.cos(theta);
        var y = clockRadius * 0.7 * Math.sin(theta);
        ctx.fillText(n, x, y);
    }

    // draw hour
    ctx.save();
    var theta = (hour - 3) * 2 * Math.PI / 12;
    ctx.rotate(theta);
    ctx.beginPath();
    ctx.moveTo(-15, -5);
    ctx.lineTo(-15, 5);
    ctx.lineTo(clockRadius * 0.5, 1);
    ctx.lineTo(clockRadius * 0.5, -1);
    ctx.fill();
    ctx.restore();

    // draw minute
    ctx.save();
    var theta = (minute - 15) * 2 * Math.PI / 60;
    ctx.rotate(theta);
    ctx.beginPath();
    ctx.moveTo(-15, -4);
    ctx.lineTo(-15, 4);
    ctx.lineTo(clockRadius * 0.8, 1);
    ctx.lineTo(clockRadius * 0.8, -1);
    ctx.fill();
    ctx.restore();

    // draw second
    ctx.save();
    var theta = (seconds - 15) * 2 * Math.PI / 60;
    ctx.rotate(theta);
    ctx.beginPath();
    ctx.moveTo(-15, -3);
    ctx.lineTo(-15, 3);
    ctx.lineTo(clockRadius * 0.9, 1);
    ctx.lineTo(clockRadius * 0.9, -1);
    ctx.fillStyle = '#0f0';
    ctx.fill();
    ctx.restore();

    ctx.restore();
}

// initialization
$(function(){
    canvas = document.getElementById('canvas');
    ctx = canvas.getContext('2d');

    // var width = canvas.width;
    // var height = canvas.height;

clockImage = new Image();
clockImage.src = 'https://static.runoob.com/images/mix/125855_nnla_89964.png';

    setInterval(drawScene, 1000); // loop drawScene
});
    </script>
</html>

在这里插入图片描述
碰撞球

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			#bubble {
				display: block;
			}
		</style>
	</head>

	<body>
		<canvas id="bubble"></canvas>
		<script type="text/javascript">
			window.onload = function() {
				/*
				 * 1、给canvas设置一个宽高，和浏览器一致
				 * 1.1获取canvas元素
				 * 1.2获取浏览器宽高
				 * 1.3设置canvas宽高
				 * 1.4当浏览器宽高发生变化时重新给canvas设置宽高
				 */

				//1.1获取canvas元素
				var canvas = document.getElementById("bubble");
				//1.2获取浏览器宽高
				var w = window.innerWidth;
				var h = window.innerHeight;
				//1.3设置canvas宽高
				canvas.height = h;
				canvas.width = w;
				//1.4监控浏览器当浏览器宽高发生变化时重新给canvas设置宽高
				function setSize() {
					window.onresize = arguments.callee;
					w = window.innerWidth;
					h = window.innerHeight;
					canvas.height = h;
					canvas.width = w;
				}
				setSize();

				/*
				 * 使用canvas绘制圆形
				 * 利用定时器产生动画效果
				 */

				var content = canvas.getContext("2d");

				function Random(min, max) { //返回从最小值到最大值之间的一个值
					return Math.random() * (max - min) + min;
				}
				//小球颜色
				var Color = ["#FF4040", "#FF7373", "#1D7373", "#006363", "#86B32D", "#679B00",
					"#009999", "#9FEE00", "#C9F76F", "#BF3030"
				];
				//创造圆对象
				function Bubble() {};

				Bubble.prototype = {
					inti: function() {
						this.x = Random(0, w);
						this.y = Random(0, h);
						this.r = Random(1, 3);
						//vx,vx表示移动的方向，
						this.vx=Random(-1,1);
						this.vy=Random(-1,1);
						this.color = Color[Math.floor(Random(0, 10))];
					},
					draw: function() {
						content.beginPath();
						content.fillStyle = this.color;
						content.arc(this.x, this.y, this.r, 0, Math.PI * 2);
						content.fill();
					},
					move:function(){
						this.x+=this.vx;
						this.y+=this.vy;
						this.draw();
						this.rebound();
					},
					rebound:function(){//用于控制小球的反弹
						if(this.x<0||this.x>w){
							this.vx=-this.vx;
						}else if(this.y<0||this.y>h){
							this.vy=-this.vy;
						}
					}
				}

				//创建小球的函数
				var AllB=[];//用于存放小球，这是关键点，将小球放入数组中后就可以找到每一个小球
				function create(num) {
					for(var i = 0; i < num; i++) {
						var bubble = new Bubble();
						bubble.inti();
						bubble.draw();
						AllB.push(bubble);
					}
				}

				create(200);
				setInterval(function(){
						//每次调用之前都要清除
						content.clearRect(0,0,w,h);
					for(var item of AllB){
					
						item.move()
					}
				},30)
			}
		</script>
	</body>

</html>