`
sdh88hf
  • 浏览: 69812 次
  • 性别: Icon_minigender_1
  • 来自: 绍兴
社区版块
存档分类
最新评论

canvas绘制科赫雪花

阅读更多
<html>
	<head>
		<title>JS</title>
		
	</head>
	<body>
	<canvas id="square" width=500 height=500></canvas>
	<script>
		var deg = Math.PI/180;
		
	function snowflake(c, n, x, y, len) {    
		c.save();           // Save current transformation    
		c.translate(x,y);   // Translate origin to starting point    
		c.moveTo(0,0);      // Begin a new subpath at the new origin    
		leg(n);             // Draw the first leg of the snowflake    
		c.rotate(-120*deg); // Now rotate 120 degrees counterclockwise    
		leg(n);             // Draw the second leg    
		c.rotate(-120*deg); // Rotate again    
		leg(n);             // Draw the final leg    
		c.closePath();      // Close the subpath    
		c.restore();        // And restore original transformation    
		// Draw a single leg of a level-n Koch snowflake.    
		// This function leaves the current point at the end of the leg it has    
		// drawn and translates the coordinate system so the current point is (0,0).    
		// This means you can easily call rotate() after drawing a leg.    
		function leg(n) {        c.save();               // Save the current transformation        
			if (n == 0) {           // Nonrecursive case:            
				c.lineTo(len, 0);   //   Just draw a horizontal line        
			}                       //                                       _  _        
			else {                  // Recursive case: draw 4 sub-legs like:  \/            
				c.scale(1/3,1/3);   // Sub-legs are 1/3rd the size of this leg            
				leg(n-1);           // Recurse for the first sub-leg            
				c.rotate(60*deg);   // Turn 60 degrees clockwise            
				leg(n-1);           // Second sub-leg            
				c.rotate(-120*deg); // Rotate 120 degrees back            
				leg(n-1);           // Third sub-leg            
				c.rotate(60*deg);   // Rotate back to our original heading            
				leg(n-1);           // Final sub-leg        
				}        c.restore();            // Restore the transformation        
				c.translate(len, 0);    // But translate to make end of leg (0,0)    
				}}
		
		var canvas = document.getElementById("square");
		c2 = canvas.getContext("2d");
		
		snowflake(c2,4,150,115,125);
		c2.stroke();
	</script>
		
		<!--<svg>
			<defs>
				<linearGradient id="fade">
					<stop offset="0%" stop-color="#008"/>
					<stop offset="100%" stop-color="#ccf"/>
				</linearGradient>
			</defs>
			
			<rect x="100" y="100" width="300" height="200" stroke="black" stroke-width="25" fill="url(#fade)"/>
		
		</svg>-->
		
		<input type="button" value="input" onclick="aaa()"/>
	</body>
</html>
分享到:
评论

相关推荐

    基于canvas绘制大坝浸润线源码+项目说明.zip

    基于canvas绘制大坝浸润线源码+项目说明.zip 基于canvas绘制大坝浸润线源码+项目说明.zip 基于canvas绘制大坝浸润线源码+项目说明.zip 基于canvas绘制大坝浸润线源码+项目说明.zip 基于canvas绘制大坝浸润线源码+...

    网页动画素材 canvas绘制四边形棱镜,酷炫的粒子飞出动画特效。(抖音资料)

    网页动画素材 canvas绘制四边形棱镜,酷炫的粒子飞出动画特效。(抖音资料)网页动画素材 canvas绘制四边形棱镜,酷炫的粒子飞出动画特效。(抖音资料)网页动画素材 canvas绘制四边形棱镜,酷炫的粒子飞出动画特效...

    canvas绘制动态心电图

    这篇内容主要探讨如何使用Canvas来绘制动态心电图,这在医疗健康应用、生理数据监测等领域非常有用,它可以让用户在浏览器上实时查看心电图数据,效果如同监护仪一样。 首先,了解Canvas的基本操作是必要的。Canvas...

    vue+canvas绘制图形

    在`Canvas.vue`内部,我们将定义`&lt;canvas&gt;`标签,并通过JavaScript来操作其上下文(`canvas.getContext('2d')`),实现图形的绘制。 描述中提到的“封装好的绘制圆形、矩形以及不规则图形的方法”,这通常意味着...

    ECG html canvas绘制心电图

    ECG html canvas绘制心电图

    HTML5 canvas绘制流程图

    HTML5的canvas元素是网页开发中的一个强大工具,它提供了在网页上动态绘制图形的能力,类似于画布。在这个场景中,我们关注的是如何利用canvas来创建一个流程图,一种用于表示程序逻辑或工作流程的图表。流程图通常...

    html5 canvas绘制管道里跳动小球动画特效

    在Canvas上绘制任何图形或动画,首先需要获取Canvas元素并创建2D渲染上下文。这可以通过JavaScript来完成,如下所示: ```javascript var canvas = document.getElementById('myCanvas'); var ctx = canvas....

    canvas绘制文本内容自动换行的实现代码

    本文将详细介绍如何使用JavaScript编写一个函数,实现在Canvas上绘制文本内容时自动换行。 首先,我们需要理解Canvas API中的`fillText()`方法,它是用来在Canvas上填充文本的。但这个方法不支持文本换行,所以我们...

    canvas绘制音频波形-纯js自写

    Canvas作为Web开发中的一个强大工具,允许我们进行动态图形绘制,非常适合用来展示音频文件的波形。让我们一起了解这个过程。 首先,我们需要获取音频数据。这通常涉及到使用Web Audio API,它为Web应用提供了丰富...

    使用Canvas类绘制android机器人

    在Android开发中,Canvas是图形绘制的核心类,它允许开发者在Bitmap或者其他可绘图对象上进行画图操作。本文将深入探讨如何利用Canvas类来绘制一个Android机器人,从而理解其基本概念、方法以及如何实现复杂的图形...

    使用canvas绘制钟表

    本教程将详细介绍如何使用canvas绘制一个动态的钟表,这涉及到JavaScript和Canvas API的基础知识。 首先,我们需要在HTML页面中创建一个canvas元素,并设置其id以便在JavaScript中引用: ```html &lt;canvas id=...

    Canvas绘制心电图

    使用Canvas绘制心电图,我们可以创建自定义的可视化,用于教育、模拟或数据展示目的。 Canvas是HTML5的一个核心特性,它提供了一个二维绘图环境,允许开发者通过JavaScript代码动态地绘制图形。要绘制心电图,我们...

    html5结构图canvas绘制组织结构图框架代码

    Canvas通过JavaScript API提供了丰富的图形绘制功能,使得开发者无需依赖Flash或其他插件就能创建复杂的2D图形,包括组织结构图。本框架代码就是利用HTML5的Canvas元素来绘制组织结构图。 组织结构图是一种展示公司...

    canvas绘制的流程图

    "canvas绘制的流程图"这个主题涉及到的知识点广泛,包括Canvas的基本概念、API使用、绘图路径、颜色与样式、以及可能的交互实现方法。下面将详细阐述这些内容。 1. **Canvas基本概念**:Canvas是HTML5引入的一个...

    基于openlayers和canvas绘制海量数据的实现

    总之,"基于openlayers和canvas绘制海量数据的实现"是一个高效处理和展示地理信息的技术方案,它结合了OpenLayers的灵活性和Canvas的高性能渲染能力,为开发者提供了强大的工具来应对大数据挑战。通过理解和掌握这些...

    Canvas绘制3D烟花动画特效,js高质量源代码,网页必加点缀!

    Canvas绘制3D烟花动画特效,js高质量源代码,网页必加点缀! Canvas绘制3D烟花动画特效,js高质量源代码,网页必加点缀! Canvas绘制3D烟花动画特效,js高质量源代码,网页必加点缀! Canvas绘制3D烟花动画特效,js...

    canvas绘制仪表盘

    用原生canvas绘制仪表盘,代码简单,参数可传递。本代码既可以用于学习canvas,也可以用于项目中。

    heatmap.js canvas绘制热力图js库

    本文将深入探讨`heatmap.js`库以及如何在canvas上绘制热力图。 `heatmap.js`是一个轻量级且功能强大的JavaScript库,它允许开发者在HTML5的canvas元素上轻松地创建和定制热力图。这个库的核心优势在于其灵活性和可...

    2.22 用canvas绘制一角弯月|canvas曲线的绘制(圆弧和贝塞尔曲线)|Canvas图形、动画、游戏开发从入门到精通全系列课程

    2.22_用canvas绘制一角弯月|canvas曲线的绘制(圆弧和贝塞尔曲线)|Canvas图形、动画、游戏开发从入门到精通全

    Html5_Canvas绘制动态心电图

    这个脚本会处理数据解析、动画循环以及在Canvas上绘制线条的部分。Canvas API提供了一系列方法,如`beginPath()`, `moveTo()`, `lineTo()`, 和 `stroke()`,用于绘制线条。在绘制动态心电图时,我们需要不断更新线条...

Global site tag (gtag.js) - Google Analytics