html5里的canvas

最新推荐文章于 2024-04-03 09:48:24 发布
最新推荐文章于 2024-04-03 09:48:24 发布
阅读量263 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36407090/article/details/58067110
版权 
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8"> 
  <title>canvas</title>  
 </head>
 <body>
  <canvas id='canvas' height="400" width="300" style="border:1px solid #000"></canvas> 
  
  <script type="text/javascript">
	var cas = document.getElementById("canvas");
	var ctx = cas.getContext("2d");  
	//画圆  
	//ctx.arc(100,100,14,Math.PI*2,0,false);
	//ctx.fillStyle = "green";
	//ctx.fill();
  </script>
 </body>
</html>


var DoTime =function(r,u){   

		var RADIUS =  typeof r == "undefined" ? 10 : r;		 //球半径 
		var u= typeof u == "undefined"? 0.55 : u;			 //碰撞能量损耗系数

		var NUMBER_GAP = RADIUS*1.2;//数字之间的间隙
		var WINDOW_WIDTH = RADIUS*124;
		var WINDOW_HEIGHT = RADIUS*45;
		var context; //Canvas绘制上下文
		var balls = []; //存储彩色的小球
		const colors = ["#33B5E5","#0099CC","#AA66CC","#9933CC","#99CC00","#669900","#FFBB33","#FF8800","#FF4444","#CC0000"]; //彩色小球的颜色
		var currentNums = []; //屏幕显示的8个字符
		var digit =
                [
                    [
                        [0,0,1,1,1,0,0],
                        [0,1,1,0,1,1,0],
                        [1,1,0,0,0,1,1],
                        [1,1,0,0,0,1,1],
                        [1,1,0,0,0,1,1],
                        [1,1,0,0,0,1,1],
                        [1,1,0,0,0,1,1],
                        [1,1,0,0,0,1,1],
                        [0,1,1,0,1,1,0],
                        [0,0,1,1,1,0,0]
                    ],//0
                    [
                        [0,0,0,1,1,0,0],
                        [0,1,1,1,1,0,0],
                        [0,0,0,1,1,0,0],
                        [0,0,0,1,1,0,0],
                        [0,0,0,1,1,0,0],
                        [0,0,0,1,1,0,0],
                        [0,0,0,1,1,0,0],
                        [0,0,0,1,1,0,0],
                        [0,0,0,1,1,0,0],
                        [1,1,1,1,1,1,1]
                    ],//1
                    [
                        [0,1,1,1,1,1,0],
                        [1,1,0,0,0,1,1],
                        [0,0,0,0,0,1,1],
                        [0,0,0,0,1,1,0],
                        [0,0,0,1,1,0,0],
                        [0,0,1,1,0,0,0],
                        [0,1,1,0,0,0,0],
                        [1,1,0,0,0,0,0],
                        [1,1,0,0,0,1,1],
                        [1,1,1,1,1,1,1]
                    ],//2
                    [
                        [1,1,1,1,1,1,1],
                        [0,0,0,0,0,1,1],
                        [0,0,0,0,1,1,0],
                        [0,0,0,1,1,0,0],
                        [0,0,1,1,1,0,0],
                        [0,0,0,0,1,1,0],
                        [0,0,0,0,0,1,1],
                        [0,0,0,0,0,1,1],
                        [1,1,0,0,0,1,1],
                        [0,1,1,1,1,1,0]
                    ],//3
                    [
                        [0,0,0,0,1,1,0],
                        [0,0,0,1,1,1,0],
                        [0,0,1,1,1,1,0],
                        [0,1,1,0,1,1,0],
                        [1,1,0,0,1,1,0],
                        [1,1,1,1,1,1,1],
                        [0,0,0,0,1,1,0],
                        [0,0,0,0,1,1,0],
                        [0,0,0,0,1,1,0],
                        [0,0,0,1,1,1,1]
                    ],//4
                    [
                        [1,1,1,1,1,1,1],
                        [1,1,0,0,0,0,0],
                        [1,1,0,0,0,0,0],
                        [1,1,1,1,1,1,0],
                        [0,0,0,0,0,1,1],
                        [0,0,0,0,0,1,1],
                        [0,0,0,0,0,1,1],
                        [0,0,0,0,0,1,1],
                        [1,1,0,0,0,1,1],
                        [0,1,1,1,1,1,0]
                    ],//5
                    [
                        [0,0,0,0,1,1,0],
                        [0,0,1,1,0,0,0],
                        [0,1,1,0,0,0,0],
                        [1,1,0,0,0,0,0],
                        [1,1,0,1,1,1,0],
                        [1,1,0,0,0,1,1],
                        [1,1,0,0,0,1,1],
                        [1,1,0,0,0,1,1],
                        [1,1,0,0,0,1,1],
                        [0,1,1,1,1,1,0]
                    ],//6
                    [
                        [1,1,1,1,1,1,1],
                        [1,1,0,0,0,1,1],
                        [0,0,0,0,1,1,0],
                        [0,0,0,0,1,1,0],
                        [0,0,0,1,1,0,0],
                        [0,0,0,1,1,0,0],
                        [0,0,1,1,0,0,0],
                        [0,0,1,1,0,0,0],
                        [0,0,1,1,0,0,0],
                        [0,0,1,1,0,0,0]
                    ],//7
                    [
                        [0,1,1,1,1,1,0],
                        [1,1,0,0,0,1,1],
                        [1,1,0,0,0,1,1],
                        [1,1,0,0,0,1,1],
                        [0,1,1,1,1,1,0],
                        [1,1,0,0,0,1,1],
                        [1,1,0,0,0,1,1],
                        [1,1,0,0,0,1,1],
                        [1,1,0,0,0,1,1],
                        [0,1,1,1,1,1,0]
                    ],//8
                    [
                        [0,1,1,1,1,1,0],
                        [1,1,0,0,0,1,1],
                        [1,1,0,0,0,1,1],
                        [1,1,0,0,0,1,1],
                        [0,1,1,1,0,1,1],
                        [0,0,0,0,0,1,1],
                        [0,0,0,0,0,1,1],
                        [0,0,0,0,1,1,0],
                        [0,0,0,1,1,0,0],
                        [0,1,1,0,0,0,0]
                    ],//9
                    [
                        [0,0,0,0],
                        [0,0,0,0],
                        [0,1,1,0],
                        [0,1,1,0],
                        [0,0,0,0],
                        [0,0,0,0],
                        [0,1,1,0],
                        [0,1,1,0],
                        [0,0,0,0],
                        [0,0,0,0]
                    ]//:
                ];

		function drawDatetime(cxt){ 
			var nums = []; 
			context.fillStyle="#005eac"
			var date = new Date();
			var offsetX = 70, offsetY = 30;
			var hours = date.getHours();
			var num1 = Math.floor(hours/10);
			var num2 = hours%10;
			nums.push({num: num1});
			nums.push({num: num2});
			nums.push({num: 10}); //冒号
			var minutes = date.getMinutes();
			var num1 = Math.floor(minutes/10);
			var num2 = minutes%10;
			nums.push({num: num1});
			nums.push({num: num2});
			nums.push({num: 10}); //冒号
			var seconds = date.getSeconds();
			var num1 = Math.floor(seconds/10);
			var num2 = seconds%10;
			nums.push({num: num1});
			nums.push({num: num2});

			for(var x = 0;x<nums.length;x++){
				nums[x].offsetX = offsetX;
				offsetX = drawSingleNumber(offsetX,offsetY, nums[x].num,cxt);
				//两个数字连一块，应该间隔一些距离
				if(x<nums.length-1){
					if((nums[x].num!=10) &&(nums[x+1].num!=10)){
						offsetX+=NUMBER_GAP;
					}
				}
			}
			
			if(typeof arguments[1]!= "undefined" && (arguments[1]=="addBall" || arguments[1]=="moveBall")) {
				//说明这是初始化
				if(currentNums.length ==0){
					currentNums = nums;
				}else{
					//进行比较
					for(var index = 0;index<currentNums.length;index++){
						if(currentNums[index].num!=nums[index].num){
							//不一样时，添加彩色小球
							addBalls(nums[index]);
							currentNums[index].num=nums[index].num;
						}
					}
				}
				renderBalls(cxt); 
			}  
			if (typeof arguments[1]!= "undefined" && arguments[1]=="moveBall"){
				updateBalls(); 
			}
			 
 
		}

		function addBalls (item) {
			var num = item.num;
			var numMatrix = digit[num];
			for(var y = 0;y<numMatrix.length;y++){
				for(var x = 0;x<numMatrix[y].length;x++){
					if(numMatrix[y][x]==1){
						var ball={
							offsetX:item.offsetX+RADIUS+RADIUS*2*x,
							offsetY:30+RADIUS+RADIUS*2*y,
							color:colors[Math.floor(Math.random()*colors.length)],
							g:1.5+Math.random(),
							vx:Math.pow(-1, Math.ceil(Math.random()*10))*4+Math.random(),
							vy:-5
						}
						balls.push(ball);
					}
				}
			}
		}
		//画彩色小球
		function renderBalls(cxt){
			for(var index = 0;index<balls.length;index++){
				cxt.beginPath();
				cxt.fillStyle=balls[index].color;
				cxt.arc(balls[index].offsetX, balls[index].offsetY, RADIUS, 0, 2*Math.PI);
				cxt.fill();
			}
		}
		//移出小球
		function updateBalls () {
			var i =0;
			for(var index = 0;index<balls.length;index++){
				var ball = balls[index];
				ball.offsetX += ball.vx;
				ball.offsetY += ball.vy;
				ball.vy+=ball.g;
				if(ball.offsetY > (WINDOW_HEIGHT-RADIUS)){
					ball.offsetY= WINDOW_HEIGHT-RADIUS;
					ball.vy=-ball.vy*u;
				}
				if(ball.offsetX>RADIUS&&ball.offsetX<(WINDOW_WIDTH-RADIUS)){

					balls[i]=balls[index];
					i++;
				}
			}
			//去除出边界的球
			for(;i<balls.length;i++){
				balls.pop();
			}
		}
		function drawSingleNumber(offsetX, offsetY, num, cxt){
			var numMatrix = digit[num];
			for(var y = 0;y<numMatrix.length;y++){
				for(var x = 0;x<numMatrix[y].length;x++){
					if(numMatrix[y][x]==1){
						cxt.beginPath();
						cxt.arc(offsetX+RADIUS+RADIUS*2*x,offsetY+RADIUS+RADIUS*2*y,RADIUS,0,2*Math.PI);
						cxt.fill();
					}
				}
			}
			cxt.beginPath();
			offsetX += numMatrix[0].length*RADIUS*2;
			return offsetX;
		}

		var canvas = document.getElementById("canvas");
		canvas.width=WINDOW_WIDTH;
		canvas.height=WINDOW_HEIGHT;
		context = canvas.getContext("2d"); 
		//记录当前绘制的时刻
		var currentDate = new Date(); 

	 //曝光内部方法
	 /*	
		显示时间 
		让时间动起来
		添加彩球
		让彩球跳起来  
	 */
		//显示时间 
		this.showTime = function(){
			drawDatetime(context);
		};
		//让时间动起来
		this.timeMove = function(){
			setInterval(function(){
				//清空整个Canvas，重新绘制内容
				context.clearRect(0, 0, context.canvas.width, context.canvas.height);
				drawDatetime(context);
			}, 50);
		};
		//添加彩球
		this.addBall = function(){ 
			setInterval(function(){
				//清空整个Canvas，重新绘制内容
				context.clearRect(0, 0, context.canvas.width, context.canvas.height);
				drawDatetime(context,"addBall"); 
			}, 50);
		};
		//彩球掉落 
		this.fallBall = function(){ 
			setInterval(function(){
				//清空整个Canvas，重新绘制内容
				context.clearRect(0, 0, context.canvas.width, context.canvas.height);
				drawDatetime(context,"moveBall"); 
			}, 50);
		};
		return this;
};
<!DOCTYPE html>
<html lang="en">
<meta  charset="utf-8" />
<title>HTML5-炫酷跳动彩球时间特效</title> 
</head>
<body>
	<div id="timeBox">
		<canvas id="canvas">你的浏览器不支持canvas</canvas>
	</div>
	<script type="text/javascript" src="js/doTime-v2.js"></script>
	<script type="text/javascript">  
		var d = new DoTime(8,0.65); //初始化
		//d.showTime();//显示时间
		//d.timeMove();//时间动起来
		//d.addBall();//添加彩球
		d.fallBall();//彩球掉落 
	</script>
</body>
</html>








                

        

        

    




    

      

        

            

              
                
                  feiwofeifeiwo_###
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
基于canvas的粒子时钟 --- js特效

				
			

			

				

					bash_winner的博客
				

				

					02-16
					
					430
					
				

			

		

		

			
				
前言：写在前面的话
什么是粒子时钟，听上去好高尚的样子。☺。起始也就那样。话不多说，先来张效果图。

感觉是不是还行，怎样做的呢，其实也很简单。再来一张图。

看了这个图片，是不是大致懂了，这个效果是怎么来的，其实说起来有点像，计算机的成像了。你所看到的图片，各种形状，其实都是一个一个像素点组成的。这里的数字也是用的这种方法，实现的。将画出一个数字，转变为画每一个像素点。这也用到了数学建模的思想。...

			
		

	



                

              
                



	

		

			

				
					
html粒子时钟

				
			

			

				

					07-31
				

			

		

		

			
				
动态改变时间，掉落小球。

			
		

	



                


  
              

                


	

		

			

				
					
Canvas--粒子时钟

				
			

			

				

					zelentre的博客
				

				

					02-08
					
					353
					
				

			

		

		

			
				
digit.js


digit =


    [


        [
            [0,0,1,1,1,0,0],
            [0,1,1,0,1,1,0],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,...

			
		

	





	

		

			

				
					
JS 粒子特效时钟

				
			

			

				

					qq_28511869的博客
				

				

					11-15
					
					476
					
				

			

		

		

			
				
效果:http://www.scarecrow.top/seeview?aid=90

代码下载:

https://gitee.com/scarecrowpqs/codes/nbo51eg7msacpzvf9whxk38

其中核心部分讲解:

1、Canvas单位问题：

<canvas id="ScarecrowCanvasId_246154" width="600" height="...

			
		

	



		

			
		



	

		

			

				
					
原生js粒子时钟

				
			

			

				

					
				

				

					06-06
					
					709
					
				

			

		

		

			
				
原生js粒子时钟


 



 
 


 


     html,body {margin:0; padding:0; position:absolute; width:100%; height:100%; overflow: hidden}
#screen {width:80%; height:50%; background:#b6b6b6; position

			
		

	





	

		

			

				
					
HTML5 Canvas核心技术源码技术代码

				
			

			

				

					03-27
				

			

		

		

			
				
HTML5 Canvas核心技术源码技术代码、图形、动画与游戏开发。 Canvas开发、入门学习Canvas技术代码。 HTML5 Canvas核心技术源码技术代码、图形、动画与游戏开发。 Canvas开发、入门学习Canvas技术代码。 HTML5 Canvas...

			
		

	





	

		

			

				
					
html5，canvas扇形菜单   

				
			

			

				

					11-21
				

			

		

		

			
				
HTML5和Canvas是现代网页开发中的重要技术，它们为创建动态、交互式的用户界面提供了强大的工具。Canvas是HTML5的一个核心元素，它允许开发者通过JavaScript在网页上进行2D绘图，无需借助Flash或其他插件。这个...

			
		

	





	

		

			

				
					
html2canvas将HTML内容写入Canvas生成图片 uniapp

				
			

			

				

					12-16
				

			

		

		

			
				
HTML2canvas是一个JavaScript库，它的主要功能是在浏览器环境中将HTML内容转换为Canvas图像，从而能够进一步将这些图像保存为图片格式，如JPEG、PNG等。这个工具在Web开发中非常实用，尤其对于需要在客户端生成屏幕...

			
		

	





	

		

			

				
					
html2canvas属性和使用方法以及如何使用html2canvas将HTML内容写入Canvas生成图片

				
			

			

				

					11-26
				

			

		

		

			
				
《使用html2canvas将HTML内容转化为Canvas生成图片》  在现代网页开发中，有时我们需要将网页的部分或全部内容转化为图片，以便于分享、保存或打印。html2canvas是一款强大的JavaScript库，它允许开发者在浏览器端...

			
		

	





	

		

			

				
					
html2canvas(1.0.0)

				
			

			

				

					02-22
				

			

		

		

			
				
《html2canvas：网页元素截图神器》  html2canvas是一个非常强大的JavaScript库，它允许你在浏览器环境中将HTML渲染为Canvas图像，进而可以将其保存为图片或者进行其他图像处理。这个库在1.0.0版本中经过了优化和...

			
		

	





	

		

			

				
					
html5网站粒子时钟,h5 canvas实现粒子时钟的详细方法

				
			

			

				

					weixin_39966765的博客
				

				

					06-10
					
					173
					
				

			

		

		

			
				
本篇文章给大家带来的内容是关于h5 canvas实现粒子时钟的详细方法，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。我们先看看粒子时钟的效果，如下：下面我们将通过canvas和js实现，首先要创建一个html文件并添加一个canvas画布，如下：Document.container{margin: 0, auto;width: 600px;}下面导入素材，digit.js，素材中...

			
		

	





	

		

			

				
					
Canvas实现数字电子时钟（带粒子掉落效果）

					
最新发布

				
			

			

				

					qq_44910894的博客
				

				

					04-03
					
					387
					
				

			

		

		

			
				
本文主要演示了如何使用 Canvas 绘图技术实现一个简易的数字电子时钟的效果，增加了粒子掉落效果，采用了面对对象的实现思路。

			
		

	





	

		

			

				
					
实现粒子时钟特效

				
			

			

				

					weixin_64740434的博客
				

				

					01-22
					
					410
					
				

			

		

		

			
				
【代码】实现粒子时钟特效。

			
		

	





	

		

			

				
					
粒子时钟的代码

				
			

			

				

					weixin_44548147的博客
				

				

					05-03
					
					327
					
				

			

		

		

			
				
首先我们需要利用矩阵来做0~9的数字以及做一个冒号，代码如下：

var digit=[
    [
      [0,0,1,1,1,0,0],
      [0,1,1,0,1,1,0],
      [1,1,0,0,0,1,1],
      [1,1,0,0,0,1,1],
      [1,1,0,0,0,1,1],
...

			
		

	





	

		

			

				
					
Flutter自定义Widget之炫酷粒子时钟效果

				
			

			

				

					hpc_kiven的博客
				

				

					08-20
					
					488
					
				

			

		

		

			
				
周末发表了一篇文章《这个项目也太屌了吧》，给大家推荐了一个炫酷的Flutter粒子时钟项目，不过没有将具体实现思路和代码，所幸，作者自己写了一篇博客将这个项目的背景、实现思路、和所遇到的问题，我觉得对非常有用，因此翻译出来，整理给大家！原文题目《我是如何创建粒子时钟，并赢得了#FlutterClock挑战的》。
背景
Google在2019年11月18日发起了The Flutter Clock Challenge挑战活动，内容很简单：使用Flutter UI工具包设计时钟。Google专家小组将根据四个主要

			
		

	





	

		

			

				
					
html5 -- Canvas

				
			

			

				

					qq_36320160的博客
				

				

					10-08
					
					127
					
				

			

		

		

			
				
Canvas绘制简单图形 一、绘制文字 　　fillText(text, x, y[, maxWidth]) -- 填充方式 　　strokeText(text, x, y[, maxWidth]) ...

			
		

	





	

		

			

				
					
Flutter -如何创建炫酷粒子时钟效果！

				
			

			

				

					Android 开发架构
				

				

					08-19
					
					791
					
				

			

		

		

			
				
背景
Google在2019年11月18日发起了The Flutter Clock Challenge挑战活动，内容很简单：使用Flutter UI工具包设计时钟。Google专家小组将根据四个主要标准对参赛作品进行评判：视觉美感，创意新颖性，代码质量和整体执行力。
在这之前，我只使用过Flutter一两次，这对于我来说是一个潜在的机会。
最初的想法
挑战开始了大约两周后，我才有了一些想法，但还没有编写任何代码，解决此类问题时，我通常的方法是首先寻找现有的解决方案来找灵感。但这次不行。相反，我在Figma上

			
		

	





	

		

			

				
					
canvas粒子时钟

				
			

			

				

					X__TAO的博客
				

				

					09-01
					
					888
					
				

			

		

		

			
				
前面的话

本文将使用canvas实现粒子时钟效果

效果展示



点阵数字

digit.js是一个三维数组，包含的是0到9以及冒号(digit[10])的二维点阵。每个数字的点阵表示是7*10大小的二维数组

通过遍历数字点阵的二维数组，当该位置的值为1时，则绘制一个粒子，否则不绘制


将绘制数字的函数命名为renderDigit()。在该函数中，将粒子绘制为

			
		

	





	

		

			

				
					
HTML5 Canvas技术详解

				
			

			

				

					
				

			

		

		

			
				
"HTML5 Canvas是Web开发中的一个关键特性，允许开发者在网页上进行动态图形绘制，实现丰富的交互性和动画效果。这本书由Steve Fulton和Jeff Fulton撰写，详细讲解了HTML5 Canvas的使用方法，旨在帮助读者掌握这个...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值